호이스팅은 변수와 함수를 대상으로 실행된다.
JS엔진이 변수를 생성할 때에 3단계의 방식을 거친다.
- 선언 단계(Declaration Phase) – 변수를 변수 객체에 등록하고, 이 변수 객체는 스코프가 참조하는 대상이 된다.
- 초기화 단계(Initialization Phase) – 변수 객체에 등록된 변수를 위한 공간을 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.
- 할당 단계(Assignment Phase) – undefined로 초기화된 변수에 실제 값을 할당한다.
자바스크립트에서 값의 변경은 재할당을 통해서만 이루어지며, 값을 재할당 할 때 새로운 메모리 공간을 확보하고 해당 메모리에 값을 할당한다.
호이스팅이란, 변수와 함수의 선언을 모두 끌어 올려서 함수의 유효 범위에서 가장 먼저 선언하는 것을 말한다.
여기서 주의해야 할 점은, var로 선언한 변수가 호이스팅되는 경우 변수를 선언과 초기화를 같이 하지만, let과 const로 선언한 변수의 경우 변수를 초기화 하지 않는다.
변수 호이스팅의 예)
var varHoisting; // 변수 선언
console.log(varHoisting); // undefined -> 변수가 undifined로 초기화되어 undefined로 출력
varHoisting = "hoisting"; // 변수에 값 할당
console.log(varHoisting); // "hoisting" 변수에 할당된 값을 재출력
변수 호이스팅의 경우,
변수의 범위에 따라 다르게 끌어올려지는데
전역범위(global scope)의 경우, 스크립트 단위의 최상단으로 호이스팅되며,
함수범위(function scope)의 경우 해당 함수의 최상단에 호이스팅된다.
함수 호이스팅의 예)
console.log(exampleFun()); // "hoisting" 함수의 리턴값이 출력
function exampleFun() {
return("hoisting");
};
- https://developer.mozilla.org/ko/docs/Glossary/Hoisting
- https://dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/
Leave a Reply