javascript: hoisting 호이스팅

 

 

 

호이스팅

코드 실행 전에 변수나 함수의 선언들을 모두 끌어올려서 해당 스코프의 최상단에 끌어올려 선언하는 것.  

변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

 

 

변수의 생성 단계

1. 선언 단계(Declaration Phase) 

• 변수를 변수 객체(Variable Object)에 등록함.
• 변수 객체는 스코프가 참조하는 대상이 됨.

2. 초기화 단계(Initialization Phase)

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보
• 이 단계에서 var는 undefined로 초기화 됨

3. 할당 단계(Assignment Phase)

• var: undefined로 초기화된 변수에 실제 값을 할당함
• let, const: 변수에 실제 값을 할당함

 

 

호이스팅의 대상

var, let, const를 포함한 모든 선언을 호이스팅 함

 

 

var	let / const
선언 단계와 초기화 단계가 한 번에 이루어짐	선언 단계와 초기화 단계가 분리되어 이루어짐
선언 단계에서 undefined로 초기화되기 때문에 변수 선언문 이전에 접근해도 에러가 발생하지 않고 undefined를 반환하게 됨	스코프에 변수를 선언은 하지만, 변수 선언문에 도달해서야 초기화가 이루어지기 때문에 초기화 이전에 변수에 접근하게 되면 참조 에러(Reference Error)가 발생

 

 

ex 1

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화


console.log(age); // 선언만 호이스팅되며, 초기화 전이라 reference error
let age; // 선언
age = 3; // 초기화

 

 

 

호이스팅 우선순위

변수 선언이 함수 선언보다 높은 우선순위를 가짐

 

var myName = "hi";

function myName() {
  console.log("yuddomack");
}
function yourName() {
  console.log("everyone");
}

var yourName = "bye";

console.log(typeof myName);  // string
console.log(typeof yourName); // string

 

 

 

---

 

정리

 

호이스팅은 선언된 변수와 함수들을 모두 끌어올려 유효 범위 내의 최상단에 선언하는 것을 말합니다.

호이스팅이 발생하는 원인은 함수와 변수의 선언과 초기화가 분리되기 때문인데 var와 let, const 모두 hoisting 대상이지만

var의 경우 변수 선언과 동시에 undefined로 초기화가 일어나기 때문에 선언 전에 참조하더라도 에러가 발생하지 않고 undefined가 출력되지만, let과 const의 경우 선언만 되고 초기화 되지 않았기 때문에 선언 전에 참조 하면 Reference Error가 발생합니다.