[JS] 호이스팅(Hoisting)

FE/Javascript

SH_Roh 2022. 2. 19. 00:40

호이스팅(Hoisting)

호이스팅이란 "끌어올린다"는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어 올려지는 현상을 말한다. 이는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

호이스팅 시 var 키워드로 선언한 변수의 경우 undefined 값으로 변수를 초기화한다.

console.log(num1); // undefined
var num1 = 6; // 선언, 초기화
console.log(num1); // 6

컴파일러는 자바스크립트 엔진이 인터프리팅하기 전에 컴파일을 하는데, 이 때 var num1 = 6;을 2개의 구문으로 여긴다.

var num1은 변수 선언문으로, 컴파일을 할 때 처리하고 num1 = 6은 실행할 때까지 내버려둔다. 따라서 변수 num1이 호이스팅되고 콘솔에는 undefined가 출력된다.

console.log(num2); // Uncaught ReferenceError: num2 is not defined
num2 = 6; // 초기화

두 번째 코드의 경우 선언 없이 초기화만 존재한다. 따라서 호이스팅도 없고, 변수를 읽으려는 시도에서 ReferenceError가 발생한다.

let과 const로 선언한 변수도 호이스팅의 대상이지만, var과 달리 호이스팅 시 변수를 초기화하지는 않는다. 따라서 변수 초기화 전에 참조하는 코드가 먼저 나오면 예외가 발생한다.

console.log(num3); // Uncaught ReferenceError: num3 is not defined
let num3 = 6;

함수 호이스팅에서 주의할 점은 함수 선언문은 호이스팅되지만 함수 표현식은 호이스팅되지 않는다는 것이다.

함수 선언문

func(); // 출력 결과: 함수 호이스팅
function func() { console.log('함수 호이스팅'); }

함수 표현식

func(); // Uncaught TypeError: func is not a function
var func = function() {}

함수 표현식의 경우 변수 func의 호이스팅이 발생해 ReferenceError가 발생하지 않지만, 그 값이 undefined이기 때문에 호출 시 TypeError가 발생한다.

또한 동일한 이름의 변수 선언문과 함수 선언문이 있을 경우 함수 선언문이 먼저이다.

func(); // 출력 결과: 함수 호이스팅
var func = function(){ console.log('변수 호이스팅') }
function func() {
  console.log('함수 호이스팅');
}

위의 경우 함수 선언문과 변수 선언문(= 함수 표현식)이 있지만 함수 선언문의 호이스팅이 먼저이기 때문에 콘솔에 함수 호이스팅이라는 값이 출력된다.

참고