호이스팅 /Edited by.혜경

호이스팅이란?

호이스팅은 변수나 함수 선언을 코드 상단으로 끌어올리는 동작을 말한다.

case 1. 변수 호이스팅

Var vs Let & Const

Var

• var는 선언과 초기화가 동시에 일어나면서(선언과 초기화가 분리되지 못하기 때문) 호이스팅이 발생한다.
• 함수에 쓰인 것 말고도 for + if문에 쓰인 것도 올라간다.
• var a 로 선언할 때 undefind로 기본값이 초기화 된다.

console.log(호이스팅); // undefind
console.log(i); // undefind
var 호이스팅 = '호이스팅'
console.log(호이스팅); // 호이스팅

for (var i = 0; i < 10; i++) {...}

let & const

• 선언에는 호이스팅이 발생하지만 초기화는 호이스팅이 되지 않는다.
• 변수는 선언된 위치에서 초기화하기 전까지 TDZ 안에 들어간다.
• → 그래서 선언하기 전에 변수를 사용할 수 없다.

📎 TDZ(Temporal Dead Zone)란? 일시적인 사각지대라는 뜻 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.

 

console.log(호이스팅); // error
let 호이스팅 = '호이스팅 되겠냐고~'
console.log(호이스팅); // 호이스팅 되겠냐고~

---

case 2. 함수 호이스팅

함수선언식 vs 함수표현식

1. 매개변수와 변수는 선언부를 호이스팅 함
2. 함수 선언은 전체를 호이스팅 함

함수선언식

• 선언문에서 발생한다.
• 선언된 함수는 상단에서 참조, 호출이 가능하다.

함수선언식 (); // 호이스팅 된다~
function 함수선언식 (){
	console.log('호이스팅 된다~');
}

함수표현식

• 변수에 함수를 할당함으로 변수 호이스팅의 사례로 볼 수 있다.
• 협업을 많이 하고 복잡한 코드, 전역 공간에서 이루어지는 코드 협업 협업은 함수 표현식을 활용하는 습관을 들이는 것이 좋다.

함수표현식 (); // error
let 함수표현식 = function(){
	console.log('호이스팅 안된다~');
}
함수표현식 (); // 호이스팅 안된다~

---

⚠️ var 와 함수선언식은 선언되기 전에 변수를 사용하거나 함수를 호출할 수 있어 예기치 않은 문제가 발생하거나 디버깅이 어려워질 수도 있다.