[Javascript] 호이스팅에 대해 설명해주세요.

호이스팅이란?

호이스팅이란 변수와 함수의 선언문이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말합니다. 이 현상으로 인해 변수와 함수가 초기화되기 전에 접근하는 것이 가능해집니다.

 

다만, ES6에 등장한 let과 const는 호이스팅은 되지만, 초기화 전에 접근하는 것은 불가능합니다. 이는 개발자가 초기화 전에 변수에 접근하는 것을 방지하기 하여 코드의 예측 가능성을 높이기 위해 TDZ라는 개념을 도입했기 때문입니다.

 

var, let, const의 호이스팅

var, let, const 모두 자바스크립트에서 변수를 선언하는 키워드입니다. 세 키워드 모두 해당 스코프의 최상단으로 호이스팅 되지만, 호이스팅 되지만 초기화 시점이 다릅니다.

 

var 변수는 호이스팅 되면 자바스크립트 엔진에 등록됨과 동시에 `undefined`로 초기화 되기 때문에 선언문에 도달하지 않아도 참조가 가능합니다.

반면, let과 const 변수는 호이스팅 되면 자바스크립트 엔진에 등록되고, 선언문에 도달하기 전까지 TDZ (일시적인 데드존)에 들어가며 선언문에 도달할 때 초기화가 실행됩니다. 변수가 TDZ에 있을 때 참조하면 에러가 발생하게 되기 때문에 개발자는 초기화되지 않은 변수에 접근할 수 없습니다.

 

함수 호이스팅

함수 선언식

함수 선언식으로 작성된 함수는 선언과 초기화가 동시에 호이스팅 됩니다. 따라서 선언문에 도달하지 않은 시점에 함수를 호출해도 정상적으로 함수가 동작합니다.

hi(); // "Hi!"

function hi(){
  console.log("Hi!")
}

함수 표현식

함수 표현식으로 작성된 함수는 변수 호이스팅을 따릅니다.

// var로 선언 시

testFunction(); // TypeError: testFunction is not a function

var testFunction = () => {
  console.log("Hello from test.js");
};

testFunction();

var로 선언한 testFunction은 `undefined`로 초기화되어 있기 때문에 타입 에러가 발생합니다.

// const로 선언 시

testFunction(); // ReferenceError: Cannot access 'testFunction' before initialization

const testFunction = () => {
  console.log("Hello from test.js");
};

const로 선언한 testFunction은 TDZ에 있기 때문에 참조 에러가 발생합니다. (let도 동일합니다!)

참고자료

https://junvelee.tistory.com/134

[Deep Dive] var, let, const의 차이 / hoisting(호이스팅)에 대해

https://ccomccomhan.tistory.com/290

[JS] - 호이스팅이란? 완벽하게 이해하기 (예제코드, var let const 의 차이점, var를 사용하면 위험한

https://www.youtube.com/watch?v=9I1dzg20r1g

https://tmdrnr96.tistory.com/21

[Javascript] 변수 선언, 초기화, 할당, 호이스팅, 스코프 개념 및 설명

 

 

잘못된 부분이 있으면 댓글로 알려주시면 감사하겠습니다! 😀