2022년 5월 15일

<모던 자바스크립트 Deep Dive>를 읽고 새롭게 알게된 내용을 위주로 정리한 글입니다.

실행 컨텍스트와 호이스팅

실행 컨텍스트는 코드를 실행할 때 필요한 환경정보인데, 여기서 렉시컬 환경(LexicalEnvironment)이 수집하는 두 가지의 정보 중 environmentRecord에 저장되는 값에 실행 컨텍스트와 관련된 식별자가 저장된다. (deep dive 책에서는 환경 레코드라고 소개하고 있다!)

호이스팅은 실행 컨텍스트를 구성하는 과정에서 식별자를 수집하는 과정을 설명하기 위한 가상의 개념이다. 마치 변수가 위로 끌어당겨진 것처럼 동작한다고 이해해도 무리가 없기 때문이다. 한편, environmentRecord는 식별자에 대한 정보를 수집할 때 어떤 값이 할당되는지에는 관심이 없다. 따라서 선언된 변수만 끌어올리고 할당문은 그 자리에 그대로 남겨둔다.

//1.호이스팅을 제대로 모를 경우 아래 코드를 예상하면 다음과 같다.

function a (x){
  console.log(x); //1
  var x;
  console.log(x); //undefined
  var x = 2;
  console.log(x); //2
  }

a(1);

//parameter또한 식별자 수집 대상이라는 것을 간주하고 
//코드의 동작 방식을의도적으로 표현하면 다음과 같다.

function a() {
  var x = 1;
  console.log(x); //1
  var x;
  console.log(x); //undefined
  var x = 2;
  console.log(x); //2
  }

a();

//호이스팅의 개념을 알고 코드의 동작 방식을 의도적으로 표현하면 다음과 같다.

function a() {
  var x;
  var x;
  var x;

  var x = 1;
  console.log(x); //1
  console.log(x); //1
  var x = 2;
  console.log(x); //2
}
a();

⭐️ 정리
실행 컨텍스트를 구성하는 과정에서 var로 선언한 변수, 함수, 함수의 매개변수 등 식별자의 정보를 미리 수집한다.(environmentRecord에 저장된다.) 식별자 정보를 미리 수집하는 것을 쉽게 이해하기 위해서 '최상단으로 끌어올려진 것처럼 행동한다'라는 호이스팅이라는 개념을 차용했다. 한편 호이스팅은 어떤 식별자가 선언되었는지만 관심 있고, 어떤 값이 할당되어있는지는 관심이 없기 때문에, 변수에 값을 할당하는 할당문은 그 자리 그대로 남아있고 변수 선언문은 최상단으로 끌어올려진 것처럼 행동한다.

함수의 호이스팅

변수의 선언과 할당이 동시에 이루어졌을 경우 선언문만 호이스팅되는 것이 핵심인데, 이러한 이유로 함수 선언문과 함수 표현식에서 차이가 생긴다. 함수 선언문은 함수 몸체가 통째로 호이스팅되고, 함수 표현식은 선언문만 호이스팅된다.

function a() {
  console.log(b); //함수b
  var b = "helloworld";
  console.log(b); //'helloworld'
  function b() {}
  console.log(b); //'helloworld'
}

a();

⭐️ 정리
함수 선언문과 함수 표현식의 호이스팅 차이를 기억하자.
함수 선언문은 함수 자체를 호이스팅하고,
함수 표현식은 함수를 변수에 할당한 형태이기 때문에 선언문만 호이스팅된다.

따라서 함수 선언문을 사용하게 되면 실제 코드에서 선언하기 전에 이 함수를 사용해도 아무런 문제가 생기지 않는다. 이렇게 되면 의도하지 않은 결과가 나올 수도 있고 디버깅이 어려워진다. 따라서 함수 선언문의 혼란스러움을 방지하기 위해 전역에서 함수를 선언할 때는 함수 표현식으로 선언하는 것이 좋다고 한다.(다시 말해 함수 표현식이 나타나기도 전에 함수를 사용하려고 하면 에러를 발생시키기 때문에 디버깅에 유리하다.