호이스팅(hoisting)

호이스팅을 직역하면 '끌어 올리기'를 의미한다.

자바스크립트 생태계에서 말하는 호이스팅이란 변수 혹은 함수를 선언하기 전에 메모리 공간에 미리 할당하여 해당 변수 혹은 함수를 사용할 수 있게끔 해주는 것을 의미한다.

그럼 코드로 알아보자!

 

Hi();

function Hi(){
  console.log('안녕하세요:)')
};

 

위처럼 함수를 선언하는 코드보다 함수를 실행하는 코드가 위에 있어도 정상적으로 함수가 에러 없이 실행된다는 것이다.

이것은 호이스팅의 원리로 인해 함수를 선언하는 코드가 함수 실행 코드가 실행되기 전에 미리 메모리에 할당되었기 때문에 가능한 것이다.

 

하지만 다음과 같은 코드는 어떨까?

 

Hi2();

var Hi2 = function(){
  console.log('안녕하세요')
}

 

결과는 다음과 같다.

 

Uncaught TypeError: Hi2 is not a function

 

실제 실행과정을 보면 사실 Hi2로 선언된 변수는 호이스팅이 이루어지며 여기서 undefined로 초기화된다.

undefind는 호출할 수 없기 때문에 TypeError가 발생한 것이다.

 

한편 다음과 같이 var가 아닌 const나 let으로 함수를 선언해도 에러가 뜨지만 에러명이 다르다.

 

Hi3();

const 혹은 let Hi3 = function(){
  console.log('안녕하세요')
}

 

실행결과는 다음과 같다.

 

Uncaught ReferenceError: Hi3 is not defined

 

const나 let으로 변수를 선언하였을 경우 미리 메모리에 할당하지 않기 때문에 해당 변수를 초기화할 때 메모리에서 참조하고자 하는 해당 변수명이 없어서  referenceError 에러가 발생하게 되는 것이다.