[JavaScript] 호이스팅(Hoisting)이란?

주절주절

오랜만에 블로그 글을 씁니다. 작년 연말에 쓰디 쓴 패배를 맛보고....😇 잠시 휴식기를 가지고, 그 사이 또 새로운 도전을 했습니다. 이제부터는 다시 달릴 시기라고 생각합니다! 예전에는 블로그를 양치기 하려고 했었는데, 점점 블로그 운영을 하다보니 양 보다는 질이지 않나 하는 생각이 듭니다. 새해가 되었으니, 하나의 토픽에 대해 스스로도 더 깊게 공부하고 알게 된 내용을 잘 다듬어 글을 올리려고 마음 먹었습니다. 올해도 화이팅!

 

최근에는 자바스크립트 책을 읽으며 공부하고 있어 호이스팅에 대해 다시 한번 정리하는 시간을 가졌습니다. 그 전까진 중요한 개념으로 대략적으로만 알고 있었을 뿐 정확하게 알지 못했습니다. 

 

 

호이스팅(Hoisting) ?

호이스팅은 자바스크립트 코드가 실행되기 전 변수 및 함수의 모든 선언(호이스팅의 대상은 선언만 해당한다❗)을 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것을 의미한다.  따라서 변수 및 함수의 선언문 보다 참조, 호출이 먼저 돼도 오류가 발생하지 않는다. (마치 파일 맨 위에 선언된 것처럼 동작하기 때문, 하지만 실제 선언이 끌어 올려진 것은 아니다❗)

 

변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.

 

변수 호이스팅

변수는 기본적으로 선언 -> 초기화(undefined로 초기화) -> 할당 단계를 거치게 된다. 기본적으로 var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 선언 단계와 초기화 단계가 한번에 진행된다. 따라서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 이미 존재하기 때문에 에러가 발생하지 않는다. 이때 undefined를 반환한다.

 

  💻예제 코드

console.log(age);  // undefined 출력 -> 런타임 이전에 선언 및 초기화 단계가 함께 실행되기 때문

var age;  // 초기화 단계
console.log(age);  // undefined 출력

var age = 20;
console.log(age);  // 20 출력

 

이와 달리 let, const는 마치 호이스팅이 발생하지 않는 것처럼 동작한다.  let과 const는 선언 단계와 초기화 단계가 분리되어 진행되기 때문이다. 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도착했을 때 비로소 실행된다. 따라서 초기화 되지 않은 상태로 선언만 메모리에 저장된 상태에서 변수에 접근하려고 하면 참조 에러가 발생한다. let과 const로 선언한 변수는 스코프 시작 지점부터 변수 선언문(변수 초기화 단계)까지 변수를 참조할 수 없는데 이 구간을 일시적 사각지대(Temporal Dead Zone)이라고 부른다.

 

  💻예제 코드

console.log(age); // ReferenceError: age is not defined -> 참조 에러 발생

let age; // 변수 선언문에서 초기화됨
console.log(age)  // undefined 출력 

age = 20;
console.log(age) // 20 출력

 

👉 결론적으로 var, let, const는 모두 호이스팅이 일어나지만 var만 에러가 발생하지 않을 뿐이다. let 과 const는 일시적 사각지대(Temoporal Dead Zone)이 존재.