프론트엔드 면접 준비 : 호이스팅(Hoisting)

호이스팅(Hoisting)

호이스팅이란 함수, 변수, 클래스 또는 임포트(import)와 같은 선언문을 해당 유효범위의 맨 위로 끌어올리는 것처럼 보이는 현상

 

이러한 현상이 발생하는 이유는 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스 어딘가에 미리 기록해두었기 때문이다.  (이때, 그 어딘가는 환경레코드 입니다.)

호이스팅 발생 과정

호이스팅이 발생하는 과정은 생성단계와 실행단계 두 단계가 있습니다.

생성 단계 (Creation Phase)

• 자바스크립트 엔진은 코드를 실행하면
  우선 전역 실행 컨텍스트를 가장 먼저 생성해서 콜 스택에 넣는다.
• 그 후 전체 코드를 스캔한다.
  이 과정에서 선언할 식별자 변수가 있다면 전역 실행 컨텍스트의 환경 레코드에 미리 선언해둔다.
  식별자 변수가 var 키워드로 선언되었다면 'undefined'로 초기화해두고 let/const라면 따로 초기화를 진행하지 않는다.

실행 단계 (Execution Phase)

• 위에서 기록해둔 선언문 라인을 제외한 나머지 코드를 순차적으로 실행한다.
  필요한 경우, 생성 단계에서 환경 레코드에 기록해 둔 식별자를 참조하거나 또는 값을 업데이트(재할당)한다.

호이스팅 종류

호이스팅은 변수 호이스팅과 함수 호이스팅으로 나뉜다.

 

변수 호이스팅

먼저 변수 호이스팅은 var 와 let, const 로 나뉠 수 있는데

이렇게 나뉘어 설명드린 이유는 범위와 호이스팅 시 차이점이 있기 때문이다.

 

위에서 설명한대로 자바스크립트 엔진이 전체 코드를 스캔하여 환경레코드에 변수를 저장할 때,

• var 키워드의 경우 선언과 그 값을 undefined 값으로 초기화하여 저장하는 등 선언과 값 초기화을 동시에 진행
• let과 const 키워드의 경우 선언만 이루어지고 그 값을 초기화해주지는 않는다.

그래서 var 키워드의 경우는 선언라인 전에도 그 값을 출력하더라도 undefined를 출력하지만

let과 const 키워드를 사용한 변수는 선언라인 전에는 참조할 값이 없어 Reference Error를 출력

 

이렇게 let이나 const로 선언하여 선언 라인 이전에 식별자를 참조할 수 없게 되는 구역 일시적 사각지대(Temporal Dead Zone) 라고도 한다.

(참고) var, let, const의 차이
Var : 중복 선언 O 재할당 O,  함수레벨 스코프
let : 중복 선언 X, 재할당 O, 블록레벨 스코프
const : 중복 선언 X, 재할당 X, 블록레벨 스코프

 

함수 호이스팅

함수 호이스팅의 경우 함수 표현식과 선언식으로 나누어 호이스팅에 대해 설명을 할  수 있다.

 

먼저 설명에 앞서 자바스크립트에서는 함수를 변수에 담을 수 있는 특징이 있는데, 이를 함수 표현식(Function Expression) 이라고 한다.

 

함수 표현식은 함수를 변수에 담고 있기 때문에 기본적으로 변수 호이스팅과 똑같이 동작하지만 var 키워드의 경우 차이점이 존재한다.

 

var 변수에 함수를 담아 선언문 이전에 실행하려고 하며 undefined 가 초기화 값으로 할당되어는 있지만 undefined 데이터 타입은 함수가 아니므로 Type error를 발생

let과 const는 변수호이스팅에서와 마찬가지로 참조할 값이 없어 Reference Error를 출력

 

함수 선언문은 function 키워드로 함수를 선언하는 방식

함수 선언문은 자바스크립트 엔진이 코드를 스캔할 때 완성된 함수 전체를 한 번에 환경 레코드에 기록해둔다

그래서 코드 상의 어디에서 호출해도 이미 key 역할을 하는 식별자 함수가 그 함수의 value인 함수로 초기화되어 있기 때문에 에러가 발생하지 않는다.

 

그렇기 때문에  함수가 선언된 위치에 상관없이 함수를 호출하여 사용할 수 있다.