JS_기술 (3)_ Hoisting(호이스팅) 뿌수기

JS의 호이스팅에 대해서 자세히 알아보았다!

 

1. 호이스팅이란?

( 1 ) 호이스팅(Hoisting)이란 무엇일까

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 
- MDN (https://developer.mozilla.org/ko/docs/Glossary/Hoisting)

MDN 문서에서는 위와 같이 번역을 하였다.

 

즉, JS의 인터프리터가 코드를 읽기 시작할 때 선언된 변수, 상수, 함수 등을 모두 미리 할당을 하는 작업을 의미한다.

 

글의 본격적인 시작에 앞서

모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다!

 

---

( 2 ) var의 특징

JS에서 변수, 상수를 선언하는 방법은 3가지가 있다.

1.var    2.let    3. const

이 중 const는 상수를 선언하고 var과 let은 변수를 선언한다.

 

그렇다면 이 둘의 차이는 무엇일까? 호이스팅의 관점에서 알아보자

 

예시 1) var

console.log(a);
var a = 1;

>>> undefined

예시 2) let

console.log(a);
let a = 1;

>>> Uncaught ReferenceError: a is not defined

위의 결과를 보면 var를 에러를 반환하지 않지만 let은 참조에러를 반환한다.

이는 var과 let의 호이스팅이 다르기 때문에 발생한 결과이다.

 

---

( 3 ) JS 코드 실행의 기본 개념들

1) Execution Context (실행 컨텍스트)

Execution Context는 JS에서 코드가 정상적으로 작동할 수 있도록 수행환경에 대한 여러 정보를 가지고 있는 객체라고 할 수 있다.

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. 

- ECMAScript(262) 9.4 Execution Contexts

즉, ECMAScripts에서 코드 수행(evaluation) 매커니즘을 표현하기 위한 것이라고 한다.

 

2) Lexical Environment

위의 Execution Context에 속해있는 요소이고,

코드에서 사용되는 변수, 상수, 함수 선언부들이 저장되는 객체이다.

즉, 변수나 함수를 선언 이전에 호출할 수 있도록 하는 것이다.

 

이로인해 '코드의 위쪽으로 변수와 함수들이 끌어올려진다!' 라고 이야기하는 것이다.

 

Lexical Environment의 구조는 식별자와 값의 형태로 이루어진다.

// 이해를 돕기위한 예시
lexicalEnvironment = {
  Identifier : value,
  Identifier : <Function>,
  ...
}

 

따라서 우리가 코드를 실행시킨다면

say();

function say(){
  console.log('Hello');
}

위와 같이 선언부가 호출부보다 먼저 위치해 있더라도

lexicalEnvironment = {
  say : <Function>,
}

Lexical Environment에 저장이 되고

코드 실행 시 say()라는 호출부를 읽었을 때 이를 참조하여 함수를 실행시킨다.

 

---

( 4 ) var의 호이스팅

var은 위에서 살펴보았듯이 다른 선언방식과 다르다.

Scope의 개념도 모호하고, 호이스팅을 통해 에러를 반환하지 않는다.

 

이러한 특징의 원인은 바로 Lexical Environment에 저장이 되는 방식이 달라서이다.

 

정답부터 말하자면 var로 선언된 대상은 그 즉시 undefined로 초기화가 된다.

이에 대해 자세히 알아보기 위해 한 가지 개념에 대해서 더 알아보자.

 

---

( 5 ) Temporal Dead Zone; TDZ

TDZ는 코드의 변수, 함수들이 선언이 되어 Lexical Environment에 저장된 후 초기화가 되기 전까지의 죽은 존을 말한다.

즉, 선언과 초기화 사이의 일시적으로 죽은 상태를 의미한다.

 

포인트는 선언과 초기화 사이인데 위에서 말했듯 var은 선언 즉시 undefined로 초기화가 진행된다.

하지만 다른 선언들은 모두 uninitialized 로 초기화된다.

 

예시)

console.log(a);
var a = 1;


console.log(b);
let b = 2;

 

lexicalEnvironment{
  a : undefined,
  b : <uninitialized>,
}

이러한 형태이다.

 

undefined는 실질적인 값으로 인식하지만

uninitialized는 그렇지 않기 때문에 오류를 반환하는 것이다.

 

 

---

2. 표현식들은 호이스팅이 안된다!

선언을 곧바로 하지않고 변수에 저장하는 형태를 가지는 함수 표현식이나 클래스 표현식은 호이스팅이 이루어지지 않는다.

var과 관계없이 불가하다.

 

예시)

a();

var a = function(){
  console.log('Hello');
}

>>> Uncaught TypeError: a is not a function

위와 같이 함수표현식에서 호출을 먼저할 경우 TypeError를 반환한다.

 

이를 통해 알 수있는 것은 var 이라는 변수로 호이스팅이 되었지만

a()라는 코드를 통해 함수호출을 요청하였기 때문에 TypeError를 반환한다.

 

클래스 표현식도 동일한 이유로 호이스팅이 되지 않는다.

 

 

 

 

---

최종 정리

모든 식별자들(변수, 함수 클래스)은 호이스팅이 발생한다!

 

하지만

var은 undefined라는 값으로 즉시 초기화가 되어 에러를 반환하지 않고,

 

나머지 let, const 등은 uninitialized라는 값이 아닌 것으로 초기화 되어

TDZ에 빠지고 ReferenceError를 반환한다.

 

또한 함수표현식, 클래스 표현식은 호이스팅이 발생하지 않는다!

 

 

 

출처

https://blinders.tistory.com/90

https://dkje.github.io/2020/08/30/ExecutionContext/

https://meetup.nhncloud.com/posts/129

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting