06-1 객체란?

율룡이·2023년 8월 3일

JS

목록 보기

20/20

객체란?

객체를 흔히 '복합 자료형' 이라고 분류하는데, 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문이다.
자바스크립트를 통해 웹 사이트나 애플리케이션의 자료를 다루기 위해선 하나의 변수에 여러 정보를 담을 수 있는 객체가 반드시 필요하다.

객체 간단히 살펴보기

책이라는 변수 안에 다양한 정보를 담기 위해 사용하는 자료형을 '객체'라고 한다. 제목, 저자, 쪽수, 가격의 정보를 묶어 book 객체로 표현할 수 있다.

var book = {
title : "자바스크립트",
author : "홍길동",
pages : 500,
price : 15,000
}

객체의 종류

내장 객체

자바스크립트에서 자주 사용하는 요소를 미리 객체로 정의해놓은 것
ex ) Date 객체를 통해 현재 시간을 알아낸다

문서 객체 모델(DOM)

객체를 통해 문서를 관리하는 방식
웹문서 및 웹문서에 포함된 이미지, 링크, 텍스트 필드도 각 별도의 객체로 만들어 놓았다

브라우저 객체 모델

웹 브라우저의 주소 표시줄이나 창 크기 등의 웹 브라우저 정보를 객체로 다루는 것
이들의 객체를 사용하면 알림 창을 표시하거나, 사용자 동작에 따라 원하는 사이트에 이동할 수 있도록 지정해준다.

사용자 정의 객체

사용자가 필요한 객체를 직접 정의하여 사용하는 것이다.

객체의 속성과 메서드

속성
객체에서 값을 담고 있는 정보를 '속성'이라고 한다. 객체의 속성 값을 가져올 땐 객체 이름 뒤에 마침표를 찍고 그 뒤에 속성 이름을 적는다.
메서드
객체가 어떻게 동작할지 선언해 놓은 함수
ex ) Window 객체엔 웹 브라우저 창과 관련된 메소드들이 존재.
f로 표시된 것은 function 을 줄여 표시한 것으로 함수를 의미한다.
즉, Window 객체 안에 alert, atob, blur 등의 메서드가 존재한다는 것이다.

※ window 객체의 경우, 함수의 이름만 사용해서 실행 가능하다.
window.alert("안녕하세요?") >> alert("안녕하세요?")

객체의 프로토타입과 인스턴스 소개

image 라는 객체가 존재한다면, 그 안엔 필요한 속성 및 기능이 존재한다. 이 객체를 3개로 똑같이 찍어내 만들어 볼 때, 원형이 되는 객체는 기본 틀의 개념이기 때문에 프로토타입 이라고 한다. 똑같이 찍혀진 3개는 프로토타입을 이용해 만들어진 객체이므로, 인스턴스 라고 한다.

프로토타입