[JS] globalThis의 필요성과 등장 배경

0. 전역 객체를 참조하는 방식이 왜 필요한가?

전역 객체를 참조하는 방식이 필요한 이유는 실행 환경에 상관없이 일관된 접근이 필요하기 때문

• 공통된 API 제공 (setTimeout, fetch 등)
• 전역 상태 관리 (데이터 공유)
• 실행 환경을 자동 감지하여 코드 실행

→ globalThis가 도입되면서 이런 문제를 더 쉽게 해결할 수 있게 됨

즉, 전역 객체를 참조하는 방식이 없으면 환경마다 코드가 달라지고, 유지보수가 어려워진다 !

실행 환경 (Execution Environment)이란
JavaScript 코드가 실행되는 환경을 의미한다.
즉, 어디에서 JavaScript 코드가 동작하는지

주요 실행 환경 종류
1. 브라우저 환경
웹 브라우저(Chrome, Firefox, Edge 등)에서 실행되는 JavaScript 환경
HTML, CSS와 함께 동작하며, DOM 조작 가능
window 객체가 전역 객체 역할

2. Node.js 환경
서버 측에서 JavaScript를 실행할 수 있도록 만든 환경
브라우저에서 제공하는 window 객체가 없는 대신 global 객체가 전역 객체 역할

3. Web Worker 환경
브라우저에서 멀티스레딩을 위해 사용되는 환경
window 대신 self가 전역 객체 역할
DOM 조작 불가능

그 외
Deno : Node.js와 유사한 새로운 런타임 [globalThis]
Electron : 데스크톱 앱 개발용 JS 환경 [window (렌더러) / global (메인 프로세스)]

1. 기존 문제 : 환경마다 전역 객체가 다름

JavaScript는 다양한 실행 환경에서 사용되는데, 환경마다 전역 객체(Global Object)의 이름이 달랐음
즉, 코드가 실행되는 환경에 따라 전역 객체에 접근하는 방법이 달랐기 때문에, 모든 환경에서 공통적으로 사용할 방법이 필요했음

(1) 브라우저 환경

console.log(window); // 브라우저에서는 `window`가 전역 객체
console.log(window.setTimeout === setTimeout); // true (전역 함수들은 `window`의 프로퍼티)

(2) Node.js 환경

console.log(global); // Node.js에서는 `global`이 전역 객체
console.log(global.setTimeout === setTimeout); // true

(3) Web Workers 환경
Web Worker 내부에서는 window가 없음
대신 self를 사용해야 함

console.log(self); // Web Worker 내부에서는 `self`가 전역 객체

결과
실행 환경마다 전역 객체의 이름이 다르므로, 하나의 코드로 모든 환경에서 전역 객체를 참조하는 것이 어려웠음

⸻

2. 기존의 해결 방법 (우회 코드)

ES2020 이전에는 아래처럼 환경을 체크해서 전역 객체를 가져와야 했음

const getGlobal = () => {
  if (typeof window !== "undefined") return window; // 브라우저
  if (typeof global !== "undefined") return global; // Node.js
  if (typeof self !== "undefined") return self; // Web Worker
  throw new Error("Unsupported environment");
};

const globalObject = getGlobal();
console.log(globalObject); // 실행 환경에 따라 다른 전역 객체를 반환

이 방법은 번거롭고, 새로운 환경이 등장할 경우 코드 수정이 필요했음

⸻

3. globalThis의 등장

이 문제를 해결하기 위해 ES2020에서 globalThis가 도입
globalThis는 어떤 실행 환경에서도 동일한 방식으로 전역 객체를 참조할 수 있는 표준적인 방법

console.log(globalThis); // 브라우저에서는 window, Node.js에서는 global을 반환

모든 환경에서 일관된 코드 작성 가능 !

// 브라우저
console.log(globalThis === window); // true


// Node.js
console.log(globalThis === global); // true


// Web Worker
console.log(globalThis === self); // true

⸻

4. globalThis와 this의 관계

JavaScript에서 this 키워드는 컨텍스트에 따라 다르게 동작하는데, 그렇다면 globalThis와 this는 어떤 차이가 있을까?

this는 실행 컨텍스트(함수, 객체, 클래스 등)에 따라 변하지만, globalThis는 항상 현재 환경의 전역 객체를 반환함

-> 즉, globalThis는 this의 불확실성을 해결하는 역할도 함!

5. globalThis의 실제 활용

(1) 라이브러리/프레임워크에서 공통된 코드 작성
라이브러리나 프레임워크에서는 브라우저, Node.js 등 다양한 환경에서 실행될 수 있는 코드를 작성해야 함
-> globalThis를 사용하면 환경에 관계없이 동일한 코드로 전역 변수를 관리할 수 있음

(2) SSR(Server-Side Rendering)에서의 활용
React 같은 프레임워크에서는 서버 사이드 렌더링(SSR)을 수행할 때 브라우저 환경과 Node.js 환경을 동시에 고려해야 함
-> globalThis를 활용하면 실행 환경을 자동으로 감지하여 특정 기능을 다르게 처리할 수 있음

⸻
Q. globalThis는 왜 도입되었는가?

기존에는 JavaScript의 실행 환경에 따라 전역 객체가 달라서(window, global, self), 환경마다 다른 방법으로 접근해야 했다.
이를 해결하기 위해 ES2020에서 globalThis가 도입되었으며, 이를 사용하면 실행 환경에 관계없이 일관된 방식으로 전역 객체를 참조할 수 있다.

(추가 설명)
기존에는 typeof window !== "undefined" 같은 체크를 해야 했지만, globalThis가 등장하면서 이런 번거로움 없이 한 줄의 코드로 해결할 수 있게 되었다.

⸻

Q. 모든 환경에서 전역 객체를 참조하는 방법은? (window, global, self 비교)

• 브라우저 [window]

window === globalThis

• Node.js [global]

global === globalThis

• Web Worker [self]

self === globalThis

• ES Module [없음 (undefined)]

globalThis 사용 가능


globalThis를 사용하면 모든 환경에서 동일한 방식으로 전역 객체를 참조할 수 있음

console.log(globalThis); // 실행 환경에 따라 적절한 전역 객체 반환

+ 성능 비교
기존 typeof 체크 방식보다 globalThis가 최적화되어 있고 더 빠를 가능성이 높음 !


⸻

정리
1. 기존에는 환경마다 전역 객체 이름이 달라서(window, global, self) 일관된 코드 작성이 어려웠음
2. globalThis가 도입되어 모든 환경에서 전역 객체를 동일한 방식으로 참조 가능하게 되었음
3. ES2020 이후에는 globalThis를 사용하는 것이 가장 안전하고 권장되는 방식