JavaScript에서 변수를 선언하면, 해당 변수는 실행 컨텍스트에 따라 호이스팅(hoisting)되어 처리됩니다. 호이스팅은 변수와 함수 선언문이 해당 스코프의 맨 위로 끌어올려지는 동작을 의미합니다.

전역 변수와 지역 변수는 호이스팅에 따라 초기화되는 방식이 다르기 때문에 그 차이점을 이해하는 것이 중요합니다.

전역 변수(Global Variables) 초기화

전역 변수는 스크립트가 로드될 때 자동으로 초기화됩니다. 이는 변수의 선언 이전에도 변수를 사용할 수 있다는 것을 의미합니다.

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

위의 예시에서, name 변수의 선언보다 앞서 console.log가 호출되었지만, 에러가 발생하지 않고 undefined를 출력합니다. 이후에 name 변수에 값이 할당되고, 다시 console.log를 호출하면 할당된 값인 “John”을 출력합니다.

지역 변수(Local Variables) 초기화

지역 변수는 스코프 내에서 선언되기 전에는 사용할 수 없습니다. 따라서 변수 선언 이전에 변수를 사용하면 에러가 발생합니다.

console.log(age); // ReferenceError: age is not defined
let age = 25;
console.log(age); // 25

위의 예시에서, age 변수의 선언보다 앞서 console.log를 호출하면 ReferenceError가 발생합니다. 변수 선언 이후에는 정상적으로 변수를 사용할 수 있습니다.

결론

JavaScript에서 호이스팅은 변수와 함수 선언문이 스코프의 맨 위로 이동하는 동작을 의미합니다. 이를 이용하여 전역 변수와 지역 변수의 초기화를 수행할 수 있습니다.

전역 변수는 호이스팅에 의해 선언 이전에 사용할 수 있으며, 스크립트가 로드될 때 자동으로 초기화됩니다.

지역 변수는 호이스팅에 의해 선언 이전에 사용할 수 없으며, 선언 이후에 사용할 수 있습니다.