Hoisting 이란?

유례?

Hoisting : 끌어올리다.

식별자를 끌어올리다.

hoisting은 어디서 나온걸까?

호이스팅을 알려면 먼저 알아야 할 것이 있는데, 실행컨텍스트 이다.

Context : 해당 코드의 배경이 되는 조건, 환경정보를 뜻한다.

Excution Context?

코드를 실행하는데 필요한 배경이 되는 조건/ 환경

동일한 조건과 환경을 지니고 있는 코드 조각들을 한데 모아 놓은 덩어리가 있다고 했을때,

이 코드뭉치를 실행할 때, 필요한 조건이나 환경정보가 실행컨텍스트라고 명명합니다.

Excution Context → Lexical Enviroment

실행컨텍스트안에 있는 Lexical Enviroment를 알아야한다.

Lexical Environment는 어휘적 / 사전적 환경

실행컨텍스트를 구성하는 환경 정보들을 모아 사전처럼 구성한 객체이다.

Lexical Enviroment → EnviromentRecord

현재 문맥의 식별자 정보를 나타낸다.

사실 실행컨텍스트를 자세히 알아야지만 내용이 설명이 되지만, 일단 지금은 흐름만 잡아봤다.

실행 컨텍스트 안에, 렉시컬환경이라는것이 있고 그안에 환경 레코드가 있는데 이것이 핵심이다.

환경 레코드의 정보 수집 과정을 좀더 쉽게 이해하기 위해서 만든 허구의 개념이 결국 hoisting이다.

hoisting?

현재 컨텍스트 실별자 정보들을 수집해서 enviromentRecord에 담는 과정 이것을 바로 “호이스팅”이라고 합니다.

실행컨텍스트의 맨위로 식별자 정보를 끌어올리는 일.

실행컨텍스트가 처음 생성되는 순간에 제일 먼저 하는 일 → enviromentRecord에 정보들을 수집하는 것

현재 컨텍스트에서 선언되어 있는 식별자들이 무엇이 있느냐라는 정보를 코드 순서대로 수집을 하다 보니까 호이스팅한거랑 똑같은 개념이 되버린 것

---

호이스팅(MDN) JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var 로 선언한 경우 호이스팅 시, undefined로 변수를 초기화합니다. 반면 let 과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 “변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 “ 것으로 말하곤합니다. 따라서 변수를 정의하는 코드보다 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

---

변수 호이스팅 (var, let, const 키워드)

변수의 호이스팅 단계

1단계 : 선언단계(Declaration phase)

• 변수를 실행 컨텍스트의 변수 객체에 등록한다.
• 이 변수 객체는 스코프가 참조하는 대상이 된다.

2단계 : 초기화단계(Initialization phase)

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이 단계에서 변수는 undefined로 초기화 된다.

3단계 할당 단계(Assignment phase)

• undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다. 즉, 스코프에 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다.

let 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록(선언단계)하지만 초기화단계는 변수 선언문에 도달했을 때(코드를 실행 후 ) 이뤄진다. 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 아직 변수가 초기화되지 않았기 때문이다. 즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 스코프의 시작지점부터 초기화 지점까지 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

함수선언문에서의 호이스팅

함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

호이스팅 예시

 

예시와 같이, 함수와 var 선언이 위로 올라가는 것을 호이스팅이라 한다. (위 예시는 보기 편하게 하기 위해 만든것)

enviromentRecord { function a() {…}, b : undefined, c : undefined }

이런식으로 담긴다는 것.

 

참고

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬

코어자바스크립트 - 정재남 지음