04. 객체(Object)

JavaScript는 객체 기반(Object-Based) 언어다.

거의 모든 것이 객체로 구성되어 있다.

 

1. 객체란?

객체는 속성(Property)과 기능(Method)을 하나로 묶은 데이터 구조다.

let person = {
	name = "John",
    age = 30,
    greet : function() {
    	console.log("Hello");
    }
};

• name, age →  속성
• greet() → 메서드

객체는 현실 세계의 개념을 프로그램 안에서 표현한 구조라고 볼 수 있다.

 

2. 객체의 종류

JavaScript 객체는 크게 세 가지로 나뉜다.

1. 사용자 정의 객체
2. 내장 객체
3. 브라우저 객체(BOM)

 

3. 내장 객체(Built-in Object)

JavaScript가 기본적으로 제공하는 객체들이다.

1) 내장 객체 생성 방법

let obj1 = new Object();
let arr = new Array();
let date = new Date();

또는 리터럴 방식이 더 많이 사용된다.

let arr = [];
let obj = {};

 

2) 날짜 정보 객체(Date)

날짜와 시간 처리

let today = new Date();

 

주요 메서드

today.getFullYear();
today.getMonth();
today.getDate();
today.getDay();
today.getHours();

특징

• 월은 0부터 시작(1월 = 0)
• 요일은 0-6(일요일 = 0)

 

3) 수학 객체(Math)

수학 계산용 객체로, 객체 생성 없이 바로 사용한다.

Math.PI
Math.abs(-10)
Math.max(3, 5)
Math.random()
Math.floor(3.7)

 

4) 배열 객체(Array)

여러 데이터를 순서대로 저장한다.

let arr = [1, 2, 3];

주요 메서드

arr.push(4);
arr.pop();
arr.length;
arr.splice(1, 1);
arr.indexOf(2);

 

5) 문자열 객체(String)

문자열을 처리한다.

let str = "JavaScript";

주요 메서드

str.length;
str.charAt(0);
str.substring(0, 4);
str.indexOf("S");
str.toUpperCase();

 

4. 브라우저 객체 모델(BOM)

BOM은 브라우저를 제어하기 위한 객체 집합이다.

 

1) 브라우저 객체란?

웹 브라우저 자체를 객체로 다루는 구조다.

최상위 객체는 window다.

 

2) window 객체

모든 브라우저 객체의 최상위 객체

window.alert("Hello");

window는 생략 가능하다.

alert("Hello");

 

3) 일정한 간격으로 코드 실행하기

setTimeout(function()) {
	console.log("3초 후 실행");
}, 3000);

setInterval(function() {
	console.log("1초마다 실행")
}, 1000)

• setTimeout → 한 번 실행
• setInterval → 반복 실행

 

4) screen 객체

사용자의 화면 정보를 제공한다.

screen.width;
screen.height;
screen.availWidth;
screen.availHeight;

 

5) location 객체

현재 URL 정보 및 이동을 제어한다.

location.herf;
location.reload();
location.assign("onseyoo.tistory.com");

 

6) history 객체

브라우저 방문 기록을 제어한다.

history.back();
history.forward();
history.go(-1);

 

7) navigator 객체

브라우저 및 운영 체제 정보를 제공한다.

navigator.userAgent;
navigator.platform;
navigator.language;

 

객체(Object)

├─ 사용자 정의 객체

├─ 내장 객체 (Date, Math, Array, String 등)

└─ 브라우저 객체 (window, location, history 등)