호이스팅(Hoisting)이란 무엇일까?

🚀 호이스팅(Hoisting)

호이~ 호이 둘리는 초능력 내친구🤦🏻‍♂️

javascript에서 호이스팅(Hositing)은 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 만한다.

---

🔗 예제

console.log(a)
var a = 10

 

개발자가 코드를 이렇게 작성을 할 경후 자바스크립트의 Parser에 의해서 호이스팅이 자동적으로 일어난다. 개발자가 작성한 코드는 위와 같지만, 컴퓨터가 인식할 때는 아래와 같다.

 

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

 

변수 선언 뿐만 아니라 함수 선언 시에도 똑같다. 

println();
println2();

//함수 선언문
funtion println(){
	console.log("Hello World~ This function is println !");
}

//함수 표현식
var println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

 

 

var println2;

funtion println(){
	console.log("Hello World~ This function is println !");
}

println();
println2(); // undefined


println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다. 이 둘의 차이점은 나중에 알아보자.

하지만 javascript가 es6로 들어오면서 let, const가 생겼고 호이스팅에도 약간의 변화가 생겼다.

 

호이스팅의 동작을 간단하게 요약하자면 2단계로 볼 수 있다.

1. 변수명만 위로 끌어올린다.
2. undefined를 할당한다.

 

맨위의 예제의 var를 const으로 바꾼다면 어떨까?

console.log(a);
const a = 20;

<var와 const의 차이>

 

위에서도 말 한것과 같이 var에서는 두 단계의 동작을 실행했다. 하지만 const 는 다른 결과를 보여주고 있다.

const는 var에서 동작하는 2 단계 중 첫 번째 단계만 실행한다. 단지 변수명만 위로 끌어 올리고 undefined를 할 당하지 않기 때문에 위와 같은 에러가 발생하는 것이다. 즉 호이스팅은 하나 TDZ에 걸리게 되는 것이다.

---

📢

게시글은 개인 공부 목적으로 작성되었습니다. 

게시글의 대한 피드백은 언제나 환영하고 감사할 따름입니다.