[JS 문법] JS 호이스팅에 대해서

JS엔진은 식별자들을 '최상단'으로 끌어올려 놓은 다음 코드를 실행한다.

 

Hoisting 호이스팅

:  '끌어올리다' 변수 정보를 수집하는 과정을 뜻한다.

함수 선언문, 함수 표현식 등 함수 작성 방식에 따라 호이스팅이 되는 규칙이 바뀐다.

 

 

함수 선언문은 함수 선언문 전체를 끌어올린다.

선언된 식별자만 끌어올려진다.

위에 끌어올려진 내용 전체를 environmentRecord 라고 부른다.

 

그래서 결과를 보면, a는 정상출력되지만, b에서 아래와 같은 에러가 난다.

 

실행컨텍스트에 대해서 알아보자!

-----------------------------------------------------------
|                       inner                             |
|  -----------------------------------------------------  |
|  |  LexicalEnvironment                                |  |
|  |  environmentRecord                                 |  |
|  |  outerEnvironmentReference ------------------->   |  |
|  -----------------------------------------------------  |
-----------------------------------------------------------
-----------------------------------------------------------
|                       outer                             |
|  -----------------------------------------------------  |
|  |  LexicalEnvironment                                |  |
|  |  environmentRecord                                 |  |
|  |  outerEnvironmentReference ------------------->   |  |
|  -----------------------------------------------------  |
-----------------------------------------------------------
-----------------------------------------------------------
|                       전역                              |
|  -----------------------------------------------------  |
|  |  LexicalEnvironment                                |  |
|  |  environmentRecord                                 |  |
|  -----------------------------------------------------  |
-----------------------------------------------------------

 

 

내부에서 밖을 볼 수 있지만, 외부에서 안에 있는 변수를 참조할 수 없다. (변수의 유효범위)

inner 함수의 outerEnvironmentReference는 outer 전체를 참조 > outer 함수의 outerEnvironmentReference는 전역을 참조하고 있다.

outerEnvironmentReference가 관여하는 것이 바로 Scope Chain이다.

그래서 변수를 찾을 때도 inner함수에 변수가 없으면 outerEnvironmentReference를 타고 outer함수에 가서 찾고, 없으면 다시 outerEnvironmentReference를 타고 전역 컨텍스트에 가서 변수를 찾게 된다. >> 이게 바로 스코프 체인인 것이다!!

 

⭐️ 예제를 통해 알아보자

function a() {
  console.log(b); // (1) ƒ b() {}

  var b = "bbb";

  console.log(b); // (2) bbb

  function b() {}

  console.log(b); // (3) bbb
}

a();

함수 선언부는 함수 선언부 전체가 최상단으로 호이스팅 된다.

그래서 (1)번에서는 함수 자체가 출력된 것이다.

 

function a() {
  console.log(b); // undefined

  var b = "bbb";

  console.log(b); // bbb

  var b = () => {};

  console.log(b); // () => {}
}

a();

함수 표현식은 식별자만 호이스팅 된다. 식별자만 호이스팅 되고, 값이 할당이 안되었기 때문에 undefined가 출력되었다.