[JavaScript] Hoisting이란?

Hoisting이란?

• 자바스크립트에서 호이스팅이란, 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상을 말함. 이는 자바스크립트 엔진이 코드 실행 전 선언들을 메모리에 할당하는 방식 때문에 발생함. 호이스팅은 변수의 선언 부분만 끌어올려지며 할당은 그대로 남아있게 됨. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음.

• 호이스팅의 대상

  • var 변수 선언과 함수 선언문에서 주로 발생함.
  • 자바스크립트 엔진이 코드를 처리하는 방식 때문에 호이스팅은 주로 var 변수 선언과 함수 선언문에서 발생함. 그 이유는 변수 선언과 함수 선언문이 컴파일 단계에서 처리되기 때문.
    • var 변수부터 알아보자. 선언 부분만 끌어올려지고 할당은 그대로 남아있음. 따라서 변수에 값을 할당하기 전에 변수 사용 시 ‘undefined’가 출력됨.

      console.log(a); // Output: undefined
      var a = 10;
      
      // 위 코드는 다음과 같이 호이스팅이 적용됨.
      var a; // 선언
      console.log(a);
      a = 10; // 할당

    • 함수 호이스팅의 경우, 함수 선언 전체가 끌어올려지므로 함수 선언 전에 함수를 호출할 수 있음.

      hello(); // Output: Hello, world!
      
      function hello() {
      	console.log("Hello, world!");
      }

  • 자바스크립트 실행 전 코드는 두 단계를 거친다.
    1. 컴파일 단계에서 자바스크립트 엔진이 코드를 스캔하여 변수와 함수 선언을 찾고, 메모리에 할당함. 이 과정에서 var 변수 선언과 함수 선언문이 메모리에 할당되며, 이 때 호이스팅 발생함.
    2. 실행 단계에서 자바스크립트 엔진이 코드를 실행하며 실제 값들이 할당되고 연산이 수행됨. 변수 선언과 함수 선언문이 이미 메모리에 할당되었기 때문에, 호이스팅이 발생한 구역에서 선언된 변수와 함수에 접근이 가능하게 됨.

---

그렇다면 let, const로 선언된 변수와 함수 표현식은 호이스팅이 되지 않는지?

• let, const로 선언된 변수 또한 호이스팅이 일어남. 그러나 이들의 호이스팅은 블록 스코프를 가지며 프로그램 동작에 미치는 영향이 상대적으로 작을 뿐. ‘Temporal Dead Zone’ (TDZ)로 인해 변수 초기화 전 접근하려 하면 ReferenceError가 발생함.

  console.log(a); // Output: ReferenceError: Cannot access 'a' before initialization
  
  let a = 10;

• 함수 표현식의 경우 함수가 변수에 할당되는 과정으로 실행 단계에 처리 됨. 변수 선언은 호이스팅되지만, 함수 객체의 할당은 호이스팅되지 않음.
• 만약 함수 표현식에 var를 사용할 경우, 변수 선언만 호이스팅되며 함수가 할당되지 않음.

  hello(); // Output: TypeError: hello is not a function
  
  var hello = function() {
    console.log("Hello, world!");
  }

• let, const를 표현식에 사용할 경우엔 ReferenceError 발생.

  hello(); // Output: ReferenceError: Cannot access 'hello' before initialization
  
  const hello = function () {
    console.log('Hello, world!');
  };

---

정리

• 자바스크립트에서 호이스팅은 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상으로, 자바스크립트 엔진이 실행 전 선언들을 메모리에 할당하며 발생함.
• 호이스팅은 주로 var 변수 선언과 함수 선언문에서 발생함. var로 선언한 변수는 값을 할당하기 전에 사용 시 undefined 출력, 함수 호이스팅의 경우 선언 전 함수를 호출할 수 있음.
• 반면 let, const 변수 선언 또한 호이스팅이 발생하지만, TDZ로 인해 초기화 전 접근하려 하면 ReferenceError 발생.
• 함수 표현식
  • var 사용 시: 변수 선언만 호이스팅되고 함수 객체의 할당은 호이스팅되지 않음. TypeError 발생.
  • let, const 사용 시: ReferenceError 발생.
  • 화살표 함수도 호이스팅되지 않음.

---

Reference

• https://developer.mozilla.org/ko/docs/Glossary/Hoisting