[javascript] 호이스팅을 이해하여 전역 변수와 지역 변수의 선언을 적절히 처리하기

05 Dec 2023

javascript

JavaScript에서 호이스팅(Hoisting)은 코드에서 변수 및 함수 선언을 맨 위로 이동시키는 동작을 말합니다. 이를 통해 변수와 함수를 선언하기 전에 사용할 수 있게 됩니다. 하지만 호이스팅은 변수의 초기화 과정까지 영향을 주지는 않습니다.

전역 변수와 지역 변수의 선언

전역 변수는 어떤 함수나 블록 안에서 선언되지 않은 범위에서 선언된 변수를 말합니다. 이러한 변수는 스크립트 어디에서나 접근할 수 있습니다.

var globalVariable = 10;

function test() {
   console.log(globalVariable);
}

test(); // 10이 출력됨

지역 변수는 함수나 블록 안에서 선언되어 해당 함수나 블록 안에서만 접근할 수 있는 변수를 말합니다.

function test() {
   var localVariable = 20;
   console.log(localVariable);
}

test(); // 20이 출력됨
console.log(localVariable); // ReferenceError: localVariable is not defined

호이스팅의 동작

변수와 함수의 선언은 코드의 맨 위로 이동되지만, 할당은 그대로 남아 있습니다. 이로 인해 변수를 선언하기 전에 사용하면 undefined가 할당됩니다.

console.log(a); // undefined
var a = 10;

함수 선언문은 선언과 동시에 초기화되므로, 함수를 선언하기 전에 호출해도 동작합니다.

test(); // "Hello, World!"가 출력됨
function test() {
   console.log("Hello, World!");
}

반면, 함수 표현식은 호이스팅되지 않으므로 선언하기 전에 호출하면 에러가 발생합니다.

test(); // TypeError: test is not a function
var test = function() {
   console.log("Hello, World!");
}

호이스팅에 대한 주의점

호이스팅은 JavaScript의 동작 원리 중 하나이므로 이에 대해 이해하는 것이 중요합니다. 변수와 함수를 해당 스코프의 맨 위에서 선언하는 것이 좋습니다. 가독성과 코드의 일관성을 유지하기 위해 변수의 스코프는 최대한 좁게 유지하는 것이 좋습니다.

또한, 호이스팅의 동작을 예측하기 위해 함수 선언문과 함수 표현식의 차이를 이해하는 것도 중요합니다.

결론

호이스팅은 JavaScript에서 변수와 함수 선언을 맨 위로 이동시키는 동작입니다. 전역 변수와 지역 변수의 선언을 적절하게 처리하기 위해 코드를 작성할 때, 호이스팅의 동작을 고려하여 변수와 함수를 선언하는 위치를 결정해야 합니다.

참고 자료:

MDN Web Docs: Hoisting