[JS] - 호이스팅 (Hoisting)

Hoisting ?

📝 자바스크립트의 인터프리터가 선언된 변수, 함수, 클래스의 선언부를 스코프 (scope)에 따라 최상단으로 끌어올려지는 것처럼 보이는 개념

인터프리터가 코드를 해석할 때 변수 및 함수의 선언 처리, 실제 코드 실행의 두 단계 (선언, 초기화) 로 나눠서 처리하기 때문에 발생하는 현상이다.

📌 선언과 할당 모두 끌어올리지 않는다. 선언부만 끌어올리고 할당은 이루어지지 않는다
📌 호이스팅은 실제 메모리에 영향을 주지 않는다

인터프리터 (interpreter) : 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
컴파일러 (compiler) : 인터프리터와 반대되는 개념, 원시 코드를 기계어로 번역

호이스팅 적용 대상

1️⃣ var 로 선언한 변수

• var 는 선언과 동시에 undefined 로 초기화 된다.
  👉🏻 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않고 undefined 를 반환한다. 이후 변수 할당문에 도달하면 값이 할당된다.

console.log(text);
// output = undefined

👉🏻 선언 + 초기화 된 상태이기 때문에 Undefined 반환

text = 'hi!'
var text;
//output = 'hi!'

👉🏻 선언 + 초기화 + 할당 된 상태

2️⃣ let, const 로 선언한 변수

• let 과 const 는 var 와는 달리 선언 단계와 초기화 단계가 따로 이루어진다.
  👉🏻 초기화 되지 않고 선언만 메모리에 저장. 초기화되지 않아 변수를 참조할 수 없어 ReferenceError 를 반환한다

• 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 일시적 사각지대(Temporal Dead Zone; TDZ) 이라고 한다.

👉🏻 let 과 const 는 이러한 TDZ 에 빠져 에러를 발생시킨다.

📌 let

console.log(text);
let text;
//output = ReferenceError

👉🏻 선언만 되고 초기화 되지 않았기 때문에 변수를 참조하지 못해서 참조 에러

📌 const

const text;
//error

👉🏻 const 는 선언과 동시에 할당해야 하기 때문에 error

3️⃣ 함수 선언식으로 선언한 함수

test();
function test(){
	console.log("hi")
}
//output = 'hi`

👉🏻 코드 실행 전 함수선언이 메모리에 저장되어 있기 때문에 호이스팅이 일어난다

📝 함수 표현식은 호이스팅이 일어나지 않는다

📌 요약

자바스크립트 엔진은 코드를 실행하기 전, 실행 가능한 코드를 형상화하고 구분하는 과정(⇒ 실행 컨텍스트 형성)을 거친다.
이 과정에서 모든 선언(var, let, const, function, class)이 변수 객체 메모리에 저장된다.
코드 실행 전 이미 변수, 함수에 대한 선언이 저장되어 있기 때문에, 선언문보다 참조 및 호출이 먼저 나와도 동작할 수 있게 된다.
이는 선언 구문이 마치 파일의 최상단으로 끌어올려진 것처럼(호이스팅 된 것처럼) 보인다