자바스크립트에서 전역 객체는 코드가 실행되는 환경에 따라 다르게 정의되는 객체입니다. 전역 객체는 모든 전역 변수와 함수를 포함하며, 스크립트가 실행되는 전체 환경을 나타냅니다. 다양한 환경(브라우저, Node.js 등)에서 다른 전역 객체가 사용됩니다.
브라우저 환경에서의 전역 객체: window
브라우저에서는 **window**가 전역 객체입니다. window 객체는 브라우저 창을 나타내며, DOM 요소를 조작하거나 브라우저와 관련된 기능을 수행하는 메서드와 속성을 포함합니다. 예를 들면:
- window.document: 현재 문서에 접근
- window.alert(): 알림 창 띄우기
- window.innerWidth, window.innerHeight: 브라우저 창의 내부 크기
- 전역 변수와 함수 선언: 자동으로 window 객체의 프로퍼티가 됩니다.
Node.js 환경에서의 전역 객체: global
Node.js에서는 **global**이 전역 객체입니다. global 객체는 Node.js 전역 환경을 나타내며, 모든 전역 변수와 함수를 포함합니다. 예를 들면:
- global.Buffer: 바이너리 데이터 처리
- global.process: 실행 중인 Node.js 프로세스에 대한 정보와 제어
- global.setImmediate(), global.clearImmediate(): 비동기 코드 실행
특징 및 주의 사항
- 전역 변수 및 함수의 사용: 전역 객체를 통해 접근할 수 있는 전역 변수와 함수는 모든 코드에서 접근 가능하지만, 전역 공간을 오염시킬 수 있어 주의가 필요합니다.
- 환경 별 차이: **window**와 **global**은 각각의 환경에서 제공하는 고유한 속성과 메서드를 가지고 있으며, 환경에 따라 사용 가능한 API가 다릅니다.
- 모듈 시스템과의 관계: 현대 자바스크립트 개발에서는 모듈 시스템(예: ES6 모듈, CommonJS)을 사용하여 코드를 구성하는 경우가 많으며, 이 경우 모듈 내부에서 선언된 변수와 함수는 해당 모듈의 지역 범위에 속하게 됩니다.
전역 객체의 사용은 편리할 수 있지만, 전역 공간을 지나치게 오염시키지 않도록 주의하는 것이 중요합니다. 모듈 시스템을 적극 활용하여 코드의 유지보수성과 재사용성을 높이는 것이 좋습니다.
**globalThis**는 자바스크립트에서 환경에 관계없이 동일한 전역 객체에 접근할 수 있도록 하는 표준 속성입니다. 이전에는 브라우저 환경에서 window, Node.js 환경에서 **global**과 같이 각 환경에 따라 다른 전역 객체에 접근해야 했습니다. **globalThis**는 이러한 환경 차이를 추상화하여 동일한 방식으로 전역 객체에 접근할 수 있도록 만들어진 솔루션입니다.
globalThis의 특징
- 환경 독립적: 브라우저, Node.js, Web Worker 등 자바스크립트가 실행되는 모든 환경에서 동일하게 사용할 수 있습니다.
- 호환성: 대부분의 최신 브라우저와 Node.js 버전에서 지원합니다.
- 편의성: 환경에 따라 다른 전역 객체를 확인하고 사용할 필요가 없어, 코드의 호환성과 이식성이 높아집니다.
사용 예시
// 이전에는 환경에 따라 달랐습니다.
// 브라우저에서는:
console.log(window);
// Node.js에서는:
console.log(global);
// 이제는 `globalThis`를 사용하여 동일한 결과를 얻을 수 있습니다.
console.log(globalThis);
주의 사항
- **globalThis**를 사용할 때는 전역 공간을 오염시키지 않도록 주의해야 합니다. 전역 변수와 함수는 코드의 다른 부분과 충돌할 수 있으므로, 가능한 한 지역 변수를 사용하는 것이 좋습니다.
- 모든 환경에서 **globalThis**가 지원되는 것은 아닙니다. 구형 브라우저나 오래된 Node.js 환경에서는 **globalThis**를 지원하지 않을 수 있으므로, 해당 환경에서 코드를 실행할 계획이라면 이를 고려해야 합니다.
**globalThis**는 자바스크립트의 환경 독립성을 향상시키는 중요한 단계이며, 현대 자바스크립트 개발에서는 이를 활용하여 더욱 효율적으로 코드를 작성할 수 있습니다.
'javascript > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
실행 컨텍스트 ECMAScript 의 소스코드 4가지 타입 (0) | 2024.02.02 |
---|---|
생성자함수 this (0) | 2024.02.02 |
프로토타입 체인 (0) | 2024.02.02 |
화살표 함수가 논컨스트럭터 구조인 이유와 반례 (0) | 2024.02.02 |
const 키워드의 객체 (0) | 2024.02.02 |