Global Object

전역 객체

Global Object (전역 객체)

자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가집니다.

• 브라우저 환경 : window
• Node.js 환경 : global
• 그 외 호스트 환경 : globalThis (표준화)

브라우저 에서의 window 객체

• 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니다.
• 자바스크립트에서는 코딩할 때 전역객체를 생략할 수 있습니다.
• 전역 객체엔 Array와 같은 내장 객체, window.innerHeight(뷰포트의 높이를 반환함)같은 브라우저 환경 전용 변수 등이 저장되어 있습니다.

전역 변수 접근

브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 됩니다. 단, 모듈을 사용한다면 var로 변수를 선언해도 전역 객체의 프로퍼티가 되지 않습니다.

var foo = "foobar"; foo === window.foo; // Returns: true

let이나 const으로 선언한 변수는 전역 객체의 프로퍼티가 되지 않습니다.

let gLet = 5;
alert(window.gLet); // undefined ()

전역 객체를 사용하면 어디서든 접근 가능한 변수를 만들 수 있습니다. (아래와 같이 전역 객체에 직접 프로퍼티를 추가) 하지만 에러 방지 등을 위해 전역 변수는 되도록 사용하지 않는 것이 좋습니다.

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

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

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

전역 함수 접근

function greeting() {
   console.log("Hi!");
}

window.greeting(); // It is the same as the normal invoking: greeting();

폴리필 사용하기

구형 브라우저 여부 체크

전역 객체를 이용해 현재 사용중인 브라우저가 최신 자바스크립트 기능을 지원하는지 여부를 확인할 수 있습니다.

// 내장 객체 Promise를 지원하는지 여부를 테스트
if (!window.Promise) {
  alert("Your browser is really old!"); // 지원하지 않는 구형 브라우저에서만 alert창 노출
}

폴리필 만들기

직접 함수를 만들어 전역 객체에 추가하는 방식으로 "폴리필"을 만들 수 있습니다.

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

참고

• 모던 JavaScript - 전역 객체
• MDN - 전역 객체