Web/JavaScript

JS 기초_03 (Variables & Identifiers)

5_ssssseung 2021. 5. 9. 23:01

Variables & Identifiers (변수와 식별자)

 

식별자 정의와 특징

  • 식별자(identifier)변수를 구분할 수 있는 변수명을 말함
  • 식별자는 반드시 문자, 달러($) 또는 밑줄(_)로 시작
  • 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
  • 예약어 사용 불가능
    • 예시: for, if, case

 

식별자 작성 스타일

  • 카멜 케이스(camelCase, lower-camel-case)
    • 변수, 객체, 함수에 사용
  • 파스칼 케이스(PascalCase, upper-camel-case)
    • 클래스, 생성자에 사용
  • 대문자 스네이크 케이스(SNAKE_CASE)
    • 상수에 사용
      • 상수 : 개발자의 의도와 상관없이 변경될 가능성이 없는 값
// 카멜 케이스
const userInfo = { name: 'Theo', age: 100 }

// 파스칼 케이스
class User {
    constructor(options) {
        this.name = options.name
    }
}

// 스네이크 케이스
const API_KEY = 'a1b2c3d4'

 

변수 선언 키워드 (let, const)

  • let
    • 재할당 할 수 있는 변수 선언 시 사용
    • 변수 재선언 불가능
    • 블록 스코프
  • const
    • 재할당 할 수 없는 변수 선언시 사용
    • 변수 재선언 불가능
    • 블록 스코프
// 선언, 할당, 초기화

let foo			// 선언
console.log(foo)	// undefined

foo = 11		// 할당
console.log(foo)	// 11

let bar = 0		// 선언 + 할당
console.log(bar)	// 0
  • 선언 (Declaration)
    • 변수를 생성하는 행위 또는 시점
  • 할당 (Assignment)
    • 선언된 변수에 값을 저장하는 행위 또는 시점
  • 초기화 (Initialization)
    • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

 

// let (재할당 가능)
let number = 10		// 1. 선언 및 초기값 할당
number = 10		// 2. 재할당

console.log(number)	// 10
// const (재할당 불가능)
const number = 10		// 1. 선언 및 초기값 할당
number = 10			// 2. 재할당 불가능

=> Uncaught TypeError
:Assignment to constant variable.
  • 재선언은 let, const 모두 불가능

 

블록 스코프

  • if, for, 함수 등의 중괄호 내부를 가리킴
  • 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능

 

변수 선언 키워드 (var)

  • var로 선언한 변수는 재선언 및 재할당 모두 가능
  • ES6 이전에 변수를 선언할 때 사용되던 키워드
  • 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능
    • 따라서 ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장
  • 함수 스코프
// 재선언 및 재할당 모두 가능
var number = 10		// 1. 선언 및 초기값 할당
var number = 50		// 2. 재할당
    
console.log(number)	// 50

 

  • 함수 스코프
    • 함수의 중괄호 내부를 가리킴
    • 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능

 

  • 호이스팅 (hoisting)
    • 변수를 선언 이전에 참조할 수 있는 현상
    • 변수 선언 이전의 위치에서 접근 시 undefinded를 반환

 

정리

키워드 재선언 재할당 스코프 비고
let X O 블록 스코프 ES6부터 도입
const X X 블록 스코프 ES6부터 도입
var O O 함수 스코프 사용 X

 

'Web > JavaScript' 카테고리의 다른 글

JS 기초_05 (Conditions & Loops)  (0) 2021.05.10
JS 기초_04 (Types & Operators)  (0) 2021.05.10
JS 기초_02 (ECMAScript 6)  (0) 2021.05.09
JS 기초_01 (Event)  (0) 2021.05.09
JS 기초_00 (DOM)  (0) 2021.05.09