호이스팅이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것이다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언한다.

유효범위: 함수 블록 { } 안에서 유효

즉 함수 내에서 아래 쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
하지만 실제로 코드가 끌어올려지는 것은 아니고, 자바스크립트 parser가 내부적으로 끌어올려서 처리하는 것으로 실제로 메모리에는 변화가 없다.

호이스팅의 대상

호이스팅은 var변수 선언과 함수 선언문에서만 일어난다.

변수의 호이스팅

var

• 선언 + 초기화 $\Rightarrow$ 할당
• 함수 레벨 스코프로 함수 외부 선언 시 전역변수가 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined 이다.
• 호이스팅 발생!

var는 선언과 초기화가 이뤄진 후 할당이 일어난다.
이때 선언만 위로 끌어올려지며, 할당은 끌어올려지지 않는다.
따라서 할당이 일어나기 전에 변수를 참조하면 항상 undefined가 된다.

let/const

• 선언 $\Rightarrow$ TDZ $\Rightarrow$ 초기화(변수가 메모리에 할당되며 undefined로 초기화되는 과정) $\Rightarrow$ 할당
• 선언만 호이스팅되고, 접근하려하면 초기화가 되기 전이므로 TDZ에 의해 에러가 발생한다.

런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행된다. 이후 초기화 단계가 실행되지 않았을 때 접근 시 참조에러가 발생한다. (TDZ)

일시적 사각지대( TDZ: Temporal Dead Zone ): 스코프의 시작지점(선언단계)부터 초기화 단계 시작 지점까지 일시적으로 참조할 수 없다.

let

변수 중복 선언이 불가능하다. (재할당은 가능)
선언 단계와 초기화 단계가 분리되어 진행된다.

const

변수 중복 선언이 불가능하며 반드시 선언과 초기화를 동시에 진행해야 한다. $\Rightarrow$ 런타임 이전에는 실행될 수 없다.
재선언, 재할당 x (재할당의 경우 객체로는 가능) $\Rightarrow$ 재할당을 금지할 뿐 불변은 x

결론

호이스팅이 발생하긴 하지만 스코프에 진입할 때 변수가 만들어지고 TDZ가 생성되어 코드 실행이 변수가 실제 있는 위치에 도착할때까지 접근을 할 수 없다.

함수의 호이스팅

함수 선언 방법

1. 함수선언문: 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어 함수 자체가 호이스팅이 가능하다.

  function foo() { // 함수선언문(호이스팅 o)
      console.log("hello");
  }

2. 함수표현식: 런타임 이전에 해당 값을 undefined로 초기화하여 호이스팅이 불가능하다.

 var foo2 = function() { // 함수표현식(호이스팅 x)
      console.log("hello2");
  }

3. Function 생성자 함수: 런타임에서 할당되어 그 때 객체가 된다. 함수를 생성할 때 구문 분석을 수행한다. (클로저를 생성하지 않음, 항상 전역범위에서 생성, 자신의 지역변수와 전역 변수에만 접근할 수 있음) 호이스팅 불가능

var foo3 = new Function(console.log("hello"));

4. 화살표 함수 : 호이스팅이 불가능

var foo4 = () => console.log("bar");

호이스팅을 왜 알아야할까?

ES6를 어디서든 쓸 수 있으려면 아직 시간이 필요하므로 ES5로 트랜스 컴파일을 해야한다. $\Rightarrow$ 아직은 var가 어떻게 동작하는지 알아야한다.