자바스크립트에서 호이스팅은 변수와 함수 선언이 스코프의 맨 위로 옮겨지는 것을 의미합니다. 이는 코드 실행 전에 변수 및 함수를 초기화하는 것을 가능하게 합니다. 하지만 호이스팅은 개발자가 의도하지 않은 동작을 일으킬 수도 있으므로 주의해야 합니다.

전역 변수의 호이스팅

전역 변수는 스크립트의 어디에서든 접근할 수 있는 변수입니다. 자바스크립트에서 전역 변수는 스크립트가 로드되는 동안 계속해서 유지되며, 호이스팅의 영향을 받습니다. 따라서 전역 변수를 선언하기 전에 접근하면 undefined로 평가됩니다.

console.log(myVar); // undefined
var myVar = 'Hello, world!';
console.log(myVar); // 'Hello, world!'

위의 코드에서 myVar 변수를 선언하기 전에 console.log()로 접근하면 undefined가 출력됩니다. 이는 호이스팅에 의해 myVar가 정의되기 전에 접근하였기 때문입니다. 하지만 myVar 변수를 선언한 이후에 접근하면 원하는 값인 ‘Hello, world!’가 출력됩니다.

지역 변수의 호이스팅

지역 변수는 함수 내에서 선언된 변수로서, 해당 함수 내에서만 접근할 수 있습니다. 함수 내에 선언된 변수는 호이스팅의 영향을 받지만, 함수 실행 시점에서 초기화됩니다. 따라서 지역 변수를 선언하기 전에 접근하면 ReferenceError가 발생합니다.

function myFunction() {
  console.log(localVar); // ReferenceError: localVar is not defined
  var localVar = 'I am a local variable!';
  console.log(localVar); // 'I am a local variable!'
}

위의 코드에서 함수 myFunction() 내에서 localVar 변수를 선언하기 전에 console.log()로 접근하면 ReferenceError가 발생합니다. 이는 호이스팅에 의해 localVar 변수가 존재하지 않는 상태에서 접근하였기 때문입니다. 하지만 localVar 변수를 선언한 이후에 접근하면 원하는 값인 ‘I am a local variable!’가 출력됩니다.

결론

호이스팅은 자바스크립트에서 변수 및 함수 선언이 스코프의 맨 위로 옮겨지는 동작을 일컫습니다. 따라서 전역 변수와 지역 변수 모두 호이스팅의 영향을 받으며, 선언 전에 접근하면 undefined 또는 ReferenceError가 발생할 수 있습니다. 이러한 동작을 이해하고 적절하게 활용하여 자바스크립트 코드를 작성하는 것이 중요합니다.

이 글은 MDN web docs를 참고하여 작성되었습니다.