전역 객체

전역 객체

---

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

• 브라우저 환경에선 -> window
• Node.js 환경에선 -> global
• 전역 객체 이름의 표준화 -> `globalThis'

▪️ 전역 객체의 모든 프로퍼티는 아래와 같이 직접 접근할 수 있다.

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

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

var gVar = 5;

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

권장하지 않는 방법이다.

▪️ var 대신 let을 사용하면 위 예시와는 달리 전역 객체를 통해 변수에 접근할 수 없다.

let gLet = 5;

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

▪️ 중요한 변수라서 모든 곳에서 사용할 수 있게 하려면, 아래와 같이 전역 객체에 직접 프로퍼티를 추가하자.

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

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

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

폴리필 사용하기

---

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

내장 객체 Promise를 지원하는지 여부를 아래와 같이 테스트할 수 있다. 구식 브라우저는 Promise 객체를 지원하지 않기 때문에 alert 창이 뜬다.

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

해당 기능을 지원하지 않는 오래된 브라우저를 사용하고 있다면 직접 함수를 만들어 전역 객체에 추가하는 방식으로 "폴리필"을 만들 수 있다.

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

📝 정리

---

• 전역 객체를 사용하면 어디서든 접근 가능한 변수를 만들 수 있다.
• 전역 객체의 표준화된 이름은 globalThis이다. (브라우저 : window, Node.js: global)
• 프로젝트 전체에서 꼭 필요한 변수만 전역 객체에 저장하고, 전역 변수는 가능한 한 최소한으로 사용하자.
• 이해하기 쉽고 요구사항 변경에 쉽게 대응할 수 있는 코드를 구현하려면, window.x처럼 전역 객체의 프로퍼티에 직접 접근하자.

참조 : https://ko.javascript.info/global-object