자바스크립트에서 호이스팅(Hoisting)은 코드 실행 전에 변수 및 함수 선언을 메모리에 “끌어올리는” 현상을 의미합니다.

이러한 동작은 개발자가 변수 및 함수 선언을 코드의 어디에 작성하든지, 해당 선언들이 스코프의 최상단으로 끌어올려진다는 의미입니다. 하지만, 실제로 변수의 할당은 그 위치에 따라 결정됩니다.

변수 호이스팅(Variable Hoisting)

console.log(name); // undefined
var name = "John";

위의 예제에서 console.log(name)은 변수 name을 선언하기 전에 호출됩니다. 하지만 자바스크립트에서는 변수 선언이 최상단으로 끌어올려지기 때문에 에러가 발생하지 않고 undefined가 출력됩니다.

아래는 자바스크립트 엔진이 실제로 코드를 해석하는 방법입니다.

var name; // 변수 선언이 호이스팅 됨
console.log(name); // undefined
name = "John";

결과적으로 변수는 선언부가 호이스팅되지만, 정의(할당)는 그 위치에 따라 이루어집니다.

함수 호이스팅(Function Hoisting)

greet(); // "Hello!"

function greet() {
  console.log("Hello!");
}

위의 예제에서 함수 greet()은 호출(greet())되기 전에 정의되었습니다. 이는 자바스크립트에서 함수 선언이 호이스팅되기 때문에 가능한 동작입니다.

아래는 자바스크립트 엔진이 실제로 코드를 해석하는 방법입니다.

function greet() {
  console.log("Hello!");
}

greet(); // "Hello!"

따라서 함수 선언문은 호이스팅에 의해 스코프의 최상단으로 이동되며, 이후에 어디에서든지 호출할 수 있습니다.

호이스팅 주의사항

변수와 함수 선언문만 호이스팅 됨

호이스팅은 변수와 함수 선언문에만 적용됩니다. 변수 할당과 함수 표현식에는 호이스팅이 적용되지 않으므로 주의해야 합니다.

console.log(x); // ReferenceError: x is not defined
let x = 10;

위의 예제에서 let 키워드로 선언된 변수 x는 호이스팅되지 않습니다. 따라서 변수를 선언하기 전에 호출하면 ReferenceError가 발생합니다.

최상단에 선언하지 않아도 호이스팅 됨

변수와 함수 선언문은 스코프 내에서 어디서든지 호이스팅됩니다. 따라서 최상단에 선언하지 않아도 호이스팅되는 동작을 주의해야 합니다.

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

function bar() {
  console.log("Hello from bar!");
}

foo(); // "Hello from foo!"
bar(); // "Hello from bar!"

var foo = function() {
  console.log("Hello from foo!");
};
var bar = function() {
  console.log("Hello from bar!");
};

위의 예제에서 함수 선언문은 호이스팅되어 어디서든지 호출할 수 있으므로, 변수 할당문 이전에 호출해도 정상적으로 동작합니다. 하지만 함수 표현식은 호이스팅되지 않으므로 변수 할당문 이전에 호출하면 TypeError가 발생합니다.

결론

자바스크립트의 호이스팅은 개발자들이 변수와 함수를 선언하는 위치에 제한을 두지 않는 장점을 가지고 있습니다. 하지만 호이스팅 동작을 이해하지 못하면 예기치 않은 결과를 초래할 수 있으므로, 항상 정확히 이해하고 사용해야 합니다.

자바스크립트 호이스팅은 초보 개발자들에게 혼란을 줄 수 있으며, 가독성과 유지보수성을 저하시킬 수도 있습니다. 따라서 변수와 함수를 선언한 후에 사용하는 습관을 들이는 것이 좋습니다.