[Javascript 개념] 5. 호이스팅

호이스팅

변수와 함수 선언이 해당 범위의 맨 위로 끌어올려지는 듯한 현상

 

1. 함수 호이스팅

함수 유효범위의 가장 위쪽으로 끌어올려서 코드를 해석하는 작동 방식

 

예시

connectString('study','hoisting')//study hoisting

function connectString(str1, str2){
	console.log(str1 + str2)
}

 

---

2. 변수 호이스팅

2 - 1. var

var num2;
console.log(num2); //undefined
num2 = 123;

🚨var의 경우 값이 할당 되기 전 num을 출력했음으로 undefined가 출력된다. => 호이스팅이 발생한다

 

2-2. let, const

console.log(num1);//Cannot access 'num1' before initialization
console.log(num2);//Cannot access 'num2' before initialization
let num1 = 123;
const num2 = 456;

🚨 변수 초기화 되기 전에 변수에 접근할 수 없다는 에러메세지가 뜬다. => 호이스팅이 발생하지 않는 것 처럼 보인다

 

🔎 차이가 발생하는 이유

var	let, const
변수가 생성된 이후 메모리에 변수 공간 할당	변수가 초기화 될 때까지 TDZ라는 공간에 머물러 있음

 

🚨TDZ? Temporal Dead Zone의 약자로, 일시적인 사각지대이다.

이 공간은 메모리가 할당되지 않기 때문에 사용할 수 없는 공간인 TDZ에 있는 변수는 호이스팅 되지 않는다.