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

🫧 정의

호이스팅(Hoisting)이란, 변수나 함수의 선언이 실제로 작성된 위치와는 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특징을 말합니다.

참고로 hoist란 '감아올리기'라는 의미를 가진 단어입니다.

호이스팅 현상에서 중요한 개념은 바로 let 또는 const로 선언한 변수는

변수의 선언만 호이스팅 되고, 변수의 할당은 호이스팅 되지 않는다는 것입니다.

 

아래에서 자세히 살펴보겠습니다.

 

---

🫧 특징

변수의 선언만 호이스팅 되고, 변수의 할당은 호이스팅 되지 않는다는 특징에 대해 예시 코드와 함께 설명하겠습니다.

 

예를 들어, 아래와 같은 코드가 있을 때

console.log(myName);
let myName = "Emma";

두 번째 줄에서는 두 가지 일이 일어납니다.

1. myName이라는 변수 선언(var)
2. 변수에 "Emma"라는 값 할당(=)

따라서 위의 코드는 실제로 아래 코드처럼 동작하게 됩니다.

let myName;            // 선언만 호이스팅(초기화는 X)
console.log(myName);   // 초기화 전이므로 참조 오류(ReferenceError) 발생
myName = "Emma";       // 여기서 값 할당

 

---

 

그러나 var로 선언한 변수는 위의 개념에서 약간의 차이가 있습니다.

예를 들어, 아래와 같은 코드가 있을 때

console.log(myName);
var myName = "Emma";

위의 코드는 실제로 아래 코드처럼 동작하게 됩니다.

var myName;          // 선언 호이스팅 및 undefined로 초기화
console.log(myName); // undefined 출력
myName = "Emma";     // 여기서 값 할당

var의 호이스팅 특징으로 인해 undefined로 할당되며 콘솔 창에는 결과적으로 undefined가 출력됩니다.

 

변수 선언 키워드인 var, let, const의 차이점에 대한 내용은 이전 글을 참고해주세요.

[Javascript] var, let, const의 차이점(feat. var의 문제점)

[Javascript] var, let, const의 차이점(feat. var의 문제점)

 

---

🫧 발생하는 이유

호이스팅이 발생하는 이유는 코드가 실행되기 전에 실행 컨텍스트가 생성되면서 변수와 함수의 선언이 먼저 처리되기 때문입니다.

자바스크립트의 실행은 두 가지 단계로 나뉩니다. 
먼저 실행 컨텍스트가 생성되는 '메모리 할당 단계'와 다음으로 실제 코드가 한 줄씩 실행되는 '실행 단계'입니다. 

호이스팅은 첫 번째 단계 중 실행 컨텍스트 생성 과정에서 발생합니다. 

자바스크립트는 실행에 앞서 전체 코드를 스코프 단위로 분석하고, 변수나 함수의 선언문을 먼저 메모리에 등록합니다.

이 과정 때문에 선언부가 코드의 아랫부분에 있어도 마치 코드의 상단에 위치한 것처럼 동작하는 호이스팅 현상이 발생하게 됩니다.

 

---

읽어주셔서 감사합니다:)