[Javascript] Window 객체 바로 알기

 

 

 

현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수 있는데, 자바스크립트로 웹 브라우저를 다루기 위해서는 window 객체와 document 객체, BOM과 DOM에 대한 이해가 필요하다.

인터넷 브라우저를 보면 주소창, 즐겨찾기, 툴바, 탭 등이 보이고 그 다음부터 웹 사이트가 표시된다. 여기서 브라우저 전체를 담당하는 게 window 객체이고 웹 사이트만 담당하는 게 document 객체다(document 객체도 window 객체 안에 들어 있음).

 

---

 

 

window

window 객체는 두 가지 역할로 나눠 생각해 볼 수 있는데,

1) 브라우저 안의 모든 요소들이 소속된 최상위 객체. 어디서든 접근이 가능해서 '전역 객체'라고도 부른다.
2) 일반적으로 우리가 열고 있는 브라우저 창을 의미. 이 창을 제어하는 다양한 method들을 제공한다.

이제 각각의 역할을 순서대로 살펴 보자.

 

1. 최상위 객체/전역 객체로서의 window

 

 

콘솔창에 window를 출력해 보면 그 안에 무수히 많은 프로퍼티들이 존재하는 것을 확인할 수 있다. 이 모든 프로퍼티들을 전부 다 외우고 이해할 필요까지는 없지만 몇 가지만 짚고 넘어가자.

앞서 말했듯 사실 window는 모든 객체의 조상이다. 모든 객체를 다 포함하고 있기 때문에 window는 생략 가능하다. 그래서 document.getElementBy...와 같이 쓸 수 있는 것이다(원래는 window.document.getElement...). window 객체에는 String, Boolean, Array, Function과 같은 자료형도 들어 있다.

 

한 가지 알아둘 만한 것은 아래와 같이 개발자가 만든 변수(함수 안에서 선언한 변수는 제외)도 모두 window 객체의 프로퍼티가 된다는 것이다. 이를 전역 변수라고 한다.

 

하지만 여기서 하나 더 이야기하자면 let과 const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용되기 어렵다.

 

2. 브라우저로서의 window

window 객체는 브라우저 창을 대변하고 window 객체 내에서 실행 중인 브라우저에 대한 정보를 담고 있는 여러 객체들을 BOM(Browser Object Model)이라 부른다. 이는 브라우저 창(window)에 포함된 모든 객체 요소들을 의미한다.

window.open(), window.close()을 이용해 창을 열거나 닫을 수 있고 location 객체를 통해 주소의 정보를 얻거나 screen 객체를 통해 화면 정보(너비, 높이, 픽셀, 방향 등)를 얻을 수도 있다.