호이스팅


JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.



→ 코드가 실행되기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상

  • 코드 실행 전에 변수 및 함수 선언이 메모리에 할당되어 해당 스코프 내에서 사용될 수 있도록
  • 실제 할당은 선언 위치에 따라 결정



발생 이유

→ 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문

  1. 생성 단계:

    • 변수와 함수 선언을 위한 메모리 공간 할당

  2. 실행 단계:

    • 코드 순서대로 실행
    • 할당 및 실제 변수 값 결정



변수 호이스팅

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

→ 함수 스코프 : 함수 내에서 선언된 경우 함수 내에서만 유효한 범위를 가짐
⇒ 해당 스코프 내에서 변수와 함수를 어디서든 사용 가능

→ 변수가 호이스팅되어 선언 부분이 스코프 맨 위로 끌어올려지며, 초기화되지 않은 경우 undefined로 초기화 


console.log(y); // ReferenceError: Cannot access 'variable2' before initialization
let y = 20;
console.log(z); // ReferenceError: Cannot access 'variable3' before initialization
const z = 30;

→ 블록 스코프 : 블록 내에서 선언된 경우 블록 내에서만 유효한 범위를 가짐
⇒ 초기화되기 전까지 사용 불가능

→ 변수가 호이스팅되어 선언 부분이 스코프 맨 위로 끌어올려지지만, 초기화되기 전에 해당 변수에 접근하면 ReferenceError가 발생

→ 선언과 초기화가 분리되지 않도록 주의



함수 호이스팅

sayHello(); // "Hello, world!"

function sayHello() {
    console.log("Hello, world!");
}

함수 호이스팅 → 함수를 선언하기 이전에 호출해도 문제 없이 실행


sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello, World!");
};

함수 표현식의 경우 변수의 호이스팅이 발생하지만 실제 함수의 할당은 호이스팅되지 않기 때문




references
👉 https://imagineu.tistory.com/7