자바스크립트 - 호이스팅

호이스팅

• 호이스팅이란, 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려서 사용하는 것처럼 보이게하는 자바스크립트의 작동 방식을 의미합니다. 자바스크립트에는 변수 호이스팅과 함수 호이스팅이 있습니다. 

 

함수 호이스팅

• 아래의 코드를 보면 print함수를 호출하면 함수가 아직 선언되지 않았지만, 오른쪽 콘솔탭에 "hello world"가 출력되었고, 함수가 오류 없이 정
• 상적으로 작동하는 것을 확인할 수 있습니다. 해당 코드가 정상적으로 작동하는 이유는 자바스크립트 엔진이 코드를 해석하는 과정에서 이렇게 print 호출문 보다 선언문이 먼저 작성되어있는 코드로 받아들였기 때문입니다. 

 

아래의 코드처럼 pirnt 함수의 선언문을, print 함수가 갖는 스코프, 유효범위의 가장 위쪽으로 끌어올려서 코드를 해석하는 자바스크립트 작동 방식을 함수 호이스팅 이라고 부릅니다.

function print() {
    console.log("hello world");
}

print();

 

 

변수 호이스팅

• 자바스크립트 변수 선언 키워드 중 var를 이용해 변수를 선언하고, 변수의 선언문 위쪽에 해당변수를 출력하는 코드를 작성해보겠습니다.

console.log(num); // undefined

var num = 10;

변수 num이 선언되기 전에 console함수로 출력하려했지만, error가 아닌 undefined가 출력됩니다.

 

그 이유는 자바스크립트 엔진이, 이러한 코드를 이렇게 해석했기 때문입니다.

var num;
console.log(num); // undefined
num = 10;

이렇게 var num = 10; 코드가 전부 해당 스코프의 맨 위로 올라가지 않고, var num; 이라는 num 변수의 선언문만 위쪽으로 올라간 것을 볼 수 있습니다. 

num=10;처럼 이렇게 변수의 값을 할당하는 것을 변수를 초기화 한다라고 하기도 하는데, 변수호이스팅은 변수의 초기화문이 아닌, 변수의 선언문만 해당 스코프의 최상단으로 올려 해석하는 방식입니다. 

 

console.log(num1); // error

let num1 = 10;

console.log(num2); // error

const num2 = 15;

var로 선언한 변수는 undefined가 출력되지만 let과 const는 error가 출력됩니다. 

에러가 발생하는지를 이해하기 위해서는, TDZ라는 것에 대해 알고있어야합니다.

 

TDZ는 Temporal Dead Zone의 약자로, 일시적인 사각지대, 즉 변수를 사용하는 것을 허용하지 않는 공간이라고 할 수 있습니다. 

let과 const는 호이스팅이 발생하지 않는 것이 아니라, var와는 다르게 변수 스코프의 맨 위에서 변수의 초기화가 완료될 때 까지, TDZ라는 공간에 있기 때문에 호이스팅이 발생하지 않는 것 처럼 보이는 것입니다. 

 

var와 다르게 let과 const가 변수가 초기화 될때까지 TDZ에 머물러있는 이유는, var는 변수를 생성한 다음 바로 메모리에 변수의 공간을 미리 할당해주지만,

let과 const는 그렇지 않기 때문에, 변수가 초기화 될 때까지 메모리 공간이 확보되지 않은 상태가 되어 해당 키워드로 생성된 변수들은 변수를 사용할 수 없는 공간인 TDZ에 들어가게 되는 것입니다. 

 

 

정리

• 호이스팅은 자바스크립트의 기본성질이지만, const와 let외에도 TDZ에 머물러있는 몇 가지 구문들이 있기 때문에, 왠만하면 변수와 함수의 선언문 이후 변수와 함수에 접근하는 코드를 작성하는 것이 좋습니다. 
• 또한 호이스팅이 많이 발생하게 작성된 코드는 가독성이 좋지 않아 코드의 이해도가 떨어지고, 오류를 발생시킬 수 있습니다.

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의