hoist(: 끌어올리다) + -ing ?? || 호이스팅의 숨겨진 의미

guddls ju·2022년 8월 30일

호이스팅이란?

💡 특정 스코프 안에서 선언된 변수는 코드에 적힌 순서와 상관없이 "최상단에서 선언한 것처럼" 끌어올려진다.

Hoist(: 끌어올리다) + -ing 단어에서 알 수 있듯이 변수나 함수를 끌어올린다는 개념으로 사용되는 호이스팅에 단순히 그런 의미만 존재할까??

호이스팅을 변수, 함수의 선언부가 위치한 인접 스코프의 시작 지점에서 해당 식별자의 관측이 가능한 현상 이라고 정의한다. 마치 JS의 어떤 기술이 실행 시점에 변수나 함수들을 스코프의 최상단으로 찝어서 끌어 올려주는것 처럼 느껴지지만, JS엔진에 그런 기능은 없다.

“단지 실행 전에 어떤 과정을 거쳐 변수와 함수에 대한 정보를 알고있을 뿐이다.”

어떤 과정이란, JS는 코드를 실행하기 전 컴파일 과정을 거친다. 컴파일이란 사람이 이해하는(고수준) 언어로 이루어진 코드를 컴퓨터가 이해할 수 있는(저수준) 언어로 가공하여 분석하는 과정이다.

이 과정에서 JS엔진은 모든 스코프(or실행컨텍스트)를 탐색하여 각 스코프의 변수객체에 정보를 수집한다.

💡 즉, 실행 시점으로 넘어가기 전에 선언된 식별자의 정보를 이미 알고 있기 때문에 스코프의 어느지점이던 함수나 변수를 참조할 수 있는것이다.

물론 변수와 함수는 그 규칙이 다르다.
짧게 요약하면 아래와 같고

호이스팅 규칙

선언된 함수는 상단에서 참조, 호출이 가능하다.

선언된 var 는 상단에서 참조, 할당이 가능하다.

선언된 let , const 는 상단에서 참조, 할당이 불가능하다.

각각의 특징을 자세히 살펴보자

변수 호이스팅

변수의 생성부터 살펴보면 크게 세 단계를 거친다.

선언 : 파싱 과정에서 변수 객체가 변수에 대한 식별자들을 수집한다.
초기화 : 식별자에 메모리를 할당하고 undefined 상태를 부여한다.
할당 : 변수 안에 직접 값을 넘겨 준다.

var와 let, const 변수 생성 단계 + TDZ

• var키워드 변수는 선언 단계와 초기화 단계가 동시에 진행된다. 즉, 자바스크립트 내부적으로 실행 콘텍스트의 변수 객채에 변수를 등록하는 동시에 메모리를 undefined로 만들어버린다.

(그렇기 때문에 변수에 값이 할당되기 전에 호출해도 Reference 에러가 발생하지 않고, undefined가 리턴된다.)

• let , const 는 호이스팅이 발생하면, 선언만 이루어지고 실행 시점에서 실질적인 선언부를 만날 때까지 초기화는 이루어지지 않는다. 이 간극만큼 해당 변수에 대한 메모리는 존재하지 않기 때문에 선언부 상단에서 참조, 할당이 불가능하다.

• let, const 가 동작하는 과정에서 스코프의 진입지점과 해당 식별자의 실질적 선언부 사이를 일시적 사각지대, TDZ(Temporal Dead Zone)라고 하며, 여기서 변수는 존재하지만, 초기화가 되어있지 않다.

{
  /*
   * Temporal Dead Zone of **a**
   * **a**는 이 구간에서 참조할 수 없다.
   * console.log(a) // Reference Error
   */
  let a;
}

함수 호이스팅

함수 호이스팅은 다른 무엇보다 가장 먼저 이루어진다. 그리고 함수 호이스팅은 선언문에만 해당하는데 이는 굳이 어렵게 받아들일 필요가 없다. 함수 표현식은 결국 어떠한 변수로 함수를 할당하는 모양새여서 이것 또한 변수 호이스팅 사례로 볼 수 있기 때문이다.