[JavaScript] 호이스팅

호이스팅은 변수, 함수 및 다른 선언들이 코드 실행 전에 끌어올려지는 자바스크립트의 동작 방식이다. 

이 과정에서 선언만 위로 끌어올려지고, 할당은 그대로 유지된다.

 

 

1. 변수 호이스팅

# 작성된 코드

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

 

# 실제 동작하는 코드

var a;           // 호이스팅을 통해 선언이 위로 올라감
console.log(a);  // a는 undefined로 처리
a = 10;

 

var로 선언된 변수의 경우, 호이스팅을 통해 위로 올라가면 자동으로 undefined로 할당되지만, let과 const로 선언되는 변수의 경우 TDZ(Temporal Dead Zone)으로 호이스팅 된다. 

TDZ로 호이스팅 된 경우, 초기화 전에 접근하면 ReferrenceError가 발생한다. 

// let 예시
console.log(y);  // ReferenceError: y is not defined
let y = 5; 

// const 예시
console.log(z);  // ReferenceError: z is not defined
const z = 5;

 

2. 함수 호이스팅

변수 호이스팅과 유사, 선언과 정의가 함께 끌어올려지기 때문에 함수 선언 전에 호출해도 문제가 없다. 

 

# 작성된 코드

console.log(greet());

function greet(){
	return "Hello";
}

 

# 실제 동작하는 코드

function greet(){
	return "Hello";
}

console.log(greet());

 

만약 변수에 함수를 할당하는 방식으로 선언한다면, 변수처럼 선언은 끌어올려지나, 정의가 끌어올려지지 않아서 TypeError가 발생할 수 있다. 

(가급적이면 변수에 함수를 할당하는 것 자체를 지양하는 것이 나을 것 같다...)

greet();  // ReferenceError

const greet = function(){
	console.log("안녕");
};