JavaScript 자바스크립트 호이스팅(Hoisting) 알아보기

자바스크립트 호이스팅이란?

자바스크립트에서 호이스팅은 코드 실행 전에 변수 및 함수 선언이 메모리에 먼저 올려지는 현상을 의미합니다. 호이스팅은 코드의 동작을 이해하고 예측하는 데 중요한 역할을 합니다.

변수 호이스팅

변수 호이스팅은 자바스크립트에서 변수 선언이 스코프의 맨 위로 끌어올려지는 특성을 나타냅니다. 이것은 변수가 선언되기 전에 사용될 수 있다는 것을 의미합니다. 그러나 변수 초기화(값 할당)는 호이스팅 되지 않으며, 선언만 끌어올려집니다.

var의 호이스팅

var로 선언된 변수는 호이스팅 시 선언과 초기화가 동시에 이루어집니다. 초기화 값이 없으면 undefined로 초기화됩니다.

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

• 위의 코드에서 var x = 5;의 선언 부분이 호이스팅 되어 코드의 맨 위로 올라갑니다.
• 따라서 첫 번째 console.log(x)에서는 변수 x가 선언되었지만 값이 할당되지 않았으므로 undefined가 출력 되고,
• 두 번째 console.log(x)에서는 x가 5로 할당된 상태이기 때문에 5가 출력 됩니다.

let/const의 호이스팅

let과 const는 호이스팅 시 선언만 이루어지고 초기화는 실제 변수가 선언된 라인에서 이루어집니다. 따라서 선언 이전에 변수에 접근하려고 하면 ReferenceError가 발생합니다.

console.log(y); // ReferenceError
let y = 10;
console.log(y); // 10

• let과 const는 호이스팅이 되지만 TDZ(Temporal Dead Zone)에 의해 초기화 전에 접근하면 에러가 발생합니다. TDZ는 변수가 선언된 시점부터 초기화되기 전까지의 구간을 가리킵니다.
• 위의 코드에서 첫 번째 console.log(y)에서는 TDZ에 있기 때문에 초기화되기 전에 접근하려 하면 에러가 발생합니다. 두 번째 console.log(y)에서는 변수 y가 이미 초기화되어 10이 출력 됩니다.

변수 호이스팅 정리

요약하면, var는 선언과 초기화가 함께 호이스팅 되고 초기화되지 않은 변수는 undefined로 처리되지만, let과 const는 선언은 호이스팅 되지만 초기화는 호이스팅 되지 않으며, TDZ에 있는 동안 변수에 접근하려 하면 에러가 발생하게 됩니다.

함수 선언식의 호이스팅

함수 호이스팅은 변수 호이스팅과 유사하게 함수 선언이 코드 실행 전에 메모리에 올려지는 현상을 의미합니다. 함수 선언식 전체가 호이스팅 되며, 따라서 함수를 선언하기 전에도 호출할 수 있습니다.

예제

hello(); // "안녕하세요!"
function hello() {
  console.log("안녕하세요!");
}

• 위 예제에서 hello()가 선언 이전에 호출되었지만, 함수 호이스팅으로 정상적으로 실행됩니다.

함수 표현식의 호이스팅

함수 표현식은 변수에 할당되므로 변수는 호이스팅 됩니다. 하지만 함수 표현식의 경우 변수의 초기화 부분은 호이스팅 되지 않습니다. 즉 함수 자체는 호이스팅 되지 않기 때문에 주의가 필요합니다.

예제

sayHello(); // 에러발생
var sayHello = function() {
  console.log("안녕하세요!");
};

• 위 예제에서 변수 sayHello는 호이스팅 되지만, 함수 표현식 자체는 호이스팅 되지 않아 에러가 발생합니다.

결론

호이스팅은 자바스크립트의 독특한 특성 중 하나로, 변수와 함수 선언이 스코프의 맨 위로 끌어올려지는 특성을 가지고 있습니다. 호이스팅은 코드를 예측하기 어렵게 만들 수 있으므로 코드 작성 시에 변수와 함수의 위치를 신중히 결정하는 것이 중요합니다.