[JS] 호이스팅(hoisting)

💭 예상 질문

• 호이스팅이란 무엇인가요?
  • 모든 변수나 함수가 호이스팅되는지 설명해 주세요.
• 자바스크립트에서 호이스팅이 일어나는 이유는 무엇인가요?
  • 실행 컨텍스트와 호이스팅의 관계를 설명해 주세요.
• 호이스팅 관점에서, 함수 선언식과 함수 표현식의 차이점은 무엇인가요?

코드가 실행되기 전에 변수와 함수의 선언이 최상단으로 끌어올려지는 것처럼 동작하는 현상입니다.

하지만 실제로 코드가 끌어올려지는 것이 아니라, 변수와 함수의 선언이 실행 컨텍스트가 생성될 때 메모리에 먼저 등록되는 것입니다.

🔍 추가 내용

✅ var, let, const

• 모두 호이스팅이 이뤄지며, 실행 컨텍스트가 생성될 때 메모리에 올라감
  • var : 최상단으로 선언이 끌어올려지며, 초기화되기 전까지는 undefined 상태로 존재
  • let, const : 호이스팅되지만, TDZ(Temporal Dead Zone) 라는 공간에 저장되어 초기화되기 전까지 참조 불가능
    • 초기화되기 전에 참조하면 ReferenceError 발생

✅ 함수 선언식과 함수 표현식

• 함수 선언식
  • 전체 함수 정의가 호이스팅
  • 함수 자체가 호이스팅되었기 때문에 함수 선언식 위에서도 함수를 참조할 수 있음

함수_선언식();

function 함수_선언식() {
  console.log("함수_선언식");
}

> 함수_선언식

• 함수 표현식 : 변수만 호이스팅. 함수는 할당되기 전까지 사용할 수 없음

함수_표현식();

const 함수_표현식 = function () {
  console.log("함수 표현식");
};

> ReferenceError: Cannot access '함수_표현식' before initialization