자바스크립트 객체 - Do It 자바스크립트 기본편

객체(Object)

자바스크립트에서 데이터를 저장하고 처리하는 기본 단위. (자바스크립트는 객체 기반 언어)

하나의 변수에 여러 데이터를 담기 위해 사용하는 데이터타입.

자바스크립트 프로그램에서 인식할 수 있는 모든 대상을 가리킴. (ex- 웹 브라우저나 웹 문서와 관련된 것들)

 

객체의 종류 in Javascript

• 내장 객체(Built-in Object) : Number, Boolean, Array, Math, Date객체 등

• 문서 객체 모델(DOM) : 객체를 사용해 웹 문서를 관리하는 방식. 웹 문서뿐만 아니라 웹 문서에 포함된 모든 요소들(이미지, 링크, 텍스트필드 등)도 각각 별도의 객체로 미리 만들어 놓고 관리. ex) Document객체, Image객체 등

• 브라우저 객체 모델(BOM) : 웹 브라우저 정보(주소 표시줄, 창 크기 등)을 객체로 다루는 것.

  ex) Navigator객체(사용 중인 브라우저 종류, 버전 정보), History객체(브라우저에서 방문한 기록), Location객체(주소 표시줄 정보), Screen객체(화면 크기 정보) 등

• 사용자 정의 객체

 

객체의 속성(Property)과 메서드(Method)

속성 : 값을 담고 있는 정보. '객체.속성이름'으로 속성에 담긴 값을 불러올 수 있다.

메서드 : 객체가 어떻게 동작할지를 선언해 놓은 함수. '객체.메서드이름()'으로 메서드를 실행할 수 있다. *Window 객체의 메서드는 'window.'을 생략하고 메서드 이름만으로 실행가능

 

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

프로토타입(Prototype): 기본 틀이 되는 객체

인스턴스(Instance) : 프로토타입을 사용해 만들어낸 객체

ex) Image 객체 : 모든 웹 이미지가 공통으로 가지는 속성과 기능을 모아놓은 것.

→ 웹 이미지를 만들기 위한 기본 틀, 프로토타입

→ Image 객체를 사용해 만든 객체에 원하는 웹 이미지를 담은 것, 인스턴스

 

객체의 인스턴스 만들기

var now = new Date();2019
now.toLocaleString();

Date객체의 인스턴스를 만들어서 변수 now에 담는다. → 변수 now를 통해 Date 객체에 정의된 속성과 함수를 사용할 수 있다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_objects

ㄴ자바스크립트 내장 객체 정보

*Math객체는 다른 객체와 달리 인스턴스를 생성하지 않고 사용할 수 있음.

(Math객체의 모든 속성과 메서드는 정적.)

 

사용자 정의 객체 만들기

1) 객체 리터럴 표기법

리터럴 : 프로그래밍에서 자료를 표기하는 방식. 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식을 말함.

객체 리터럴 표기법 : 객체를 선언하면서 동시에 값을 지정하는 것. 프로토타입(객체 틀)을 만들지 않고 개별적으로 객체를 선언하고 사용하는 방법.(일회용 객체 만들기)

공통으로 들어가는 속성과 메서드가 별로 없어서 각 객체를 따로 정의하는 것이 편할 때 사용.

var book = {
	title: "자바스크립트",
	author: "고쌤",
	price: 15000,
	info: function() {
		alert(this.title + "책의 가격은 " + this.price +"원 입니다.");
	}
};

book.title;
book.info();

book.field = "IT"; //객체 생성 후 새로운 속성 추가

 

2) 생성자 함수

생성자 함수(Constructor) : 객체를 만들어 내는 함수.

function Book(author, pages, price, title) {
	this.author = author;
	this.pages = pages;
	this.price = price;
	this.title = title;
} 
//생성자 함수 선언해 객체 만들기

var jsBook = new Book("문선경", 500, 15000, "자바스크립트");
//생성자 함수를 실행해 객체의 인스턴스 만들어 jsBook 변수에 담기