Window 객체란?

window 객체는 두 가지 역할을 하는데

1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역 객체 라고도 부른다.
2. 일반적으로 우리가 알고 있는 브라우저 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다.

1. 전역 객체로써 window

window 객체는 문자 그대로 window라는 이름으로 접근할 수 있다.

//javascript
window

브라우저 console에서 window를 찍어보면,
> Window {parent: Window, opener: global, top: Window, length: 3, frames: Window, …} 와 같은 값을 얻을 수 있는데 이 속에 무수히 많은 프로퍼티들이 존재하는 것을 확인할 수 있다.

우리가 작성하는 코드들은 대부분 다 window 객체의 프로퍼티가 된다는 사실을 기억해두자.

var myName = "Ssari";

function getMyName(){
	return myName;
}

console.log(window.myName); //Ssarri
console.log(window.getMyname()); //Ssarri;

위와 같이 var 키워드로 변수를 선언하거나 함수를 선언하면, window객체의 프로퍼티가 된다.
그럼에도 불구하고 우리는 변수와 함수를 선언하고서 앞에 window를 붙이지 않는데, 말 그대로 window는 전역 객체로 페이지 내에 있는 모든 객체를 다 포함하고 있기 때문에 window는 그냥 생략이 가능한 특징을 가지고 있다.

따라서 특별한 경우를 제외하면 window객체를 직접 사용할 일은 드물다.

💡깨알상식

let과 const로 선언한 변수는 블록 스코프이기 때문에 window객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용되기는 어렵다.

let myName = "Ssarri";

console.log(window.myName); //undefined

2. 브라우저 창으로써의 window

window 객체는 **브라우저의 창을 대변하고 다양한 메서드를 통해 이 창을 제어할 수 있다.

• .close() : 브라우저 창을 닫음
• .open() : 브라우저 창을 엶
• .innerWidth : 브라우저의 안쪽 넓이의 값
• .innerHeight : 브라우저 안쪽의 높이값 반환
• .outerWidth : 브라우저의 프레임을 포함한 넓이값 반환
• .outerHeight : 브라우저의 프레임을 포함한 높이값 반환
• .scrollY : 현재 스크롤된 브라우저의 Y축 거리값
• .scrollX : 현재 스크롤된 브라우저의 X축 거리값

  📌예제

  window.addEventListener('resize', e=>{
      console.log(window.innerWidth);
  });