JavaScript 변수 호이스팅과 함수 호이스팅

 

 

1. 변수 호이스팅(Variable Hoisting)

 

변수 호이스팅은 자바스크립트에서 변수를 선언할 때, 해당 변수가 코드 어디에 있든 선언 부분이 최상단으로 끌어올려지는 동작을 말한다.

변수 선언은 코드의 최상단으로 끌어올려지기 때문에 변수를 선언하기 전에 해당 변수를 사용해도 오류가 발생하지 않는다. 그러나 할당(초기화) 부분은 호이스팅되지 않으므로 변수를 선언하고 초기화하기 전에 해당 변수를 사용하면 undefined가 반환된다.

 

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

 

위 코드는 실제로 아래와 같이 동작한다.

var x; // 변수 선언이 호이스팅되어 최상단으로 이동
console.log(x); // undefined
x = 5; // 변수 초기화
console.log(x); // 5

 

 

 

반응형

 

 

2. 함수 호이스팅(Function Hoisting)

 

함수 선언도 변수와 마찬가지로 호이스팅된다. 함수 표현식에서는 함수의 참조가 끌어올려지지만, 함수의 할당은 호이스팅되지 않는다.

 

sayHello(); // "Hello, world!"

function sayHello() {
  console.log("Hello, world!");
}

 

 

함수 표현식에서는 다르게 동작한다.

sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello, world!");
};

 

- sayHello 변수는 호이스팅되지만, 해당 변수에 할당된 함수 표현식은 호이스팅되지 않아서 함수를 호출할 때 에러가 발생한다.

 

 

변수와 함수 선언이 호이스팅되므로 주의해 코드를 작성해야 한다.

일반적으로 코드의 가독성을 높이고 예상치 못한 동작을 방지하기 위해 변수와 함수 선언은 해당 스코프의 최상단에서 명시적으로 작성하는 것이 좋다.