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

  • 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의 letconstvar와 다르게 호이스팅은 되지만, 초기화 되지 않은 상태에서 참조하면 ReferenceError를 발생시킵니다.
  • 함수 호이스팅은 함수 선언식에만 적용되며, 함수 표현식에는 적용되지 않습니다.

5. 결론

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

VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다. www.VisualAcademy.com
박용준 강사의 모든 동영상 강의는 데브렉에서 독점으로 제공됩니다. www.devlec.com