자바스크립트의 끌어올림(호이스팅) 이해하기

• 9/19/2023
• 2 minutes to read

1. 호이스팅(끌어올림)이란?

자바스크립트에서 변수나 함수의 선언을 코드 상에서의 위치와 상관없이 스코프의 최상단으로 끌어올리는 현상을 호이스팅이라고 합니다. 이 현상은 자바스크립트의 실행 컨텍스트의 특징 때문에 발생합니다.

2. 변수의 호이스팅

자바스크립트에서는 var로 변수를 선언할 때, 해당 변수의 선언 부분만 스코프의 최상단으로 끌어올려집니다. 할당은 원래 코드의 위치에서 이루어집니다.

console.log(name); // undefined
var name = 'John';
console.log(name); // John

이 코드는 내부적으로 아래와 같이 동작합니다:

var name; // 선언이 끌어올려짐
console.log(name); // undefined
name = 'John'; // 할당은 원래 위치에서
console.log(name); // John

3. 함수의 호이스팅

함수 선언식은 선언과 함께 정의도 같이 끌어올려집니다. 하지만 함수 표현식은 변수 호이스팅과 같은 방식으로 처리됩니다.

console.log(greet()); // Hello
function greet() {
  return 'Hello';
}

console.log(sayHello); // undefined
var sayHello = function() {
  return 'Hi!';
};
console.log(sayHello()); // Hi!

4. 주의사항

• ES6의 let과 const는 var와 다르게 호이스팅은 되지만, 초기화 되지 않은 상태에서 참조하면 ReferenceError를 발생시킵니다.
• 함수 호이스팅은 함수 선언식에만 적용되며, 함수 표현식에는 적용되지 않습니다.

5. 결론

호이스팅은 자바스크립트의 독특한 특징 중 하나입니다. 이를 이해하고 올바르게 코드를 작성하는 것은 중요하며, 특히 변수나 함수를 사용하기 전에 선언하는 습관을 기르는 것이 좋습니다.