[Javascript] 변수 호이스팅

호이스팅은 코드 실행 전에 인터프리터가 함수, 변수 또는 클래스의 선언을 자신의 범위 상단으로 이동하는 것 처럼 보이는 과정이다

자바스크립트는 별도의 컴파일을 하지 않는 인터프리터 언어다. 인터프리터는 소스코드를 바로 실행하는 환경이나 컴퓨터 프로그램이다. 한번에 한줄 씩 코드를 읽어 해석한다.

호이스트를 통해 코드에 함수의 선언보다 함수를 먼저 작성해도 사용할 수 있다.

myAge(27);

fuction myAge(age) {
  console.log(`My age is ${age}.`);
}

// My age is 27.

// 호이스트를 하지 않았다면
fuction myAge(age) {
  console.log(`My age is ${age}.`);
}

myAge(27);

다만 변수를 선언할 때, 변수 호이스팅을 유의해야 한다.

console.log(n); // undefined
var n;

위의 코드는 인터프리터에 의해 console.log(n);이 먼저 실행되어 ReferenceError가 발생해야되지만 호이스팅에 의해 스코프 최상단으로 변수의 선언이 이동된다. undefined를 출력한다. 변수 선언은 코드들이 실행되는 런타임이 아닌 그 이전 단계에 먼저 실행된다.

console.log(n); // ReferenceError
let n = 1;

하지만 let이나 const는 예외다. let이나 const는 선언 이전에 참조하면 ReferenceError를 출력한다. 이는 var가 선언과 초기화를 한 번에 진행하기 때문이다.

var는 재선언을 해도 아무런 오류를 뱉지 않는다. 따라서 변수 선언 후 재할당이 필요한 변수는 let을 사용하고 그 외엔 모두 const를 통해 재선언, 재할당을 모두 불가능하게 변수를 선언하는 것이 권장된다.

참고 - MDN 레퍼런스 - 호이스팅