호이스팅(Hoisting) 이란?

예전에 JavaScript의 변수에 대해 정리하면서 호이스팅을 언급한 적이 있다.

하지만 이번 게시글을 통해 더 자세히 정리하고자 한다.

 

JavaScript 변수 (var)

https://duyaan.tistory.com/43

 

JavaScript 변수 (let, const)

https://duyaan.tistory.com/46

 

 

호이스팅(Hoisting)

호이스팅이란, 자바스크립트에서 특정한 동작을 설명하는 용어이다.

특정한 동작 : 변수와 함수 등의 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 행동

(*주의할 단어: 선언)

 

 

실행 컨텍스트(Execution Context)

자바스크립트 엔진은 코드를 실행하기 전에 실행 컨텍스트(Execution Context)를 생성한다.

(실행 컨텍스트에 대해 간략하게 설명하자면, 실행 가능한 코드에 제공할 환경정보를 모아놓은 객체이다. 실행 컨텍스트 역시 중요하게 다뤄야 할 내용이므로 이후 다른 게시글에서 정리할 예정이다.)

 

이 실행 컨텍스트 단계에서 모든 선언(var, let, const, function, class 등)을 해당 스코프에 등록한다.

 

 

결국,

호이스팅은 코드를 실행하기 전에 자바스크립트 엔진에 의해 자동으로 수행되는,

변수와 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 행동을 의미한다.

 

 

예시

console.log(str); // undefined
var str = "호이스팅이란?";

이 예시는 호이스팅이 일어나는 원리에 대해서 잘 알 수 있는 예시이다.

 

일반적으로 생각한다면, str이라는 변수가 선언되기 전에 str을 출력하려고 하면 오류가 날 것이다.

하지만 실제로는 undefined가 출력되는 것을 알 수 있다.

 

이는 호이스팅으로 인한 현상인 것이다.

즉, 이 코드를 자바스크립트 엔진이 해석하면 다음과 같은 순서가 된다.

var str;
console.log(str);
str = "호이스팅이란?";

여기서 보면 str이라는 변수는 호이스팅에 의해 최상단 스코프에서 선언이 된 것이다.

하지만 여기서도 알 수 있듯이, 선언만 끌어올려지고 할당은 끌어올려지지 않는다.

그렇기에 str을 출력하면 아직 값이 할당되지 않았으니 undefined가 출력되는 것이다.

 

여기서 var과 let, const의 차이점을 알 수 있다.

 

 

var VS let, const

변수는 3단계에 걸쳐서 생성된다.

"선언(Declaration) - 초기화(Initialization) - 할당(Assignment)"

 

선언 단계에서는 변수를 실행 컨텍스트의 변수 객체에 등록한다.

초기화 단계에서는 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이때 변수는 undefined로 초기화된다.

할당 단계에서는 초기화된 변수에 실제 값을 할당한다.

 

 

var의 경우에는 선언과 초기화가 한 번에 이루어진다.

즉, 변수 객체에 등록하고 바로 메모리에 공간을 확보하여 undefined로 초기화한다.

다음 예시는 위의 예시에서 자바스크립트 엔진이 해석하는 순서를 그대로 가져온 것이다.

var str;
console.log(str);
str = "호이스팅이란?";

 

호이스팅에 의해 선언이 최상단에서 일어나는 것인데, var 키워드에 의해 선언 + 초기화가 진행된 것이다.

그렇기에 str을 출력하면 undefined가 출력된다.

 

하지만 let과 const의 경우에는 선언과 초기화가 분리되어 진행되고, 초기화는 실행 이후 실제 선언문에 도달했을 때 진행된다.

다음 예시는 let 키워드로 str을 선언했을 때 자바스크립트 엔진이 해석하는 순서를 나타낸 것이다.

// 실제 코드
// console.log(str); // ReferenceError
// let str = "호이스팅이란?";

// 자바스크립트 엔진이 해석하는 순서
let str;
console.log(str)
str = "호이스팅이란?";

var과 마찬가지로 let으로 선언된 변수 역시 호이스팅에 의해 변수의 선언이 스코프의 최상단에서 일어났다.

 

하지만 let 키워드에 의해 선언만 진행되고 초기화는 진행되지 않는다.(코드 상으로 아직 실제 선언문에 도달하지 않았음)

그렇기에 str을 출력하려고 하면 undefined가 아닌 참조 에러를 발생시킨다.

 

const도 let과 동일하게 작동한다.

 

 

TDZ(Temporal Dead Zone)

TDZ란 일시적 사각지대를 뜻하는데, 이는 let과 const로 선언된 변수가 호이스팅 되는 과정에서 생긴 용어이다.

이는 let과 const로 변수를 선언할 때, 변수 선언부터 초기화되는 순간까지를 의미한다.

 

즉, 호이스팅으로 인해 스코프의 최상단으로 끌어올려진 이후부터 실제 변수 선언문까지의 영역이다.

위의 예시를 다시 보면, console.log(str)은 TDZ에 있는 것이다.

// 실제 코드
// console.log(str); // ReferenceError
// let str = "호이스팅이란?";

 

 

함수의 호이스팅

함수 선언문의 경우에는 변수 선언과 마찬가지로 호이스팅 된다.(함수 전체가 스코프의 최상단으로 끌어올려진다.)

하지만 주의할 점은 함수 표현식은 호이스팅 되지 않는다는 점이다.

 

func(); // 호이스팅 O
function func() { // 함수 선언문
    console.log("호이스팅 O");
}


f(); // ReferenceError
let f = function() { // 함수 표현식
    console.log("호이스팅 X");
}

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)