[Javascript] Do it! 자바스크립트 입문 - 객체

공부단 5일차 입니다.

 

객체란?

객체는 복합 자료형입니다. 복합자료형이라고 하는 이유는 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문입니다. 객체는 자료형이기 때문에 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위입니다. 

 

객체의 구조

var book = {
	title: "자바스크립트", // 제목
    author: "홍길동", // 저자
    pages: 500, // 쪽수
    price: 15000 // 가격
}

 

객체의 종류

내장 객체

Date, Number, Boolean, Array, Math 등 입니다.

 

문서 객체 모델(DOM)

웹 문서 자체를 담는 Document 객체, 웹 문서 안의 이미지를 관리하는 Image 객체 등이 있습니다.

 

브라우저 객체 모델

사용중인 브라우저 종류나 버전을 담고 있는 Navigator 객체, 브라우저에서 방문한 기록을 남기는 History 객체, 주소 표시줄 정보를 담고 있는 Location 객체, 화면 크기 정보가 들어 있는 Screen 객체 등이 있습니다.

 

사용자 정의 객체

내장 객체뿐만 아니라 사용자가 필요할 때마다 자신의 객체를 정의해서 사용할 수 있습니다. 객체의 구조 부분에서 나온 book 같은 경우가 사용자 정의 객체 입니다.

 

객체의 속성과 메서드

객체에서 값을 담고 있는 정보를 속성(Property)이라고 합니다. 메서드는 객체가 어떻게 동작할지를 선언해 놓은 함수입니다.

 

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

웹 문서에 있는 요소를 프로그램에서 사용하려면 객체 형태여야 합니다. 만약 이미지를 다룬다 하면 Image객체를 사용합니다. Image객체는 웹 이미지가 공통으로 가지는 속성과 기능을 모아 놓은 것, 즉 기본 틀입니다. 이런 틀을 프로토타입이라고 합니다. 이런 프로토타입을 사용해서 만들어낸 객체를 인스턴스라고 합니다.

 

사용자 정의 객체 만들기 (리터럴 표기법)

리터럴 표기법은 변수를 선언과 동시에 값을 할당하는 표기 방식입니다.

// 장난감 객체 만들기
var toy = { // ToyRobot 객체를 선언한 후 속성과 함수 정의
    productId: "123-12", // 속성
    name: "Robot", // 속성
    price: "25,000", // 속성
    madeIn: "Korea", // 속성
    quantity: 10, // 속성
    showStock: function() { // 메서드
        alert(this.name+" 제품은 " + this.quantity + "개 남았다") 
    }
}

toy.showStock()

 

 

생성자 함수를 사용해서 객체 만들기

리터럴 표기법은 정해진 값을 가진 객체를 한 번만 만들어 내기 때문에 필요할 때마다 값을 변경해야하는 번거로움이 있습니다. 필요 속성과 함수의 틀만 만들고 필요할 때마다 그 틀을 가져와서 인스턴스를 만들 때 사용하는 것이 편리합니다. 이럴 때 사용하는 것이 생성자 함수입니다.

 

function Book(title, author, volume, price) {
    this.title = title
    this.author = author
    this.volume = volume
    this.price = price
}

var htmlB = new Book("웹 표준의 정석", "Ko", "608", 28000)
var jsB = new Book("모던 자바스크립트", "Ko", "123", 24000)
var reactB = new Book("React JS", "Ko", "321", 22000)

var bookList = [htmlB, jsB, reactB]

document.write("<h1>책 제목 살펴보기</h1>")
for(var i = 0; i < bookList.length; i++) {
    document.write("<p>" + bookList[i].title + "</p>")
}

 

이번 6장을 정리하면 자바스크립트에서 객체는 복합자료형이라고도 하며 자료를 저장하고 처리하는 기본 단위입니다. 자바스크립트에는 내장객체, 문서객체 등 다양한 객체들이 존재하고 추가로 사용자가 직접 객체를 만들어 사용할 수 있고 이것을 사용자 정의 객체라고 합니다. 객체에서 값을 담고 있는 정보를 속성, 객체 안에 미리 정의되어 있는 함수를 메서드라고 합니다. 객체를 만들 때는 리터럴표기법으로 만드는 것보다는 속성과 함수의 기본틀만 만들고 언제든지 다른 값을 넣을 수 있게 만드는 것이 좋습니다. 그럴 때 사용하는 것이 생성자 함수입니다.