JavaScript의 Hoisting 이란?

JavaScript

JavaScript의 Hoisting은 무엇인지 알아보고 사용 방법에 대해서 알아보자.

JavaScript의 Hoisting 이란?

Hoisting 이란 무엇인가?

Hoisting이란 JavaScript에서 변수, 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 의미한다. 이는 실제로 코드가 이동하는 것은 아니지만, JavaScript 엔진이 코드를 실행하기 전에 컴파일 단계에서 메모리 공간을 미리 할당하는 방식 때문에 발생한다.

즉, JavaScript 엔진은 코드를 실행하기 전에 코드 전체를 먼저 스캔하여 모든 선언(변수, 함수 등)을 찾아 메모리에 저장하는 과정을 거친다. 이러한 메커니즘 때문에 선언 전에 변수나 함수를 참조할 수 있게 되는 것이다.

Hoisting의 동작 방식

  1. 변수 Hoisting
console.log(myVar); // undefined
var myVar = 10;
console.log(myVar); // 10

위 코드는 다음과 같이 해석된다.

var myVar;
console.log(myVar); // undefined
myVar = 10;
console.log(myVar); // 10
  • 변수 선언 (var)은 Hoisting되지만, 할당은 Hoisting되지 않는다.
  • 따라서 선언 전에 변수를 참조하면 undefined가 출력된다.
  1. 함수 Hoisting
sayHello(); // "Hello, World!"
 
function sayHello() {
  console.log("Hello, World!");
}

위 코드는 다음과 같이 해석된다.

function sayHello() {
  console.log("Hello, World!");
}
 
sayHello(); // "Hello, World!"
  • 함수 선언문(function declaration)은 전체가 Hoisting되기 때문에, 선언 이전에 호출이 가능하다.
  1. 함수 표현식의 Hoisting
sayHi(); // TypeError: sayHi is not a function
 
var sayHi = function () {
  console.log("Hi, World!");
};

위 코드는 다음과 같이 해석된다.

var sayHi;
sayHi(); // TypeError: sayHi is not a function
sayHi = function () {
  console.log("Hi, World!");
};
  • 함수 표현식은 변수 선언만 Hoisting되고 함수 할당은 Hoisting되지 않는다.
  • 따라서 선언 전에 호출하면 TypeError가 발생한다.
  1. 화살표 함수의 Hoisting
sayHello(); // TypeError: sayHello is not a function
 
const sayHello = () => {
  console.log("Hello, World!");
};
  • 화살표 함수도 함수 표현식과 동일하게 변수 선언만 Hoisting되고 함수 할당은 Hoisting되지 않는다.
  • 게다가 const를 사용할 경우 TDZ의 영향을 받아 ReferenceError가 발생한다.
  1. let과 const의 Hoisting

let과 const로 선언된 변수도 Hoisting된다. 그러나 Temporal Dead Zone(TDZ, 일시적 사각지대)이라는 개념 때문에 선언 전에 변수를 참조하려고 하면 에러가 발생한다.

console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;
 
const myConst = 20;
console.log(myConst); // 20

TDZ는 변수가 선언된 위치부터 초기화되기 전까지의 구간을 의미한다. 이 구간에서 변수에 접근하려고 하면 ReferenceError가 발생한다. 이는 let과 const 변수가 선언되기 전에 사용되는 것을 방지하여 코드의 안정성을 높이는 데 도움이 된다.

Hoisting을 올바르게 사용하는 방법

Hoisting은 JavaScript의 기본 동작이지만, 코드의 가독성을 해치거나 예기치 않은 버그를 발생시킬 수 있다. 따라서 Hoisting으로 발생할 수 있는 문제를 방지하려면 아래와 같은 원칙을 따르는 것이 좋다.

  1. 변수와 함수의 선언 및 초기화는 항상 코드 상단에 위치시켜서 Hoisting으로 인한 혼란을 줄인다.
let myVar = 10;
function sayHello() {
  console.log("Hello, World!");
}
  1. let과 const를 사용해서 변수 범위를 명확히 하고, 잠재적인 오류를 방지한다.
let myVar = 10;
const myConst = 20;
  1. 함수 선언 대신 함수 표현식이나 화살표 함수를 사용하면 Hoisting으로 인한 함수 호출 순서 문제를 방지할 수 있다.
const sayHello = function () {
  console.log("Hello, World!");
};
sayHello();
 
// 또는 화살표 함수 사용
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
greet("JavaScript");
  1. 엄격 모드('use strict')를 사용하면 선언되지 않은 변수를 사용할 때 오류가 발생하여 더 안전한 코드를 작성할 수 있다.
"use strict";
x = 10; // ReferenceError: x is not defined

Hoisting을 이해하면 JavaScript의 실행 방식에 대한 이해도가 높아지고, 코드 작성시 발생할 수 있는 버그를 예방할 수 있다. 또한 모던 JavaScript에서는 var보다 let과 const를 사용하는 것이 권장되며, 이를 통해 더 예측 가능하고 안전한 코드를 작성할 수 있다.