해당 글은 '모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리'를 참고 했습니다.
1. 전역 객체?
전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체다. 전역 객체는 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이드 환경(Node.js)에서는 global 객체를 의미한다. 환경에 따라 전역 객체를 가리키는 다양한 식별자(window, self, this, frames, global)가 존재했으나 ES11(ECMAScript 11)에서 globalThis 로 통일되었다.
전역 객체는 표준 빌트인 객체(Object, String. Number, Function, Array…)와 환경에 따른 호스트 객체(클라이언트 Web API 또는 Node.js의 호스트 API), 그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.
여기서 프로퍼티란? 객체 내부에서 키(key)와 값(value)의 쌍으로 저장된 데이터를 **프로퍼티(property)**라고 한다. 즉 var로 선언한 변수의 결과(값)는 전역 객체의 프로퍼티 값으로 저장된다.
1-1. 전역 컨텍스트에서의 저장 위치
var x = 10;
👉 저장되는 곳:
- 브라우저 환경: window.x = 10
- Node.js 환경: global.x = 10
- 메모리 상에서는 전역 객체(Heap 영역)의 프로퍼티 값으로 저장됨
1-2. Chrome에서 확인
var testVar = "Hello World";
console.log(window.testVar); // "Hello World"
크롬 브라우저 개발자 도구의 console에 위 코드를 치면 결과가 아래와 같다.
2-1. 전역 객체의 프로퍼티 형태 (Object.getOwnPropertyDescriptor)
var z = 30;
console.log(Object.getOwnPropertyDescriptor(window, "z"));
{
value: 30,
writable: true,
enumerable: true,
configurable: true
}
즉, var 변수의 값은 전역 객체의 프로퍼티 값으로 저장되며, 힙(Heap) 메모리 또는 스택(Stack) 메모리에 위치할 수 있다.
2-2. Chrome에서 확인
console.log(Object.getOwnPropertyDescriptor(window, "testVar"));
크롬 브라우저 개발자 도구의 console에 위 코드를 치면 결과가 아래와 같다.
⭐⭐⭐3-1. let과의 비교(전역 객체에 저장되는지 확인)
let testLet = "Hello";
console.log(window.testLet); // undefined
크롬 브라우저 개발자 도구의 console에 위 코드를 치면 결과가 아래와 같다.
testLet은 메모리에 저장되었지만, 전역 객체(window)의 프로퍼티가 아니다. window.c를 조회하면, 전역 객체에 testLet라는 프로퍼티가 없기 때문에 undefined 반환한다.
👉 let 변수는 전역 객체(window)에 저장되지 않고, 전역 실행 컨텍스트의 "전역 렉시컬 환경(Global Lexical Environment)"에 저장됨
let testLet = "hello";
window.testLet = testLet; // 명시적으로 추가
console.log(window.testLet); // "hello"
위와 같이 let 변수를 window 객체에 명시적으로 추가하면 접근할 수 있음.
결과는 위와 같다.
2. 전역 객체 결론
브라우저 환경에서 전역 객체는 window이므로 브라우저 환경에서 var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티다. 전역 객체 window는 웹페이지를 닫기 전까지 유효하다. 따라서 브라우저 환경에서 var 키워드로 선언한 전역 변수는 웹페이지를 닫을 때까지 유효하다. 즉, var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.
'JavaScript' 카테고리의 다른 글
[namo CROSSEDITOR] Script인증을 사용할 경우에는 UploadFileExecutePath API를 설정해 주세요. (1) | 2025.04.29 |
---|---|
[JavaScript] 커링(Currying) 이란? const fn = x => y => x + y; (0) | 2025.03.02 |
[JavaScript] 13. 스코프란? (0) | 2025.02.15 |
[JavaScript] Invalid left-hand side expression in prefix operation, Number( ) 함수에 연산자 적용 에러 (0) | 2025.02.06 |
[JavaScript] 자바스크립트에서 && 연산자의 동작 방식 (0) | 2025.01.30 |