JavaScript
Hoisting

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

메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

함수 안에 있는 선언들을 해당 함수 유효 범위의 최상단으로 선언한다.

선언은 호이스팅되지만 할당은 호이스팅되지 않는다.

letconst도 호이스팅 대상이지만, var와 달리 undefined로 초기화하지 않는 점이 차이점이다.

선언, 초기화, 할당

변수는 선언, 초기화, 할당이라는 세 단계를 걸쳐서 생성된다.

선초할로 외우자.

선언

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

초기화

실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계이다.

이 단계에서 할당된 메모리는 undefined로 초기화된다.

할당

undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.

var, let, const

변수에 대해 정리하자.

var

  • 함수 스코프
  • 재선언과 재할당이 가능
  • 전역 공간으로 어디서나 접근이 가능
  • 호이스팅 시 undefined로 초기화

let

  • 블록 스코프
  • 재선언은 불가능, 재할당은 가능
  • TDZ에 영향을 받음
  • 호이스팅 시 변수를 초기화하지 않음

const

  • 블록 스코프
  • 재선언과 재할당이 불가능
  • TDZ에 영향을 받음
  • 호이스팅 시 변수를 초기화하지 않음

TDZ (Temporal Dead Zone)

스코프 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 공간을 의미한다.

선언 단계와 초기화 단계 사이로 이때 변수에 접근하려고 하면 ReferenceError가 발생한다.

var는 선언과 초기화가 한 번에 이루어진다.

let은 선언과 초기화가 분리되어 진행된다.

console.log(foo); // undefined
var foo;
 
console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

함수 선언문

호이스팅에 영향을 받는다.

function add(x, y) {
  return x + y;
}

함수 표현식

호이스팅에 영향을 받지 않는다.

const add = function (x, y) {
  return x + y;
};

GPT로 문장 정리하기

호이스팅에 대해 설명해줘

  • 코드 실행 전에 변수나 함수 선언이 해당 범위의 맨 위로 이동되는 현상

키워드 정리

  • 선언, 초기화, 할당
  • 함수 선언문, 함수 표현식
  • TDZ

참고 자료