[2024.05.25] Javascript에서 x=10처럼 키워드 없이 값을 할당한 경우(암묵적 전역)

키워드가 없이 변수에 값이 할당된 아래의 실행 결과는 어떻게 될까?

function foo() {
    x = 100;
}
foo();

console.log(x)

 

1. 자바스크립트 엔진은 x 변수가 어디서 선언되었는지 스코프 체인을 통해 검색을 시작
2. foo 함수 내부에서 x 변수의 선언을 검색하나 없음
3. 따라서 foo 함수 컨텍스트의 상위 스코프인 전역 스코프에서 x 변수의 선언을 검색  → 전역 스코프에도 없음
4. 어느 곳에서도 x 변수를 찾을 수 없어 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성함

이와 같은 상황에서 console.log의 결과 값으로 에러를 예측하기 쉽지만, 자바스크립트는 키워드가 없는 선언문도 암묵적으로 전역 객체의 프로퍼티로써 동적 생성하게끔 하여 에러를 발생시키지 않는다. 이를 암묵적 전역(implicit global)이라고 한다.

 

※ 암묵적 전역

다음 예시를 보면 더 명확하게 변수의 선언과 암묵적 전역의 차이를 알 수 있다.

// 브라우저 환경에서 실행함을 가정

var x = "Hello"
let y = "world"
z = "javascript"

console.log(x) // Hello
console.log(y) // world
console.log(z) // javascript

console.log(window.x) // Hello
console.log(window.y) // undefined
console.log(window.z) // javascript

예시를 보면 암묵적 전역은 전역 변수로 사용된 var와 결과값이 같다. var 키워드로 선언한 전역 변수나 전역 함수, 암묵적 전역의 경우 모두 전역 객체 window의 프로퍼티가 되기 때문이다. 때문에 window.x처럼 객체로서 호출해도 같은 값이 출력되며, let과 const의 경우 window 객체의 프로퍼티가 아니므로 window.y와 같이 호출할 경우 undefined가 출력된다.

 

암묵적 전역은 실수를 자바스크립트 엔진이 바로 잡아주는 것처럼 보일 수 있으나, 개발자의 의도와 상관없이 발생할 경우 var의 호이스팅처럼 오류를 발생시키는 원인이 될 가능성이 높기 때문에 사용을 피해야한다.