JavaScript의 Hoisting 이란?

JavaScript

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

JavaScript의 Hoisting 이란?

Hoisting 이란 무엇인가?

Hoisting이란 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!"
  • 함수 선언은 완전히 Hoisting되기 때문에, 선언 이전에 호출이 가능하다.
  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

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();

Hoisting을 이해하면 자바스크립트의 실행 방식에 대한 이해도가 높아지고, 코드 작성시 발생할 수 있는 버그를 예방할 수 있다.