TIL 2021.7.23 : 자바스크립트 호이스팅의 애매함 타파하기

코어 자바스크립트(정재남 지음)의 Chapter02. 실행 컨텍스트에서 설명하는 호이스팅과 관련해 애매한 부분을 정리한 블로그 페이지입니다.

호이스팅을 설명하기 위한 필수지식의 흐름은 다음과 같다.

1. 자바스크립트에서 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체.

2. 실행컨텍스트의 구성요소인 environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨.

3. 단, 식별자만 저장하는 것이지, 식별자에 할당된 값도 저장하는 것이 아님에 주목할 것!

4. 저장되는 식별자 정보 : 실행컨텍스트를 구성하는 함수의 매개변수 식별자, 함수 선언문의 경우 함수 전체, var로 선언된 변수의 식별자.

5. 코드 실행 전, 자바스크립트엔진은 실행 컨텍스트의 처음부터 끝까지 훑으면서 식별자들을 순서대로 수집한다. 

6. 그러면 코드 실행전이라도 자바스크립트 엔진은 실행 컨텍스트에 속한 식별자를 모두 아는 것과 같고, 이는 식별자들을 최상단으로 끌어올린 다음 코드를 실행하는 것처럼 해석된다 = hoisting!

 

애매한 호이스팅 사례 해석하기

1. 함수 표현식의 경우 (코어 자바스크립트 p52)

같은 이름 함수가 두번 이상 함수 표현식으로 할당된 경우

console.log(sum(3, 4)); // Uncaught Type Error: sum is not a function

var sum = function(x, y) {
  return x + y;
};

var a = sum(1, 2);
console.log(a); // 3

var sum = function(x, y) {
  return x + ' + ' + y + ' = ' + (x + y);
};

var c = sum(3, 4);
console.log(c); // x + y = 7

위 코드에서 함수가 아니어서 생긴 오류라고(sum is not a function) 나오는데, 왜 그런지 호이스팅이 된 코드로 살펴보자. 아래 코드가 호이스팅이 된 상태를 정리한 코드다.

var sum;
var a;
var sum;
var c;
console.log(sum(3,4)); // Uncaught Type Error: sum is not a function

sum = function(x, y) {
  return x + y;
};
a = sum(1,2);
console.log(a); // 3

sum = function(x, y) {
  return x + ' + ' + y + ' = ' + (x + y);
};
c = sum(3,4);
console.log(c); // x + y = 7

함수 표현식은 함수를 변수에 할당하는 식이므로, 식별자인 sum이 먼저 호이스팅이 된 다음에 sum에 함수가 할당이 되지 않은채로 console.log(sum(3, 4))가 실행되었다. 그러니 console.log(sum(3,4))가 실행되는 시점에서 sum은 그저 할당이 안된 식별자일 뿐이지 함수가 아니므로 저런 에러가 나게 된다.

 

2. 스코프 체인에서 (코어 자바스크립트 p54)

스코프체인을 설명하는 예시 코드에서 undefined가 나오는 코드가 부분이 있는데 호이스팅으로 설명해보자.

var a = 1;
var outer = function() {
  var inner = function() {
    console.log(a); // undefined
    var a = 3;
  };
  inner();
  console.log(a); // 1
};
outer();
console.log(a); // 1

inner 함수 내부의 console.log(a)에서 undefined가 나왔다. 왜 그런지 호이스팅이 된 코드로 알아보자.

var a = 1;
var outer = function() {
  var inner = function() {
    var a;
    console.log(a); // undefined
    a = 3;
  };
  inner();
  console.log(a); // 1
};
outer();
console.log(a); // 1

inner 함수 내부에서 호이스팅이 위와 같이 된다. console.log(a) 코드에서 a에 접근하려고 inner 컨텍스트의 environmentRecord에서 a를 검색하니 a가 앞줄에서 선언 되었으므로 식별자는 존재한다. 단, 할당이 이 단계에서는 안된 상태여서 빈값이라 undefined를 출력하는 것이다.