[JavaScript]호이스팅이란? var, let, const의 차이

1. 호이스팅

자바스크립트에서 변수는 선언 → 초기화 단게를 거친다.

• 선언 단계에서는 변수명을 등록하여 자바스크립트 엔진에게 변수의 존재를 알린다.
• 초기화 단계에서는 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefinde를 할당한다.

변수 선언은 런타임에서 되는 것이 아니라 그 이전에 먼저 수행된다. 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 먼저 실행한다. 이를 호이스팅이라고 한다. (var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자는 호이스팅된다.)

이러한 점에서 함수 선언문과 함수 표현식에는 차이가 있다. 함수 선언문은 함수 자체가 호이스팅 되고, 함수 표현식은 undefined로 초기화 된다.

// 함수 참조
console.dir(add) // output: f add(x, y)
console.dir(sub) // output: undefined

// 함수 호출
console.log(add(2, 5)) // output: 7
console.log(sub(2, 5)) // output: Uncaught TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
  return x + y
}

// 함수 표현식
var sub = function(x, y) {
  return x + y
}

2. 스코프

var, let, const의 차이를 살펴보기 전 스코프에 대한 개념을 잠깐 알아보자.

스코프는 식별자의 유효범위를 의미한다. 자바스크립트에서 모든 코드 블록은 지역 스코프를 만든다. (if, for, while, try/cach) 이러한 특성을 블록 레벨 스코프라고 한다.

var 키워드는 함수의 코드 블록만을 지역 스코프로 인정한다. 만약 함수가 아닌 곳에서 var 키워드를 통해 변수를 선언하게 된다면, 전역 변수로 취급한다.

var과 다르게 let,const는 블록 레벨 스코프를 따른다.

3. var, let, const의 차이

선언 및 할당

• var : 재할당이 가능하다.
• let : 변수 중복 선언이 불가능하지만, 재할당은 가능하다.
• const : 선언과 초기화를 동시에 진행해야 한다. 재선언과 재할당 모두 불가능하다. (원시 값은 재할당이 불가능하지만, 객체는 가능하다.)

호이스팅

• var : 선언 단계와 초기화 단계가 동시에 진행된다. undefined라는 값으로 초기화된다. 실질적으로 호이스팅의 효과를 보는 것은 var과 함수 선언문이다. (let과 const는 접근 시 에러 메세지) → 이러한 이유로 var와 함수선언문 대신에 let과 화살표 함수를 사용하는 것이다.
• let: 선언 단계와 초기화 단계가 분리되어 진행된다. 만약 초기화 되지 않은 경우 변수에 접근하게 되면 참조 에러가 발생한다. (’val1’ is not defined)
• cost : 선언 단계와 초기화 단계가 동시에 진행된다. const의 경우 마찬가지로 초기화 되지 않은 경우 에러가 발생하지만 에러 메세지가 다르다. ( Cannot access ‘val1’ before initialization)