[JS] 호이스팅(Hoisting) 이란?

 

# 호이스팅 이란?

 

• 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
• 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
• 소스코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
• 자바스크립트 엔진은 선언들이 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
• 쉽게 말해 자바스크립트 엔진이 코드를 실행하기 전 선언문을 끌어올리는 것을 말한다. 정확히 말하자면 선두도 끌어 올려진 것 처럼 동작한다.
• 모든 식별자(변수,함수, 클래스 등)은 호이스팅 된다.

 

---

# 변수 호이스팅

 

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

1. 선언단계 (Declaration phase)

☞ 변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

 

2.초기화 단계(Initialization phase)

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

 

3.할당 단계(Assignment phase)

☞ undefined로 초기화된 변수에 실제 값을 할당한다.

 

 var 

 

console.log(foo); // undefined
var foo; // 변수선언, 초기화가 동시에 일어남

 

• var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
• 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)한다.
• 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다.
• 이후 변수 할당문에 도달하면 비로소 값이 할당된다.

 

 let 

 

let foo = 1; // 전역 변수

{
  console.log(foo); // ReferenceError: foo is not defined
  let foo = 2; // 지역 변수
}

 

• let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
• 즉, 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어진다.
• 초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생한다. 이는 변수가 아직 초기화되지 않았기 때문이다.
• 다시 말하면 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다.
• 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다.
• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

 

 const 

 

const foo = 1;

const foo; // SyntaxError: Missing initializer in const declaration

 

• const 키워드는 선언, 초기화, 할당 단계가 한번에 이루어 진다.

 

---

# 함수 호이스팅

 

// 함수 표현식
let dog = function () {
    return '놀자!';
}; 

// 함수 선언식
function play() {
    return '그래 놀자!';
};

 

• 함수도 호이스팅이 일어난다.
• 하지만 함수선언식과 함수표현식은 다르게 동작한다.
• 함수 선언식은 호이스팅 되지만 함수 표현식은 호이스팅 되지않는다.
• 함수 표현식은 변수에 초기화를 시킨 다음에 호출이 가능하다.
• 화살표 함수도 호이스팅 되지 않는다.

 

 

 

📌 참고

모던자바스크립트 deep dive

poiemaweb | let,const