변수의 호이스팅

강한솔·2024년 5월 8일

모던 JS Deep Dive

목록 보기

1/14

뒤에 있던 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는걸 호이스팅이라고 한다.

자바 스크립트는 소스 코드 평가 과정에서 선언문을 찾아내 먼저 실행하고, 이후에 선언문을 제외한 소스코드들을 한 줄씩 순차적으로 실행한다.

console.log(score); // undefined

var score;

위 코드를 실행하면 변수 선언보다 먼저 호출을 해서 에러가 발생할 것 같지만, 런타임 전에 선언문을 먼저 실행하기 때문에 console.log() 실행 전에 score가 존재하게 되고 에러는 발생하지 않게 된다.

console.log(score); 

let score;

var 대신 let이나 const로 변수를 선언하면 에러가 발생한다. 왜 그럴까? var는 선언과 초기화가 동시에 진행되고, let과 const는 선언이후에 초기화 과정이 이루어지기 때문이다.

선언과 초기화가 따로 이루어지는 let과 const는 TDZ에 영향을 받게 되는데, TDZ에 있는 변수에 접근하려고 하면 Reference Error가 발생하게 된다.

TDZ : 변수가 선언된 시점부터 초기화되기 전까지 해당 변수에 접근할 수 없는 범위

let score = 10; // 전역 변수
{
  console.log(score); // Reference Error
  let score = 20; // 지역 변수
}

호이스팅이 발생하지 않는다면 10 이라는 값이 콘솔에 출력되어야 할텐데 에러가 발생한다. 지역 변수가 해당 스코프에서 호이스팅이 되어 에러가 발생하는 것이다.

console.log(score); // undefined

var score = 80;

선언과 동시에 값 할당을 해도 선언만을 우선적으로 실행하기 때문에 콘솔에는 undefined 값이 출력된다.

console.log(score); // undefined

var score = 80;

console.log(score); // 80

밑에 console.log()를 추가해보면 코드가 순차적으로 실행되어 비어있던 score변수에 값이 할당된 것을 확인할 수 있다.