[JS] 호이스팅(Hoisting)

728x90

안녕하세요. 오늘은 자바스크립트의 호이스팅에 대해 포스팅하도록 하겠습니다.

호이스팅(Hoisting)이란?

자바스크립트에서 변수 선언과 함수 선언이 실제 코드가 실행되기 전에 코드의 최상단으로 이동된 것처럼 동작하는 현상을 의미합니다. 하지만 호이스팅은 실제로 코드의 물리적인 이동을 의미하지 않으며 내부적으로는 자바스크립트가 실행 전에 변수와 함수의 선언을 미리 처리하는 방식입니다.

이로 인해서 선언된 변수를 그 선언문보다 앞서 참조할 수 있지만 변수의 값은 초기화된 값이 아닌 기본 값을 얻게 됩니다. 변수의 경우 'var' 키워드로 선언된 변수는 'undefined'로 초기화되고 함수 선언은 코드 어디에서든 호출할 수 있게 됩니다.

변수 선언의 호이스팅

'var'로 선언된 변수는 호이스팅이 발생하며, 선언문이 코드의 최상단으로 이동된 것처럼 동작합니다.

그러나 변수의 값 초기화는 선언 이후에 이루어집니다.

console.log(name); // undefined
var name = '뭉이조이';
console.log(name); // 뭉이조이

위 코드를 실행하면 첫 번째 줄은 'undefined'이 출력되는데 변수 선언은 호이스팅으로 인해 코드의 최상단으로 이동하지만 값 할당은 그 이후에 이루어지기 때문입니다.

자바스크립트 엔진이 위 코드를 다음과 같이 처리하는 것과 비슷하다고 이해할 수 있습니다.

var name; // 변수 선언만 호이스팅됨
console.log(name); // undefined
name = '뭉이조이';
console.log(name); // 뭉이조이

변수 선언 방식에 따른 차이

var, let, const 모두 호이스팅 되지만 각각 동작 방식에 차이가 있습니다.

var : 호이스팅이 되고 선언 전에 접근하면 'undefined'로 초기화된 값을 반환합니다. (에러 없이 'undefined'가 출력)
let, const : 호이스팅은 되지만 일시적 사각지대(Temporal Dead Zone, TDZ) 때문에 선언 전에 접근하려고 하면 ReferenceError가 발생합니다.

console.log(varVariable);   // undefined
var varVariable = 'var 값';

console.log(letVariable);   // ReferenceError: letVariable is not defined
let letVariable = 'let 값';

console.log(constVariable); // ReferenceError: constVariable is not defined
const constVariable = 'const 값';

함수 선언의 호이스팅

함수는 선언된 위치와 상관없이 코드를 어디에서든 호출할 수 있습니다.

sayHello();

function sayHello() {
    console.log("Hello!");
}

위 코드에서는 sayHello()가 호출되는 부분이 함수 선언보다 앞에 있지만 문제 없이 실행됩니다.