호이스팅

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


1. 함수 호이스팅

 

// 호이스팅
// 함수 호이스팅
print();
function print() {
  console.log("hello world");
}

 

작성된 코드를 실행시켜보면, print 함수를 호출하면 함수가 아직 선언되지 않았지만 함수가 오류 없이 정상적으로 작동.
해당 코드가 정상적으로 작동하는 이유는, 자바스크립트 엔진이 코드를 해석하는 과정에서 이렇게 print 호출문 보다 선언문이 먼저 작성되어있는 코드로 받아들였기 때문.

 

// 자바스크립트 엔진이 코드 해석시
function print() {
  console.log("hello world");
}
print();

 

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


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

 

// 변수 호이스팅
console.log(num); // undefined
var num = 10;

 

변수 num이 선언되기 전에 console.log 함수로 num의 값을 출력하려했지만 실행 결과 ERROR 가 아닌 undefined 가 출력된다.
그 이유는 자바스크립트 엔진이, 이러한 코드를 아래 코드처럼 해석했기 때문이다.

 

// 자바스크립트 엔진이 코드 해석시
var num; // 변수 호이스팅은 선언문만 올라감
console.log(num); // undefined
num = 10;

 

var num = 10; 코드가 전부 해당 스코프의 맨 위로 올라가지 않고, var num; 이라는 num변수의 선언문만 위쪽으로 올라간 것을 볼 수 있다.
num = 10; 처럼 이렇게 변수에 값을 할당하는 것을 변수를 초기화 한다 라고 하기도 하는데, 변수 호이스팅은 변수의 초기화문이 아닌 변수의 선언문만 해당 스코프의 최상단으로 올려 해석하는 방식이다.
따라서, 맨 윗 줄에서는 num의 값에 undefined이 할당되어 코드 실행 결과 undefined가 출력되게 되는 것이다.

 

// let과 const 변수 선언
console.log(num1); // error
let num1 = 10;

console.log(num2); // error
const num2 = 15;

 

이렇게 let과 const로 동일한 코드를 작성한 다음 코드를 실행시켜보면 전부 undefined 이라는 값이 출력되는데, 코드샌드박스가 어떠한 보정을 하고 있는지 더 정확한 확인을 위해 브라우저 콘솔에 코드를 작성 한다.

 

크롬 콘솔 출력

 

작성된 코드를 복사하고 브라우저의 개발자 도구 콘솔탭에 코드를 붙여넣어 실행하면, var로 선언한 변수는 undefined가 출력되지만 let과 const는 undefined가 출력되지 않고 에러가 발생하는 것을 볼 수 있다.

let과 const로 선언된 변수는 왜 선언전에 접근하려하면 에러가 발생하는지를 이해하기 위해서는, 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

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