본문 바로가기
javascript/모던 자바스크립트 Deep Dive

호이스팅

by yongfront 2024. 2. 2.
반응형
SMALL

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 소스 코드 내에서 물리적 위치에 관계없이 해당 스코프(scope)의 맨 위로 끌어올려지는 동작을 의미합니다. 이 동작은 JavaScript 엔진에 의해 실행되며 코드를 해석하고 실행하기 전에 수행됩니다.

호이스팅은 다음 두 가지 주요 요소에서 발생합니다:

  1. 변수 호이스팅(Variable Hoisting): 변수 선언(var 키워드로 선언한 변수)이 해당 스코프의 맨 위로 끌어올려지는 현상입니다. 변수 선언은 초기화(값 할당) 단계까지 끌어올려지지만, 초기화는 호이스팅되지 않습니다. 즉, 변수가 선언되어 있지만 초기화되기 전에 접근하면 **undefined**가 반환됩니다.

예제:

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

위의 코드에서 var x 선언문은 호이스팅에 의해 코드 맨 위로 이동하며, 따라서 변수 **x**는 선언되었지만 초기화되지 않았으므로 **undefined**가 출력됩니다.

  1. 함수 호이스팅(Function Hoisting): 함수 선언문(function 키워드로 정의한 함수)도 해당 스코프의 맨 위로 끌어올려집니다. 함수 선언문은 변수 호이스팅과는 다르게 초기화 단계까지 끌어올려지므로 함수를 선언하기 전에 호출할 수 있습니다.

예제:

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

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

위의 코드에서 foo 함수가 선언되기 전에 호출되었지만 함수 호이스팅에 의해 정상적으로 동작합니다.

함수 표현식과 let, **const**로 선언한 변수는 호이스팅이 발생하지 않거나 다르게 동작하므로 주의가 필요합니다. 호이스팅은 코드를 이해하고 디버그하는 데 중요한 개념이며, JavaScript의 동작을 정확히 이해하기 위해서는 이를 고려해야 합니다.

728x90
반응형
LIST