#4 자바스크립트 호이스팅(Hoisting)

자바스크립트 호이스팅이란 무엇일까요?

자바스크립트의 호이스팅(Hoisting)은 변수나 함수 선언이 실제 코드에서 작성된 위치와 상관없이 코드의 맨 위로 끌어올려지는 것처럼 동작하는 특징을 말합니다. 즉, 변수나 함수를 선언하기 전에 사용하더라도 에러가 발생하지 않고, 선언된 것처럼 동작하는 현상을 의미합니다.

왜 호이스팅이 발생할까요?

자바스크립트 엔진은 코드를 실행하기 전에 먼저 코드 전체를 스캔하여 변수와 함수를 메모리에 할당합니다. 이 과정에서 변수와 함수 선언이 코드의 맨 위로 끌어올려지는 것처럼 보이는 효과가 발생하는 것입니다.

호이스팅의 종류와 예제

1. 변수 호이스팅

• var 키워드: var로 선언된 변수는 호이스팅이 되며, 선언 전에 사용하면 undefined 값을 가집니다.

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

   

   
• let과 const 키워드: let과 const로 선언된 변수는 호이스팅이 되지만, 변수를 초기화하기 전에 사용하면 ReferenceError가 발생합니다. 이를 Temporal Dead Zone(TDZ)라고 합니다.

  console.log(y); // ReferenceError: Cannot access 'y' before initialization
  let y = 20;

   

   

2. 함수 호이스팅

• 함수 선언은 항상 호이스팅됩니다.

  console.log(sum(3, 4)); // 7 출력
  function sum(a, b) {
      return a + b;
  }

   

   

호이스팅의 장단점

• 장점: 코드를 어디에 작성하더라도 함수를 호출할 수 있습니다.
• 단점: 예상치 못한 결과를 초래할 수 있습니다. 특히, var 키워드와 함께 사용할 때 변수의 값이 undefined로 초기화되어 버그를 유발할 수 있습니다.

호이스팅을 안전하게 사용하는 방법

• let과 const 사용: var 대신 let과 const를 사용하여 변수를 선언하면 호이스팅으로 인한 문제를 줄일 수 있습니다.
• 함수 선언 위치 신경쓰기: 함수 선언은 코드의 맨 위에 작성하는 것이 좋습니다.
• 호이스팅을 이해하고 주의하기: 호이스팅의 특징을 이해하고, 코드를 작성할 때 항상 주의해야 합니다.