[Javascript-Core] Execution Context와 Hoisting의 상관 관계와 오해, 그리고 이해 부제 :: EnvironmentRecord가 Hoisting을 하는 방법

호이스팅(Hoisting)

호이스팅은 지난 시간에 이야기 했던 실행 컨텍스트의 Creation Phase에서 어떤 방식으로 작동하는지에 대한 방식인데, MDN에서는 다음과 같이 경고하고 있다.

 

MDN-Mozilla

 

보통 사람들이 호이스팅이 일어나면 변수나 함수가 코드 상단으로 끌어올려진다라고 하는데, 이는 잘못된 정보이다.

변수나 함수 코드는 실제 위치 그대로 존재하고 개념적으로 상단으로 끌어올려진다라고 표현하는게 정확하다.

Hoisting을 이해했는지 확인해보자.

MDN에서는 위와 같은 방식을 호이스팅이라고 예시를 제시하고 있다.

MDN-Mozilla

그럼 다음과 같은 상황에서 각각의 x는 어떤 방식으로 출력될지 스스로에게 대답해보자.

결과가 무엇일지 체크해보자.

• 1 undefined 2
• 1 1 2

EnvironmentRecord에 의한 Hoisting

EnvironmentRecord가 지난 시간에 실행 환경에 대한 정보(변수, 매개변수, 함수)를 구성한다고 이야기 했다.

 

호이스팅도 바로 EnvironmentRecord가 실행 환경에 대한 정보를 수집하는 단계인데, 그럼 EnvironmentRecord가 실행 환경에 대해서 구성하기 위해서 필요한 정보는 위의 코드에서 무엇이 있을까?

 

1. function a(x) 함수의 매개 변수 x = 10에 해당하는 var x
2. 함수 내의 선언된 변수 var x
3. var x = 2에 할당된 변수 var x

그럼 EnvironmentRecord가 필요한 정보를 수집하기 위한 방법이 필요하다.

 

이 것이 바로 Hoisting이라고 한다.

 

그럼 EnvironmentRecord가 필요한 정보를 수집하기 위한 방법에 따라 각색한다면 다음과 같은 형태가 나올 것이다.(실제로 이렇게 동작하지 않는다.)

function hoisting(x) {

    var x; // 1번 
    var x; // 2번
    var x; // 3번 

    x = 1; // 매개변수

    console.log(x); // 1

    console.log(x); // 2

    x = 2; // 변수 할당

    console.log(x); // 3
}

a(1)

그럼 이제 위에서 본 코드의 결과를 정확히 예측할 수 있다.

콘솔을 통해서 출력된 결과와 우리가 예측한 결과와 동일한지 알아보자.

 

결과

그럼 이제 두 번째 호이스팅에 관련된 이야기를 해보자.

함수 호이스팅

함수 호이스팅도 위에서 봤던 호이스팅과 크게 다르지 않다.

 

이번 물음에 한 번 답해보자.

• undefined bbb function b()
• function b() bbb bbb

EnvironmentRecord에 의한 Hoisting

또 EnvironmentRecord가 필요한 정보를 구성하는 과정을 보자면,

function hoisting() {

      var b; 
    function b() {};

    console.log(b);

    b = 'bbb';

    console.log(b);

    console.lob(b);
}

여기서 중요한 점은 변수의 선언부는 Hoisting당하고 할당부는 원래 자리에 위치하며 함수 선언은 함수 전체를 끌어올린다는 점이다.

 

이제 결과를 봐보자.

 

결과

 

우리가 예상한대로 결과가 성공적으로 출력되었다.

---

이렇게 실행 문맥의 EnvironmentRecord가 어떻게 실행환경을 구성하는지에 대해서 알아보았다.

자바스크립트로 프로그래밍을 할 때 가끔, 아니 이게 왜 이렇게 출력되지? 하는 의문이 들었던 적이 있던 사람이라면 이번 포스팅에서 많은 것을 알아갔으면 좋겠다.

기본적으로 위의 글은 정재남님의 코어 자바스크립트를 보고 학습한 내용과 여러 문서와 자료들을 합쳐 종합적으로 분석한 글이다. 자세한 정보를 알고싶다면 코어 자바스크립트의 책을 참고하는 것도 추천한다.