42. 전역 객체

2026년 4월 15일

자바스크립트

전역 객체는 프로그램 어디에서나 접근할 수 있는 '최상위 컨테이너'입니다. 브라우저에서는 호스트 환경의 정보(창 크기, 주소 등)와 자바스크립트의 표준 내장 객체들을 모두 품고 있죠.

🌍 1. 전역 객체의 이름표: `globalThis`

호스트 환경에 따라 전역 객체를 부르는 이름이 달랐습니다. 이 파편화된 이름을 하나로 통합한 표준이 바로 **globalThis**입니다.

환경	전통적인 이름	표준 이름 (ES2020)
브라우저 (Browser)	`window`	`globalThis`
Node.js	`global`	`globalThis`
웹 워커 (Web Worker)	`self`	`globalThis`

💡 핵심 요약: 이제 어떤 환경에서 코드를 짜든 globalThis를 쓰면 전역 객체에 안전하게 접근할 수 있습니다.

🏗️ 2. 프로퍼티 접근과 변수 선언

전역 객체에 담긴 프로퍼티(예: alert, Promise)는 접두사 없이 바로 사용할 수 있습니다. 하지만 변수 선언 방식에 따라 전역 객체와의 관계가 달라집니다.

var로 선언한 전역 변수: 전역 객체의 프로퍼티가 됩니다. (권장하지 않음)
let, const로 선언한 전역 변수: 전역 객체를 통해 접근할 수 없습니다. 별도의 렉시컬 환경에 저장되기 때문입니다.

var gVar = 5;
let gLet = 10;

console.log(window.gVar); // 5
console.log(window.gLet); // undefined

🛠️ 명시적으로 추가하기

앱 전체에서 공유해야 하는 중요한 데이터가 있다면 window.user = { ... }와 같이 직접 할당하는 방식을 씁니다. 하지만 전역 변수는 최소화하는 것이 유지보수의 정석입니다.

🩹 3. 실무 활용: 폴리필(Polyfill)

전역 객체는 브라우저의 기능을 체크하고, 없는 기능을 채워 넣는 폴리필 제작에 핵심적인 역할을 합니다.

// 브라우저가 최신 기능인 Promise를 지원하지 않는다면?
if (!globalThis.Promise) {
  // 직접 구현한 코드를 전역 객체에 주입하여 하위 호환성을 확보합니다.
  globalThis.Promise = class { ... };
}

🎙️ 기술 면접 대비 (Interview Questions)

Q1. `window`와 `globalThis`의 차이는 무엇인가요? (중급)

답변: window는 브라우저 환경에서만 유효한 전역 객체의 이름입니다. 반면 globalThis는 브라우저, Node.js 등 어떤 환경에서든 전역 객체를 가리키도록 표준화된 이름입니다. 환경에 구애받지 않는 범용적인 코드를 작성할 때는 globalThis를 사용하는 것이 좋습니다.

Q2. 왜 모던 자바스크립트에서는 전역 변수 사용을 지양하나요? (중급)

답변: 첫째, 이름 충돌의 위험이 큽니다. 여러 스크립트가 같은 이름을 쓰면 예기치 못한 버그가 발생합니다. 둘째, 의존성 파악이 어렵습니다. 함수가 외부 전역 변수에 의존하면 테스트와 코드 재사용이 힘들어집니다. 따라서 모듈 시스템을 사용해 스코프를 분리하는 것이 현대적인 개발 관습입니다.

💡 Tech Lead의 한 줄 인사이트

사실 최근의 프론트엔드 개발은 **ES Modules(import/export)**를 기반으로 하기 때문에 각 파일이 자신만의 스코프를 가집니다. 즉, 전역 객체를 직접 건드릴 일이 과거보다 훨씬 줄어들었죠. 하지만 외부 라이브러리 설정이나 환경 변수 주입 시에는 여전히 전역 객체의 개념이 중요하게 쓰이니 원리만큼은 확실히 챙겨두세요!

요약

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

전역 객체엔 Array와 같은 내장 객체, window.innerHeight(뷰포트의 높이를 반환함)같은 브라우저 환경 전용 변수 등이 저장되어 있습니다.
전역 객체는 globalThis라는 보편적인 이름으로 불립니다.

하지만 '관습’에 따라 브라우저에서는 window, Node.js에서는 global이라는 이름으로 불릴 때가 많습니다. globalThis는 제안 목록에 추가 된 지 얼마 안 된 기능이기 때문에, 비 크로미움 기반 브라우저에선 지원하지 않습니다(폴리필을 구현하면 사용할 수 있습니다).
프로젝트 전체에서 꼭 필요한 변수만 전역 객체에 저장하도록 하고, 전역 변수는 가능한 한 최소한으로 사용합시다.
모듈을 사용하고 있지 않다면, 브라우저에서 var로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다.
이해하기 쉽고 요구사항 변경에 쉽게 대응할 수 있는 코드를 구현하려면, window.x처럼 전역 객체의 프로퍼티에 직접 접근합시다.

🌍 1. 전역 객체의 이름표: globalThis