호이스팅 (Hoisting)

Minhyuk Song·2024년 3월 19일
0

Javascript

목록 보기
2/5
post-thumbnail

호이스팅

호이스팅에 대해 설명해주세요.

호이스팅은 코드가 실행되기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다.

여기서 주의할 점은 “할당문”이 아니라 “선언문”이 끌어올려집니다.

변수 호이스팅에서는 키워드 var로 선언된 변수가 해당되며,
함수 호이스팅에서는 함수 선언식이 해당됩니다.

호이스팅은 되도록이면 코드의 가독성과 유지보수를 위해 지양해야 합니다.
그래서 var 대신에 let, const를, 함수 선언식 대신에 함수 표현식을 사용하는 게 좋다고 생각합니다.

더 나아가기

변수는 어떻게 생성되며, 호이스팅은 어떻게 이뤄질까?

좋은 글이 있어서 인용해서 정보 남기겠습니다.
변수는 3단계에 걸쳐 생성된다.

1단계: 선언 단계(Declaration phase)
변수를 실행 컨텍스트의 변수 객체에 등록한다.
이 변수 객체는 스코프가 참조하는 대상이 된다.

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

3단계: 할당 단계(Assignment phase)
undefined로 초기화된 변수에 실제 값을 할당한다.

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

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

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

profile
스크린을 넘어 유쾌한 경험을 드리는 프론트엔드 개발자가 되도록 노력하고 있습니다.

0개의 댓글