[Javascript] Javascript 호이스팅이란?

 

1. 호이스팅이란?

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 즉, 코드가 실행되기 전 자바스크립트 엔진이 변수와 함수의 선언을 메모리에 할당합니다. 이로 인해 변수와 함수가 선언 되기 전 호출되더라도 에러가 발생하지 않습니다.

---

2. 호이스팅의 작동 방식

• 변수 호이스팅:
  
  • var로 선언된 변수는 선언만 호이스팅되고, 초기화는 코드 실행 시점에서 이루어짐, 따라서 변수 선언 이전 접근할 경우 undefined를 반환함
  • let과 const로 선언된 변수는 호이스팅되지만, "일시적 사각지대(Temporal Dead Zone)"이 있어 초기화 전에는 접근할 수 없음
• 함수 호이스팅:
  • 함수 선언문은 전체가 호시팅되며, 함수 선언 이전에 호출해도 정상적으로 작동
  • 함수 표현식은 변수와 동일하게 호스팅되므로, 함수 표현식이 초기화되기 전 호출할 수 X

---

사용 예제

• 변수 호이스팅

console.log(x); // undefined
var x = 5;
console.log(x); // 5

 

위 코드는 다음과 같이 해석됩니다.

var x; // 변수 선언이 호이스팅
console.log(x); // undefined 
var x = 5; // 초기화
console.log(x); // 5

• let과 const 호이스팅

console.log(x); // Syntax ErrorReferenceError: Cannot access 'x' before initialization
let x = 10;

 

let으로 선언된 변수는 초기화전 접근할 수 없으므로 ReferenceError가 발생합니다.

• 함수 호이스팅

console.log(Person()); // Yolk!

function Person() {
    return "Yolk!";
}

 

위 코드는 정상적으로 작동합니다. 함수 선언이 호이스팅되어, 호출 전 정의된 함수로 인식됩니다.

• 함수 표현식 호이스팅

console.log(myFunc()); // TypeError: myFunc is not a function


var myFunc = function() {
    return "Hi!";
}

 

이 경우, myFunc는 변수로 호이스팅되지만, 초기화되지 않아 TypeError가 발생합니다.

---

요약

• 호이스팅을 이해하면 자바스크립트의 변수와 함수 사용 시점을 명확히 할 수 있음
• 예기치 않은 에러를 방지하는 데 도움을 줌