[JS] 변수와 함수의 호이스팅(Hoisting)

호이스팅(Hoisting)

Javascript는 코드를 실행하기 전 먼저 선언된 변수, 함수를 전역 환경에 담고 그 이후에 정리된 코드를 실행한다. 

호이스팅은 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 말한다. (실제로 끌어올려지는 것은 아니다)

자바스크립트의 모든 선언에는 호이스팅이 일어난다. 

 

변수의 선언 단계

변수는 선언 단계, 초기화 단계, 할당 단계를 거치게 된다

1. 선언단계(Declaration phase)

: 선언한 변수를 식별자(변수명)가 담기는 객체에 할당하는 단계

: 초기화 전까지는 TDZ 상태이다.

 

2. 초기화 단계(Initialization phase)

: 변수에 할당할 메모리 공간을 부여하는 단계

: 해당 단계에서 변수는 undefined로 초기화 된다

 

3. 할당 단계(Assignment phase)

: 정의된 변수에 데이터가 할당되는 단계

: undefined로 초기화된 변수에 실제 값 할당

 

---

let, const 키워드는 마치 호이스팅이 발생하지 않는 것처럼 동작한다. 이는 TDZ(Temporal Dead Zone)*와 연관이 있다.

let과 const는 선언 단계와 초기화 단계가 분리되어 실행된다. 초기화 단계를 거치기 전 변수를 참조하려 시도하면 Reference Error를 발생시킨다.

 

TDZ(Temporal Dead Zone)란?

스코프의 시작 지점부터 초기화 시작 지점까지의 구간 (일시적 사각지대)

console.log(name);
let name = '송송'; // Reference Error

 

var와 함수 선언식은 TDZ의 영향을 받지 않고 호이스팅의 영향을 받는다.(선언단계와 초기화 단계가 함께 이루어진다) 심지어 함수 선언식의 경우, undefined가 할당되는 것도 아닌 함수 그자체가 끌어올려진 것처럼 동작하게 된다.

console.log(name);
var name = '숑숑'; // undefined

foo1(); // Hello

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

 

참고

본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다

https://hanamon.kr/javascript