전역 객체

전역객체를 이용하면 어디서든 접근가능한 변수나 함수를 만들 수 있다.

전역 객체는 언어자체나 호스트 환경에 기본으로 내장되어있는 경우가 많은데,

자바스크립트에서는 브라우저에서는 window, node에서는 global 이라고 부른다.

그런데 각 환경에 따라 이렇게 이름이 다른것을 표준화하기 위해서 globalThis를 참조하면 각 환경에 맞는 전역객체를 참조한다.

globalThis = window , global

 

그래서 흔히, 선언하지도 않고 사용하는 함수, 변수들은 전역객체의 프로퍼티이다.

alert("Hello");
// 위와 동일하게 동작합니다.
window.alert("Hello");

 

브라우저에서는 let,const가 아닌 var로 선언한 전역 함수나, 변수는 전역객체의 프로퍼티가 된다.

var gVar = 5;

alert(window.gVar); // 5 (var로 선언한 변수는 전역 객체 window의 프로퍼티가 됩니다)

하지만 하위 호환성을 위해서 남아있는것이지 사용을 권장하진 않는다.

모던 자바스크립트에서는 모듈을 사용하는데, 이방식을 지원하지 않는다.

 

아래처럼 let으로 선언한 변수는 전역객체의 프로퍼티가 되지 않는다.

let gLet = 5;

alert(window.gLet); // undefined (let으로 선언한 변수는 전역 객체의 프로퍼티가 되지 않습니다.)

 

따라서 전역적으로 사용될 프로퍼티라면 var가 아닌 명시적으로 전역객체에 추가해주어야한다.

// 모든 스크립트에서 현재 사용자(current user)에 접근할 수 있게 이를 전역 객체에 추가함
window.currentUser = {
  name: "John"
};

// 아래와 같은 방법으로 모든 스크립트에서 currentUser에 접근할 수 있음
alert(currentUser.name);  // John

// 지역 변수 'currentUser'가 있다면
// 지역 변수와 충돌 없이 전역 객체 window에서 이를 명시적으로 가져올 수 있음
alert(window.currentUser.name); // John

하지만 전역변수를 사용하는 것은 테스트하기도 어렵고 직관적이지 못한 코드를 작성하게 되어서 되도록이면 덜 사용하는게 좋다.

 

폴리필의 원리

어떤 브라우저가 최신 자바스크립트기능을 포함하고있는지의 여부는 전역객체를 통해서 알수있다.

if (!window.Promise) {
  alert("구식 브라우저를 사용 중이시군요!");
}

이렇게 직접 구현해주는것이 폴리필의 역할이자 원리이다.

if (!window.Promise) {
  window.Promise = ... // 모던 자바스크립트에서 지원하는 기능을 직접 구현함
}

 

이런식으로 브라우저의 innerHeight와같은 변수나, setTimeOut()과같은 webAPI들을 사용할 수 있는것이다.