호이스팅(hoisting)이란?

호이스팅(hoisting)이란?

• 변수 및 함수 선언문을 스코프 내의 최상위로 끌어올려서 실행하는 현상
• 뜻 그대로 가져오면, 끌어올린다라고 직역.

---

함수 선언문 vs 함수 표현식

1. 함수 선언문(Function Declarations)

   • 변수 선언처럼, 키워드 function으로 시작.

     function func() {...}
     

   • 이 함수 선언은 나중을 위해 저장되고, 호출되며 실행됨.

2. 함수 표현식(Function Expression)

   • 함수를 표현식을 사용하여 정의하며, 익명 함수, 선언적 함수로 나뉨.

   • 익명 함수: 이름이 없어서, 변수에 할당해서 사용.

     let 변수명 = function () {...}
     

   • 선언적 함수: 이름이 있어, 호출 시에도 함수명 사용 가능.

     function 함수명() {...}
     

---

변수 호이스팅

console.log(num);
var num = 2;

위와 같이 선언되기 전에, 참조하여 출력하는 상황에서 변수 호이스팅이 발생.

• var키워드로 선언한 변수는 초기화와 선언이 동시에 일어나므로, undefined를 출력.

  undefined
  

• let, const키워드로 선언한 변수는 선언만 일어나서 호이스팅, Reference Error를 출력.

  Reference Error
  

---

함수 선언문 호이스팅

printName();
printName2();

function printName() {
  console.log("재건");
} // 함수 선언문

var printName2 = function () {
  console.log("재건");
}; // 함수 표현식

위와 같이 선언 전에, 함수를 실행하는 상황에서 함수 선언문 호이스팅이 발생.

• 함수 선언문은 선언과 정의가 함께 호이스팅, 따라서 정상적으로 출력.

  재건
  

• 함수 표현식은 변수 호이스팅처럼, 값이 나중에 할당되어 에러 출력.

  printName is not a function
  

---