호이스팅(Hoisting)

캠퍼스에서 다른줄 친구의 스터디준비 과정을 옆에서 참관하다가 약 30분 가량 같이 공부해버렸다.ㅋㅋ let, var, const로 시작해 스코프와 호이스팅까지~

---

 

호이스팅(Hoisting)

함수 안에 있는 선언들을 모두 끌어올려서(hoist) 해당 함수 유효 범위(scope)의 최상단에 선언하는 것.

 

MDN 정의

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

 

동작원리

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. (스코프, 유효 범위: 함수 블록 {} 안에서 유효) 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다.

 

 

변수 생성 단계

1. 선언 (??객체에 변수 등록, 메모리 할당) 
2. 초기화 (undefined)
3. 할당 (실제 값)

 

 

변수 종류에 따른 차이

var

선언과 동시에 초기화. 선언 전에 실행하면 undefined

let, const

선언 전에 실행시 referrence error. 선언 코드 실행시 그제서야 초기화.

변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간다. TDZ에서 변수를 사용하면 에러!

 

 

호이스팅으로 인한 스코프 꼬임 현상 방지하는 방법

• 가급적 코드 상단부에서 함수와 변수 선언
• let/const 사용

 

 

ES6이 나왔지만, ES5로 트랜스컴파일하는 경우가 있기에.. 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다고 한다..

 

---

Ref)

• https://developer.mozilla.org/ko/docs/Glossary/Hoisting
• https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html