호이스팅에 대해 알아보자! (feat. var, let, const 차이)

사전 지식

컴파일 언어 vs 인터프리터 언어

그렇다면 호이스팅이란 무엇일까?

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. - MDN Web Docs

함수 호이스팅

• 일반 함수
아래 예제 코드와 출력을 살펴보면, 호이스팅이 일어나서 generalFunctionTest 함수를 선언하기 전에 함수를 호출했음에도, 정상적으로 실행이 되는 것을 볼 수 있다.
• 예제 코드

generalFunctionTest();
function generalFunctionTest() {
  console.log('General Function');
}
generalFunctionTest();

 
• 출력

General Function
General Function

• 익명 함수
반면에, 익명 함수의 경우에는 anonymousFunctionTest 함수를 선언하기 전에 호출을 하면 호이스팅이 일어나지 않아서 Reference Error 를 반환하는 것을 볼 수 있다. 이러한 이유는 변수에 함수를 저장하기 때문인데, 밑에서 설명할 변수의 생성 3가지 단계에서 할당 과정은 호이스팅에서 일어나지 않기 때문이다.
• 예제 코드

anonymousFunctionTest(); // Reference Error
var anonymousFunctionTest = function () {
  console.log('Anonymous Function');
};
anonymousFunctionTest();

 
• 출력

ReferenceError: anonymousFunctionTest is not defined

 

변수 호이스팅

• 예제 1 - var 를 이용한 변수 선언과 할당
• 예제 코드

console.log('Before declare variable statement:', val); // undefined
var val = 10;
console.log('After declare variable statement:', val); // 10

 
• 출력

Before declare variable statement: undefined
After declare variable statement: 10

위의 예제를 실행해보면, var 의 경우 호이스팅이 일어나면서, 그 과정에서 변수의 선언과 초기화 단계가 함께 진행된다. 이러한 이유로 var 로 선언된 변수의 경우, 변수 선언문 이전에 호출을 해도 Reference Error 가 나지 않고, 호출을 할 수 있다. 다만 할당은 일어나지 않았기 때문에 undefined 로 출력되는 것을 확인할 수 있다.
 

• 예제 2 - let 를 이용한 변수 선언과 할당
• 예제 코드

console.log('Before declare variable statement:', val); // Reference Error
let val = 10;
console.log('After declare variable statement:', val); // 실행 x

 
• 출력

ReferenceError: Cannot access 'val' before initialization

위의 예제를 실행해보면, Reference Error 가 발생한다는 것을 알 수 있다. 이는 let 으로 선언된 변수는 호이스팅이 똑같이 일어나지만, 이 과정에서 선언만 진행이 되고 초기화 단계가 진행이 되지 않았기 때문이다. 이러한 선언만 일어나고 초기화 단계가 일어나지 않은 변수는 TDZ(Temporal Dead Zone) 에 있다고 이야기한다.
 

TDZ(Temporal Dead Zone): 선언 단계와 초기화 단계 사이를 의미하며, 이 단계에 있는 변수에는 접근을 할 수 없다.

 

• 예제 3 - const 를 이용한 변수 선언과 할당
• 예제 코드

console.log('Before declare variable statement:', val); // Reference Error
const val = 10;
console.log('After declare variable statement:', val); // 실행 x

 
• 출력

ReferenceError: Cannot access 'val' before initialization

위의 예제를 실행해보면, let 키워드를 사용하여 변수를 선언했을 때와 같이 Reference Error 가 발생한다. 이는 let 과 마찬가지로 호이스팅 과정에서 선언만 진행이 되고 초기화 단계가 진행되지 않기 때문이다. 하지만 let 키워드를 사용한 선언과 한 가지 차이가 있다. 이는 아래 예제에서 확인해보자.
 
• let 과의 차이
let 키워드로 선언한 변수와의 차이점은 바로 변수의 재할당이 가능한 지이다. let 키워드로 선언한 경우 변수를 몇 번이고 재할당 할 수 있는 반면에, const 키워드로 선언한 경우, 한 번 할당한 값은 두 번 다시 변경을 할 수 없다. 아래의 예제 코드를 실행해보면 알 수 있을 것이다.
• 예제 코드

const val = 10;
console.log('val: ', val); // 10
val = 20; // TypeError
console.log('val: ', val); // 실행 x

 
• 출력

TypeError: Assignment to constant variable.

정리