window 객체는 무엇인가 ?

Window 객체

• 정의: window 객체는 브라우저에서 열린 창 의미.

• 역할:

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

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

window (개발자 콘솔)

Window {0: global, 1: Window, 2: global, 3: Window, 4: global, 5: global, 6: global, 7: global, 8: global, window: Window, self: Window, document: document, name: "", location: Location, …}

위와 같이 무수한 프로퍼티를 찾을 수 있습니다.

알아둬야 할 부분은, 우리가 코드를 작성하면서 var를 이용해 전역변수를 만들면 window객체에 key와 value로 추가되지만,
let이나 const를 이용해 전역변수를 만들면 window 객체에 추가되지는 않는다.

var a = "apple"; 
console.log(window.a);      //"apple"

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

const c = "strawberry";
console.log(window.c);      //undefined

window. 접두사 없이도 참조가 가능하기 때문에(window.함수()라고 사용해도 됩니다.), 생략하고 쓰는 것뿐입니다

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

window 객체는 브라우저의 창을 대변하고, 다양한 메서드를 통해 이 창을 제어할 수 있다.
window.close(), window.open() 메서드를 활용하면, 창을 열거나 닫을 수 있고,
window.innerWidth, window.innerHeight 같은 프로퍼티에 접근하면 창의 너비와 높이 등을 확인할 수도 있다.

• window 객체 속성 (외울 필요 없다):

  • closed
    창이 닫혀 있는지 여부 나타내는 참거짓 반환.

  • console
    브라우저의 콘솔에 정보를 기록하는 메소드를 제공하는 Console 객체에 대한 참조 반환 (Console 객체 참조)

  • defaultStatus
    창의 상태표시줄에 있는 기본 텍스트를 설정하거나 반환.

  • document
    윈도우의 Document 객체 반환 (Document 객체 참조).

  • frameElement
    현재창이 삽입 된 <iframe> 요소 반환.

  • frames
    현재창에서 모든 <iframe> 요소를 반환.

  • history
    창의 History 객체를 반환. (History 객체 참조).

  • innerHeight
    스크롤 바를 포함하여 창 내용 영역 (= viewport) 높이 반환.

  • innerWidth
    스크롤 바를 포함하여 창 내용 영역 (= viewport) 너비 반환.

  • length
    현재창에서 <iframe> 요소의 개수 반환.

  • localStorage
    웹 브라우저에 key / value 쌍을 저장 가능. 만료 날짜 없는 데이터 저장.

  • location
    창의 Location 객체 반환 (Location 객체 참조).

  • name
    창이름 설정하거나 반환.

  • navigator
    창 Navigator 객체 반환 (Navigator 객체 참조).

  • opener
    창 생성한 window에 대한 참조 반환.

  • outerHeight
    toolbar / scrollbar 포함해 브라우저 창 높이 반환.

  • outerWidth
    toolbar / scrollbar 포함해 브라우저 창 너비 반환.

  • pageXOffset
    현재 문서가 창의 왼쪽상단 구석으로부터 (가로로) 스크롤 된 픽셀 반환.

  • pageYOffset
    현재의 문서가 창의 왼쪽상단 구석으로부터 (세로로) 스크롤 된 픽셀 반환.

  • parent
    현재창의 부모창 반환.

  • screen
    창의 screen 객체 반환 (Screen 객체 참조).

  • screenLeft
    화면에 상대적인 창의 수평 좌표 반환.

  • screenTop
    화면을 기준으로 한 창의 세로 좌표 반환.

  • screenX
    화면을 기준으로 한 창의 가로 좌표를 반환.

  • screenY
    화면에 상대적인 창의 세로 좌표를 반환.

  • sessionStorage
    웹 브라우저에 key / value 쌍을 저장 가능. 하나의 세션에 대한 데이터 저장.

  • scrollX
    pageXOffset의 별칭

  • scrollY
    pageYOffset의 별칭

  • self
    현재 창을 반환.

  • status
    창의 상태표시줄에있는 텍스트를 설정하거나 반환.

  • top
    최상위 브라우저 창을 반환.

• Window 객체 메서드(외울 필요 없다.)

  • alert()
    메시지와 확인 버튼이 있는 경고 상자 표시.

  • atob()
    base-64로 암호화 된 문자열을 암호해독.

  • blur()
    현재 창에서 focus 제거.

  • btoa()
    base-64로 문자열을 암호화.

  • clearInterval()
    setInterval ()로 설정된 타이머 지우기.

  • clearTimeout()
    setTimeout ()로 설정된 타이머 지우기.

  • close()
    현재창 닫기.

  • confirm()
    메시지와 확인 및 취소 버튼이 있는 대화상자 표시.

  • focus()
    현재창에 포커스 설정.

  • getComputedStyle()
    요소에 적용된 현재 계산 된 CSS 스타일 가져오기.

  • getSelection()
    사용자가 선택한 텍스트 범위를 나타내는 Selection 객체를 반환.

  • matchMedia()
    지정된 CSS 미디어쿼리 문자열을 나타내는 MediaQueryList 객체를 반환.

  • moveBy()
    현재 위치를 기준으로 창을 이동.

  • moveTo()
    창을 지정된 위치로 이동.

  • open()
    새 브라우저 창 열기.

  • print()
    현재 윈도우의 내용을 인쇄.

  • prompt()
    방문자에게 입력을 요구하는 대화상자 표시.

  • requestAnimationFrame()
    브라우저에 다음 Repaint 전에 애니메이션 업데이트하는 함수 호출하도록 요청.

  • resizeBy()
    지정 픽셀 기준으로 창크기 조절.

  • resizeTo()
    창을 지정 폭과 높이로 사이즈 변경.

  • scroll()
    폐기예고. 이 메소드는 scrollTo () 메소드로 대체.

  • scrollBy()
    지정된 픽셀수만큼 문서 스크롤.

  • scrollTo()
    문서를 지정된 좌표로 스크롤.

  • setInterval()
    지정된 간격 (밀리 초)으로 함수 호출하거나 표현식을 평가.

  • setTimeout()
    지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가.

  • stop()
    창 로드 정지.

출처 :
(1) https://bigtop.tistory.com/48
(2) https://homzzang.com/b/js-1139
(3) https://velog.io/@grinding_hannah/JavaScript-var-let-const-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90