[JS] window 객체란 무엇인가?

window 객체는 브라우저 환경에서 최상위 전역 객체로, 웹 페이지를 제어할 수 있는 다양한 속성과 메서드를 제공한다. 전역에서 선언된 변수와 함수는 기본적으로 window 객체의 속성이 된다.

 

즉, JavaScript 코드에서 명시적으로 window를 사용하지 않더라도, 모든 전역 변수와 함수는 기본적으로 window 객체의 프로퍼티로 저장된다.

 

 

 

---

1. window 객체의 주요 역할

 

1. 전역 객체 역할

JavaScript에서 전역 변수와 함수를 저장하는 컨테이너 역할을 한다. 즉, 모든 전역 변수와 함수는 window 객체의 속성으로 저장된다.

var a = 10;
console.log(window.a); // 10

function greet() {
  console.log("Hello!");
}
window.greet(); // "Hello!"

 

let과 const로 선언된 변수는 window 객체에 저장되지 않는다.

let b = 20;
console.log(window.b); // undefined

 

---

 

2. 브라우저의 기본 기능 제공

window 객체는 DOM(Document Object Model), BOM(Browser Object Model), 타이머, 이벤트 등을 관리하는 기능을 포함한다.

 

• 브라우저 환경 제어: 창 크기 조절, 이동, 열기/닫기 등의 기능을 제공한다.

• 문서 조작: document 객체를 통해 HTML 요소를 조작할 수 있다.

• 이벤트 처리: addEventListener()를 이용해 전역 이벤트를 처리할 수 있다.

• 비동기 작업 관리: setTimeout(), setInterval(), fetch() 등을 활용한 비동기 코드 실행이 가능하다.

 

 

 

---

2. window 객체의 주요 속성과 메서드

속성/메서드	설명
window.innerWidth	현재 창의 너비 (px)
window.innerHeight	현재 창의 높이 (px)
window.location	현재 페이지 URL 정보
window.history	브라우저 방문 기록 관리
window.navigator	브라우저 및 사용자 정보 제공
window.document	현재 웹 페이지의 DOM을 조작할 수 있는 객체
window.alert()	경고창 띄우기
window.setTimeout()	일정 시간이 지난 후 함수 실행
window.setInterval()	일정 간격으로 함수 반복 실행
window.open()	새 창 열기
window.addEventListener()	전역 이벤트 리스너 추가

 

---

 

1) window.document (DOM)

document 객체는 웹 페이지의 HTML 문서를 조작할 수 있도록 한다.

console.log(window.document.title); // 현재 문서의 제목 출력
document.body.style.backgroundColor = "lightblue"; // 배경색 변경

 

---

 

2) window.location (URL 정보)

현재 페이지의 URL 정보를 가져오거나 변경할 수 있다.

console.log(window.location.href); // 현재 URL 출력
// window.location.href = "https://google.com"; // 해당 URL로 이동

 

---

 

3) window.history (브라우저 기록)

사용자의 방문 기록을 제어할 수 있다.

window.history.back();  // 이전 페이지로 이동
window.history.forward(); // 다음 페이지로 이동

 

---

 

4) window.navigator (브라우저 정보)

 브라우저 및 운영 체제 정보를 제공한다.

console.log(window.navigator.userAgent); // 사용자 에이전트 정보 출력
console.log(window.navigator.language); // 브라우저 언어 출력

 

---

 

5) window.screen (디스플레이 정보)

화면 해상도 관련 정보를 제공한다.

console.log(window.screen.width);  // 화면 너비
console.log(window.screen.height); // 화면 높이

 

---

 

6) window.alert(), window.confirm(), window.prompt() (알림창)

사용자와의 상호작용을 위한 기본적인 대화 상자를 제공한다.

window.alert("경고 메시지!"); // 경고창
let result = window.confirm("계속 진행할까요?"); // 확인창
let name = window.prompt("이름을 입력하세요:", "홍길동"); // 입력창

 

---

 

7) window.setTimeout() & window.setInterval() (비동기 타이머)

특정 시간 후에 코드 실행 (setTimeout), 일정 간격으로 반복 실행 (setInterval)

setTimeout(() => {
  console.log("3초 후 실행!");
}, 3000);

let interval = setInterval(() => {
  console.log("2초마다 실행!");
}, 2000);

// 10초 후 반복 종료
setTimeout(() => {
  clearInterval(interval);
}, 10000);

 

---

 

8) window.addEventListener() (이벤트 리스너)

window 객체에서도 이벤트를 감지하고 처리할 수 있다.

window.addEventListener("resize", () => {
  console.log("창 크기 변경됨: ", window.innerWidth, window.innerHeight);
});

 

 

 

---

3. window 객체 생략이 가능하다.

 

1. 전역 변수와 함수

var로 선언된 변수와 전역 함수는 window 객체의 속성이므로 window.를 생략할 수 있다.

var message = "Hello!";
console.log(window.message); // "Hello!"
console.log(message); // "Hello!" (window 생략 가능)

function greet() {
  console.log("안녕하세요!");
}

window.greet(); // "안녕하세요!"
greet(); // "안녕하세요!" (window 생략 가능)

 

---

 

2. 일반적인 window 속성과 메서드

window.alert(), window.setTimeout() 등은 생략 가능하다.

alert("안녕하세요!"); // window.alert 생략 가능
setTimeout(() => console.log("3초 후 실행"), 3000); // window.setTimeout 생략 가능
console.log(innerWidth); // window.innerWidth 생략 가능

 

 

 

---

4. window 객체 생략이 불가능하다.

 

1. let과 const로 선언한 변수

let과 const는 window 객체에 등록되지 않으므로 window.를 통해 접근할 수 없다.

let name = "Alex";
console.log(window.name); // undefined (생략 불가능)

 

---

 

2. 전역 변수와 window 속성이 충돌할 때

전역 변수 length와 window.length는 서로 다른 의미를 가질 수 있다.

var length = 50; // 전역 변수
console.log(window.length); // 창에 열린 프레임 개수 (일반적으로 1)
console.log(length); // 50 (전역 변수 값)

 

---

3. window 객체가 필수적인 경우

window.addEventListener(), window.open() 등의 메서드는 window를 명시적으로 붙여야 한다.

window.addEventListener("resize", () => {
  console.log("창 크기 변경됨");
});

window.open("https://google.com");

 

 

 

---

5. 결론

✅ window 객체는 브라우저 환경에서 최상위 전역 객체로, 다양한 속성과 메서드를 제공한다.

✅ 대부분의 window 속성과 메서드는 생략 가능하지만, let/const 변수나 특정 전역 속성과 충돌하는 경우 명시적으로 사용해야 한다.

✅ 이벤트 리스너나 새 창 열기 같은 특정 기능에서는 window.를 붙여야 한다.

 

이러한 개념을 잘 이해하면 JavaScript에서 window 객체를 더욱 효율적으로 활용할 수 있다.