[JS] 호이스팅 (Hoisting)

호이스팅이란?

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

• 실행 컨텍스트가 생성될 때 변수객체가 생성이 된다.
• 변수 객체는 밤수가 실행되는데 사용되는 변수들을 찾는 위치이고 없을 경우 스코프체인을 따라 올라간다.
• 호이스팅은 변수 객체를 생성할 때, 함수에 선언들을 끌어올려 변수객체에 담는 과정이다.

동작

1. 자바스크립트 paser가 함수 실행 전 해당 함수를 한번 훑는다.
2. 함수 안에 전재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행.

실제 코드가 끌어올려지는 건 아니며, 자바스크립트 parser` 내부적으로 끌어올려서 처리하는 것
(실제 메모리에서는 변화가 없다.)

호이스팅 발생 원인

• 코드가 실행될 때 실행 컨텍스트를 생성하게 된다. 실행 컨텍스트는 해당 함수가 실행되기 위한 환경을 구축하는 것이다.
  그 중에서 함수의 실행에 선언 된 것을 찾기 위한 객체가 변수 객체인데 이를 셋팅하기 위해 발생한다.
• 호이스팅은 선언에만 발생하기 때문에 함수 선언식에서는 발생하지만, 표현식에서는 발생하지 않는다.
  함수도 객체이며 이를 변수에 담는 것도 할당에 해당하기 때문이다.

var, let, const

• 대게 var는 호이스팅이 발생하고 let, const는 호이스팅이 발생하지 않는 것으로 알고 있다.
• let, const 같은 경우도 호이스팅이 발생한다. 다만, 차이점은 var같은 경우 선언과 동시에 undefined가 할당되어 초기화가 발생하기 때문에 에러없이 접근이 가능하다.

• let, const 는 어휘적 바인딩이 실행되기 전까지 접근할 수 없는 TDZ 현상이 발생한다.
• 어휘적 바인딩에 의해 초기화되며 정의된 변수는 변수가 만들어질 때가 아닌, 해당 초기화 구문 어휘적 바인딩이 실행될 때 값을 할당한다.
• 어휘적 바인딩에 초기화 구문이 없으면 undefined가 할당된다.

TDZ 란?

선언전에 변수에 접근하는 것을 금지하는 규칙이다.

영향받는 것

• const
• let
• class
• parameter : function (a = b , b) { ... }
  • b가 할당되기 전에 a를 할당하려하여 TDZ 위반
• constructor() 내부의 super()
  • 부모 클래스를 상속받았다면, 생성자 안에서 super() 호출하기 전까지 this 바이딩이은 TDZ에 있다.