JavaScript에서 전역 변수가 정의되지 않은 값을 제공하는 이유

JavaScript는 가장 오래된 프로그래밍 언어 중 하나입니다. 브라우저에서 컴파일되고 실행되기 때문에 작동 방식이 C나 Java와 같은 시스템 수준 언어와 약간 다릅니다.

JavaScript 프로그래밍 언어의 동작은 많은 초보자 프로그래머에게 약간 이상할 수 있습니다. JavaScript 언어를 완전히 이해하려면 이벤트 루프, 버블링 및 캡처, 호출 스택 등과 같은 이 언어의 다양한 개념을 완전히 이해해야 합니다.

이 기사에서 우리는 호이스팅(hoisting)이라는 JavaScript 프로그래밍 언어의 개념 중 하나에 대해 배울 것입니다. 전역 변수가 정의되지 않은 값을 제공하는 이유를 알아보기 전에 먼저 JavaScript의 호이스팅 개념을 이해합시다.

호이스팅의 개념과 JavaScript에서 전역 변수가 정의되지 않은 값을 제공하는 이유

호스팅은 JavaScript 코드에 있는 모든 변수 선언이 제거되고 컴파일 시간 동안 undefined 값이 할당되는 JavaScript의 개념입니다. 유사하게, JavaScript 내부의 모든 함수 선언은 전역 범위 내에서 꺼내어 저장됩니다.

이것을 가변 호이스팅이라고 합니다. 이는 변수 또는 함수 범위가 지역 또는 전역인지 여부와 관계가 없습니다.

이제 JavaScript에서 호스팅 개념이 작동하는 방식과 JavaScript의 변수에 정의되지 않은 값을 할당하는 방법을 이해하겠습니다. 아래 코드 예제에서 abc라는 전역 변수와 a() 함수를 정의했습니다.

let abc;
function a() {
  console.log('This is a function...');
}
console.log(abc);
debugger
abc = 5;
console.log(abc);

출력:

undefined
5

여기서 변수 abc를 초기화하기 전에도 사용할 수 있다는 사실을 눈치채셨나요? 이것이 어떻게 가능한지 생각해 본 적이 있습니까?

이것은 다른 프로그래밍 언어에서는 허용되지 않습니다. 이런 일이 일어나는 이유는 게양 때문입니다.

위의 코드는 첫 번째 콘솔 문을 나타냅니다. 여기에서 디버거를 추가하는 것은 Chrome 개발 도구 내부의 변수 상태를 확인하는 데 중요합니다.

JavaScript 코드를 스캔한 후 JavaScript 컴파일러는 모든 변수와 함수를 스캔하여 전역 범위에 추가하고 abc 변수에 undefined를 할당합니다.

그런 다음 JavaScript 엔진은 코드를 한 줄씩 실행하기 시작하고 abc 변수를 찾는 즉시 일부 값(이 경우 5)이 할당됩니다. 전역 범위의 변수 abc에 5를 할당합니다.

아래 출력은 변수에 5 값이 할당된 후 두 번째 콘솔 문을 나타냅니다.

이것이 변수와 함수 호이스팅의 개념이 작동하는 방식입니다. 이것이 JavaScript의 전역 변수가 undefined 값을 제공하는 실제 이유입니다.