[자바스크립트] 호이스팅 (Hoisting)

호이스팅(Hoisting)은 자바스크립트에서 변수(var)와 함수(function)선언이 소스코드의 상단으로 옮겨지는 것을 의미합니다. 즉, 변수와 함수 선언이 코드 실행 전에 먼저 처리되어 해당 스코프의 최상단에 위치하게 됩니다.

다만, 호이스팅은 변수의 할당과 함수의 정의를 옮기는 것이지, 변수의 초기화나 함수의 호출을 옮기는 것은 아닙니다. 이는 변수와 함수가 소스코드에서 실제로 작성된 위치에서 실행됩니다.

 

 

1. 호이스팅의 3가지 유형

자바스크립트의 호이스팅은 아래와 같은 세 가지 유형으로 구분할 수 있습니다.

1) 변수 호이스팅 (Variable Hoisting)

 

변수 선언문(var)이 소스코드에서 상단으로 옮겨지는 것을 의미합니다. 선언만 되었을 뿐 초기화는 이루어지지 않았기 때문에, 변수를 선언하기 전에 호출하면 undefined 값을 반환합니다.

 

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

 

2) 함수 호이스팅 (Function Hoisting)

 

함수 선언문(function)이 소스코드에서 상단으로 옮겨지는 것을 의미합니다. 함수 선언문은 변수 호이스팅과는 달리 초기화까지 동시에 이루어지므로, 함수를 선언하기 전에 호출해도 정상적으로 작동합니다.

 

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

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

 

3) 클래스 호이스팅 (Class Hoisting)

ES6부터 추가된 클래스(class) 선언문도 함수와 유사하게 호이스팅됩니다. 클래스 선언문도 변수와 마찬가지로 초기화되지 않은 상태이므로, 클래스를 선언하기 전에 호출하면 ReferenceError가 발생합니다.

 

let p = new Person("John"); // ReferenceError

class Person {
  constructor(name) {
    this.name = name;
  }
}

 

종합적으로, 호이스팅은 자바스크립트에서 변수와 함수의 선언이 상단으로 옮겨지는 것을 의미합니다. 하지만 변수는 초기화가 이루어지지 않은 상태로, 함수와 클래스는 초기화까지 동시에 이루어집니다. 따라서 호이스팅을 이해하지 못하고 사용하면 예기치 않은 동작이 발생할 수 있으므로, 주의해서 사용해야 합니다.

 

 

2. 원인

 

호이스팅의 원인은 자바스크립트의 변수와 함수 선언 방식과 스코프 체인(Scope Chain) 동작 방식에 있습니다.

변수와 함수는 모두 자바스크립트의 스코프(Scope) 개념에 따라서 동작합니다. 스코프란 변수와 함수가 정의된 영역으로, 자바스크립트에서는 함수 레벨 스코프(Function Level Scope)와 블록 레벨 스코프(Block Level Scope) 두 가지 방식을 사용합니다.

함수 레벨 스코프에서는 함수 내부에서 선언된 변수는 함수 내부에서만 유효하며, 함수 외부에서는 접근할 수 없습니다. 이에 반해, 블록 레벨 스코프에서는 if, for, while과 같은 블록 내에서 선언된 변수는 블록 내에서만 유효합니다.

호이스팅은 이러한 스코프 체인 동작 방식 때문에 발생합니다. 자바스크립트 엔진은 스코프를 생성할 때, 변수와 함수 선언을 소스코드에서 가장 상단으로 이동시키는 것이 일반적인 동작 방식입니다. 이렇게 하면, 변수와 함수가 해당 스코프에서 유효한 범위를 가지게 됩니다.

하지만, 이 때문에 변수와 함수가 선언된 위치와 상관없이, 스코프의 맨 위로 올라가게 되어 호이스팅이 발생하게 됩니다. 이렇게 올라간 변수와 함수는 이후에 코드에서 해당 변수와 함수를 사용해도 문제없이 인식되는 것입니다.