[JavaScript] Hoisting은 뭐지?

Hoist

- 들어올리다.

호이스트(Hist)는 건축/건설에서 사물을 끌어올릴 때 쓰이는 도구를 부르는 말이기도 하다.

 

javascript에서의 호이스팅은 선언된 모든 변수와 함수들을 그 스코프 안에서 최상단으로 끌어올리는 것을 의미한다.

간단한 예를 들어서 보여주는게 이해하기 가장 쉬울 것 같다.

---

var a = 2;
consol.log(a);

결과 : 2

consol.log(a);
var a = 2;

결과 : undefined

 

위처럼 변수선언은 최상단으로 올리기 때문에 a가 아래에서 선언이 되었어도 위콘솔에서는 undefined를 가지게 된다.

---

'함수 선언식'

함수 또한 통째로 위로 호이스팅을 시키기 때문에 아래에서 선언을 해도 위로 끌어올리게 된다.

a();

function a() {
  console.log('실행됨');
}

결과 : 실행됨

---

'함수 표현식'에서는 변수선언만 위로 끌어올리기 때문에 에러가 발생한다.

a();

var a = function() {
  console.log('실행안됨');
}

결과 : Error

 

---

추가1.

 

호이스팅은 코드 해석을 좀 더 수월하게 하기 위해 실행 컨텍스트에 있는 environmentRecord의 수집과정을 추상화한 개념입니다.

여기서 '함수 선언식'과 '함수 표현식'을 쉽게 구분해서 설명하자면

함수 선언과 값 할당이 동시에 이뤄진 문장인 '함수 선언식'은 한번에 같이 위로 올라가지만,

'함수 표현식'은 함수 먼저 선언을 하기 때문에 선언부만 위로 올라가서 할당 과정은 그 자리에 남아있게 된다.

 

이걸 공부하게 된다면 '실행 컨텍스트'에 대해 조금 더 자세히 공부하는 게 좋을 것 같다.