Programming/JavaScript

[JavaScript] Core: window 객체

Isaac S. Lee 2023. 10. 11. 11:55

🍁window 객체


 

[JavaScript] BOM: window 객체

🍁window 객체 window.open(URL, name, options); URL: 새 창의 URL name: 새 창의 이름 options: 새 창 옵션들 window로 창을 새로 만들었을 때 만들어진 창을 자식창이라고 한다. 옵션들 사이는 띄어쓰기를 해도 되

isaac-christian.tistory.com

window 객체에 대해서는 위 글을 참고한다.

 

내장 객체에 프로퍼티 추가

const isaac = {
    name: 'isaac'
}

isaac.age = 25;

자바스크립트는 객체에 프로퍼티를 자유롭게 추가할 수 있다.

 

const now = new Date();
console.log(now);

now.color = 'tomato'; //사용자 정의 프로퍼티
console.log(now.color);

now.check = function() { //사용자 정의 프로퍼티
    console.log('check');
};

현재 날짜를 하나 만들었다. 이 안에는 년, 월, 일, 시, 분, 초가 들어 있다.

날짜 내장 객체에 color와 check 프로퍼티를 추가하였다.

이처럼 내장 객체에 내가 만든 프로퍼티를 추가하는 것 또한 가능하다.

 

window 객체의 종류

  • window.open()
  • window.close()

window 객체는 최상위 객체로, 이외에도 다양한 기능이 존재한다.

 

  • window.alert();
  • window.confirm();
  • window.prompt();
  • window.setTimeout();
  • window.setInterval();

alert 함수의 원형은 window의 메소드로 window.alert이다.

window는 최상위 객체라는 이유로 생략할 수 있기 때문에 생략하여 사용하고 있었을 뿐이다.

 

window 객체의 프로퍼티 확인

function m1() {
    alert('m1');
}

평범한 m1 메소드를 하나 만들었다.

개발자 도구에서 window를 입력하면 위와 같이 window가 가지고 있는 객체를 확인할 수 있다.

그리고 window에 내가 만든 m1 메서드가 프로퍼티로 추가된 것을 확인할 수 있다.

var a1 = 'isaac'; //전역 변수 > 변수(X), 프로퍼티(O)
console.log(window.a1);

자바스크립트모든 함수, 전역 변수는 자동으로 window 객체의 프로퍼티가 된다.

따라서 자바스크립트의 전역 변수는 변수가 아니라 프로퍼티이다.

let a2 = 'Sopia'; //window 프로퍼티(X)
const a3 = 'Lee'; //window 프로퍼티(O)

이는 var로 선언할 때에만 일어나는 일이다.

 

제어문

for (변수 in 객체) {

}
const obj = {
    name: '객체',
    age: 20
}

for (let p in obj) {
    console.log(p);
}

이 for문은 객체의 프로퍼티를 탐색하는 루프이다.

for (let p in obj) {
    console.log(p, obj[p]);
}

map 형태로 사용하면 값을 확인할 수 있다.

 

제어문을 사용한 window 객체의 프로퍼티 확인

for (let p in window) {
    console.log(p, obj[p]);
}

어떤 객체가 어떤 구조를 가지고 있는지를 확인하고 싶을 때 사용한다.