호이스팅(Hoisting) - JavaScript

JavaScript

---

호이스팅(Hoisting)

호이스팅이란?

> 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

 

쉽게 설명하자면

• 자바스크립트 엔진이 함수가 실행되기 전에 코드 안에 있는 변수들을 범위의 최상단으로 끌어올려지는 것 같은 현상

왜 이런 현상이 발생하는가?

> var의 문제점으로 인해 발생한다.

var의 문제점

• 같은 이름의 변수 중복 선언이 가능
• 지역변수와 전역변수의 개념이 확실하지 않음
• 함수만 제외하고 다 전역변수로 사용함

• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

---

예제 1

예제 1과 같이 JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당한다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다.

---

예제 2

예제 2와 같이 JavaScript는 초기화를 제외한 선언만 호이스팅한다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)입니다.

---

예제 3

> var만의 문제가 아닌 let으로 변수 선언 전에 함수를 호출하면 오류가 생김 (let은 TDZ(Temporal Death Zone) 오류)

• let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않는다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.

  ---

결론

호이스팅 문제는 클린한 코드로 해결이 가능하지만 실수로 인한 문제 발생 시 이 개념을 통해 무엇이 문제인지 빠르게 파악이 가능할 것이라고 생각한다. 또한 함수 같은 경우는 어디에 정리하더라도 사용 가능하다는 점이다.