JavaScript window object method

자바스크립트의 window 객체는 브라우저가 제공하는 최상위 전역 객체(Global Object)입니다.

우리가 작성하는 모든 전역 변수, 전역 함수, 그리고 DOM(문서 객체 모델)까지도 실은 이 window 객체의 자식들입니다.

웹 개발을 하면서 window.을 생략하고 사용해 왔던 수많은 함수들이 바로 window 객체의 메소드입니다.

실무에서 가장 중요하게 다뤄지는 window 객체의 핵심 메소드들을 4가지 카테고리로 나누어 정리해 드리겠습니다.

1. 대화상자 (Dialog) 메소드

사용자에게 메시지를 보여주거나 확인, 입력을 받을 때 사용하는 가장 직관적인 메소드입니다.

• alert(message): 단순 경고창
  • 메시지와 '확인' 버튼이 있는 알림창을 띄웁니다.
• confirm(message): 확인/취소 선택창
  • 사용자가 '확인'을 누르면 true, '취소'를 누르면 false를 반환하여 조건문에 자주 쓰입니다.
• prompt(message, defaultValue): 텍스트 입력창
  • 사용자가 텍스트를 입력할 수 있는 창을 띄우며, 입력한 값을 문자열로 반환합니다. (취소 시 null)

// confirm 활용 예시
if (window.confirm("정말로 이 게시글을 삭제하시겠습니까?")) {
  console.log("게시글이 삭제되었습니다."); // 확인 클릭 시
} else {
  console.log("취소되었습니다."); // 취소 클릭 시
}

2. 타이머 및 비동기 실행 (Timer) 메소드

특정 시간에 맞춰 코드를 실행하고자 할 때 사용하는 매우 중요한 비동기 메소드들입니다.

• setTimeout(function, delay): 단발성 타이머
  • 지정한 밀리초($1/1000$초)가 지난 후에 함수를 딱 한 번 실행합니다.
• setInterval(function, delay): 반복성 타이머
  • 지정한 밀리초 주기로 함수를 무한 반복해서 실행합니다.
• clearTimeout(id) / clearInterval(id): 타이머 중지
  • setTimeout이나 setInterval이 반환한 고유 ID를 인자로 넣어 실행 중인 타이머를 강제로 멈춥니다.

// 3초마다 현재 시간을 출력하는 반복 타이머
const timerId = window.setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 3000);

// 10초 후에 위에서 만든 반복 타이머를 멈추기
window.setTimeout(() => {
  window.clearInterval(timerId);
  console.log("타이머가 종료되었습니다.");
}, 10000);

3. 브라우저 창 제어 메소드

새로운 브라우저 탭을 열거나, 현재 창을 닫는 등 브라우저 창 자체를 제어합니다.

• open(url, target, features): 새 창/새 탭 열기
  • 지정한 주소의 팝업창이나 새 탭을 띄웁니다.
• close(): 창 닫기
  • 현재 브라우저 창이나 팝업창을 닫습니다. (보안 상 window.open()을 통해 열린 창만 닫을 수 있는 경우가 많습니다.)

JavaScript

 

// 버튼 클릭 시 팝업창을 띄우는 예시
const openPopup = () => {
  window.open('https://example.com', '_blank', 'width=500, height=400');
};

4. 스크롤 제어 메소드

웹 페이지의 스크롤 위치를 프로그래밍 방식으로 부드럽게 이동시킬 때 사용합니다.

• scrollTo(x, y) 또는 scrollTo(options): 절대적인 위치로 이동
  • 문서의 최좌측 상단($0, 0$)을 기준으로 지정한 좌표로 스크롤을 이동시킵니다.
• scrollBy(x, y) 또는 scrollBy(options): 상대적인 거만큼 이동
  • 현재 스크롤이 있는 위치를 기준으로 지정한 픽셀만큼 더 이동시킵니다.

JavaScript

 

// 페이지 맨 위로 부드럽게 올리는 'Top' 버튼 구현 시 단골 코드
window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth' // 부드러운 스크롤 애니메이션 효과
});

📋 window 객체 중요 메소드 요약표

메소드	기능	주요 매개변수	특징
alert()	알림 메시지창 표시	메시지 문자열	사용자가 확인을 누르기 전까지 스크립트 일시 정지
confirm()	확인/취소 선택창 표시	메시지 문자열	true 또는 false 값을 리턴함
setTimeout()	지연 후 함수 1회 실행	콜백 함수, 밀리초 단위 시간	비동기 처리에 활용됨
setInterval()	주기적으로 함수 반복 실행	콜백 함수, 밀리초 단위 시간	시계, 애니메이션 등에 주로 활용됨
scrollTo()	특정 좌표로 스크롤 이동	X/Y 좌표 또는 옵션 객체	behavior: 'smooth' 옵션으로 부드러운 이동 가능

학습 정리

• window 객체의 메소드들은 전역 공간 어디서나 사용할 수 있으므로 원래는 window.alert() 대신 **alert()**처럼 생략해서 적는 것이 일반적입니다.
• 단, setTimeout이나 setInterval을 쓸 때는 메모리 누수(Memory Leak)를 방지하기 위해, 필요가 없어지는 시점에 반드시 **clearTimeout / clearInterval**로 타이머를 해제해 주는 것이 좋은 습관입니다.

 

브라우저 전체를 다스리는 최상위 전역 객체인 window 객체의 핵심 메소드들을 마스터하셨습니다!

 

---