호이스팅

environmentRecord에는 식별자 정보가 저장된다

여기서 말하는 식별자란, 아래와 같다

• 컨택스트를 구성하는 함수에 지정된 매개변수 식별자
• 선언한 함수 그 자체
• var로 선언된 변수의 식별자

JS엔진은 컨택스트 내부 전체를 처음부터 끝까지 훑어가며 순서대로 수집한다.

• 아직 실행 컨택스트의 코드는 실행되지 않은 상태에서 식별자 정보를 수집한다.
• 그렇다면, JS엔진은 식별자들을 최상단으로 끌어 올려 놓은 다음, 실제 코드를 실행한다라고 생각해도 될 것이다.
• 여기서 호이스팅이라는 개념이 등장한다.
  호이스팅이란 끌어올리다라는 뜻으로, JS엔진의 변수 정보 수집과정을 설명하기 위해 등장한 가상의 개념이다.
  실제로 JS엔진이 무언가를 끌어올리진 않지만, 편의상 끌어올린 것으로 간주하자는 것이다.

변수에 대한 호이스팅

원본 코드: 출력결과 예상하기

• 3에서 변수 x를 다시 선언하니까 4에선 undefined가 출력되지 않을까?
• 스포일러를 하자면, 1이 출력되는데, 이는 호이스팅때문에 그렇다.
• 호이스팅이 발생하면 어떤 식으로 코드가 실행되는지 시뮬레이션 해보자

ps: 실제론 아래의 코드처럼 변환되지 않는다.
그냥 이해를 돕기 위해서 코드를 저렇게 바꾼 것 뿐이다.

예제 2, 매개변수를 변수 선언/할당과 같다고 간주해서 이렇게 작성함

• 컨택스트 생성 시점에 만드는 정보 중엔 arguments도 포함된다. 따라서 인자는 함수 내부의 다른 코드보다 먼저 선언 및 할당이 이뤄졌다
  그렇다면, 위의 코드처럼 표현할 수 있다.
• 이 상태에서 호이스팅은 어떻게 처리될까?
• environmentRecord는 현재 실행 컨택스트에 어떤 식별자가 있는지만 관심있다. 어떤 값이 할당될지는 관심 밖이다.
• 그러므로, 변수명만 끌어올리고(호이스팅), 값의 할당은 원래 자리에 그대로 남겨둔다.

예제 3, 호이스팅을 표현한 상태

• 2에서 변수 x를 선언하고 메모리에서 공간 확보, 해당 공간의 주소를 x에 연결한다
• 3, 4에서도 변수 x를 선언해야 하지만, 이미 선언된 변수 x가 있으니 무시된다
• 이후 6에서 x에 1을 할당하려고 한다. 메모리에서 공간 확보, 1을 저장하고 해당 주소를 x와 연결된 메모리 공간에 저장한다.
• 7, 8은 x와 연결된 메모리 공간의 값을 읽어서 출력한다. 둘 다 1이 출력된다.
• 9에서 메모리에서 공간 확보, 2 저장, 해당 주소를 x와 연결된 메모리 공간에 저장한다.
• 10에선 x를 출력한다. 2가 출력된다.

이처럼 호이스팅을 알아야 이해가 되는 상황이 있다.

• 호이스팅이 발생하기에, var x 를 또 작성했다고 해서, 먼저 할당한 값이 날아간다거나 하지 않는다.

함수에 대한 호이스팅

• 변수는 선언만 호이스팅되고, 할당은 그렇지 않는다고 했다.
  하지만, 함수는 전체가 호이스팅된다.

원본 코드

호이스팅되면...

• var b가 호이스팅되긴 하지만, 그 다음 3번째에서 변수 b를 선언하고 함수 b를 할당해버린다.
  이미 변수 b를 선언했으니, 이건 무시되지만, 함수는 선언과 할당 전체가 호이스팅된다고 했으니, 별도의 메모리에 함수가 담기고, 그 주소값이 b와 연결된 공간에 담긴다.
• 그래서 5번 라인의 출력은 함수가 되는 것이다.
• 그 다음 두번의 출력은 둘 다 'bbb'이다. 함수의 할당은 호이스팅 되고 b = 'bbb'만 남으니 이렇게 된다.

호이스팅 요약

• JS엔진은 실행 컨택스트의 코드를 실행하기 전, 컨택스트의 코드를 훑어서 순서대로 식별자 정보를 수집한다
• JS엔진이 코드 실행 전에 식별자 정보를 전부 수집하다보니, 식별자 정보가 끌어올려진다고 이해할 수 있는데, 이러한 개념을 표현하는 용어가 바로 끌어올림의 의미를 가진 호이스팅이다
• 변수가 호이스팅되면, 선언만 호이스팅되고, 할당은 그 자리에 남는다
• 반면, 함수가 호이스팅되면 전체가 호이스팅된다. 즉, 선언과 할당 둘 다 끌어올려진다는 의미이다.