var, let, const의 차이

편하게 사용하는 var의 문제점

• 중복선언이 가능하기 때문에 예기치 않은 값으로 인해 오류가 생길 수 있으며 수정하려면 하나하나 할당된 값을 확인해야한다.
• 함수레벨 스코프로 인해 함수 외부에서 선언할 경우 모두 전역변수로 사용된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. (호이스팅)

ES6에서 나온 let과 const 키워드는 var키워드의 문제점을 해결했다.

재선언과 재할당

let

재선언 불가, 재할당 가능

let name = 'hooo'
console.log(name) // output: hooo

let name = 'hooo' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'kyungba'
console.log(name) // output: kyungba

const

재선언, 재할당 불가 -> 반드시 선언과 할당을 동시에 해야한다.

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'hooo'

const는 재선언과 재할당이 불가능하다. 원시값은 수정이 불가하나 배열과 오브젝트의 경우 수정이 가능하다. const는 재선언과 재할당은 불가지만 불변을 의미하는 것은 아니다.

// 원시값의 재할당
const name = 'hooo' 
name = 'hooo' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'hooo',
}
name.eng = 'hooo'

console.log(name) // output: { eng: "hooo" }

블록 레벨 스코프

let, const 키워드로 선언한 변수는 모두 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

var 키워드 사용시 5가 출력되었지만 let의 경우 if문안에 스코프에만 5가 적용된다. (const도 동일하게 적용)

변수 호이스팅

let

let 키워드로 선언한 변수는 선언과 할당(초기화)이 따로 이루어진다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'hooo'

따라서 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재한다.

const

const는 선언과 할당(초기화)가 동시에 이루어진다.

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'hooo'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 떴다. 하지만 const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 진행되지 않은 상태이기 때문에 Cannot access 'name' before initialization 에러 문구가 뜬다.