여러 자료를 담는 객체(object)

객체는 복합 자료형이라고 불립니다. 이유는 객체안에는 여러 자료형을 포함가능하기 때문입니다. 하지만 객체또한 자료형이기에 자바스크립트에서는 객체도 자료형의 기본단위 중 하나입니다.

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

객체를 사용하면 위의 예시처럼 여러 정보를 하나의 단위로 묶어서 저장하는것이 가능하다. 자바스크립트에서 웹사이트나 애플리케이션에서의 자료를 다루려면 하나의 변수에 여러 정보를 담을수 있는 객체가 필요합니다.

자바스크립트에서의 객체 종류

자바스크립트는 웹문서와 관련된 것들을 전부 객체로 인식합니다.

내장객체

자바스크립트에서 자주 사용하는 요소는 이미 자바스크립트 안에 미리 객체로 정의되어 있습니다. 이러한 객체를 built-in object, 내장객체라고 합니다. 날짜 및 시간을 계산하는 Date 객체, Number, boolean, Array 등의 여러 내장객체가 존재합니다.

문서객체모델(DOM)

웹문서를 객체로 관리하는 방식을 문서객체모델(Document Object Model)이라 합니다. DOM에서는 웹문서 말고도 웹문서 내의 모든 것들을 객체로 별도의 객체로 만들어 놓았습니다. (이미지, 텍스트, 링크 등등) 웹문서 자체를 나타내는 Document 객체, 이미지를 나타내는 Image 객체등 다양한 웹문서 객체가 존재합니다.

브라우저 객체 모델 (BOM)

DOM은 웹문서를 관리하는것 처럼 BOM은 브라우저 정보를 객체로 다루는 것을 말합니다. (Browser Object Model) BOM에서는 사용중인 브라우저의 종류나 버전을 담는 Navigator객체, 브라우저에서 방문한 기록을남기는 History 객체, 주소표시줄을 나타내는 Location 객체등 여러 객체가 존재합니다.

사용자 정의 객체

내장객체 말고도 사용자 스스로가 객체를 만들어서 사용이 가능합니다. 위의 book 예제처럼 여러가지 정보를 하나의 단위로 이용할때 객체로 생성하여 사용합니다.

객체의 속성과 메서드

객체를 이루는 것에는 두가지 종류가 있습니다. 객체에서 데이터를 담고있는 속성(property)와 메서드(method)입니다. 속성을 리터럴로 나타낼때에는 객체뒤에 .(점)을 붙여서 나타냅니다.

메소드는 객체 내부에 정의해 놓은 함수를 말합니다. 메소드는 객체가 어떻게 동작할지를 정의해 놓은 객체 내부의 함수를 뜻합니다. 리터럴로 나타낼때에는 객체뒤에 .(점)을 붙이고 함수처럼 뒤에 괄호를 붙입니다. 대표적인 메소드로 alert()가 있습니다. 이는 window 객체에 정의되어 있는 메소드 입니다.

Window 객체와 같은 자바스크립트 최상위 객체에 메소드를 이용할때는 객체이름을 붙일필요 없이 함수만 사용하는 것이 가능합니다.

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

객체를 다룰때에는 그저 객체가 아닌 두가지 형식이 존재합니다. 객체를 만들어내기 위해 설계도와 같은 역할을 하는 프로토타입과 프로토타입으로 실제로 객체로 만들어진 인스턴스가 있습니다.

객체를 만들어내는 틀같은 역할이 프로토타입, 실제로 데이터를 가지고 존재하는 객체를 인스턴스라 합니다. 인스턴스를 만들때에는 new 키워드를 사용합니다. new 키워드 뒤에 객체이름과 괄호를 붙여줍니다.

const now= new Date(); //now는 Date 객체의 인스턴스 인스턴스는 프로토타입에서 정의한 속성과 함수를 모두 사용 가능하다.

사용자 정의 객체 만들기

자바스크립트에서는 내장객체 말고도 사용자가 직접 객체를 만들어서 사용하는것이 가능하다. 이렇게 사용자가 만든 객체들을 유저정의 객체라고 합니다.

객체 생성 방법

• 리터럴 표기법

  리터럴 표기법은 프로그래밍에서 자료를 표기하는 방법을 말합니다. 리터럴로 표기한다는 것은 선언과 동시에 값을 지정해주는 표기방식을 말합니다.

  객체를 리터럴로 선언할때는 중괄호로 묶어서 중괄호 안에 속성이름:값 형식으로 쌍을 지정합니다. 여러개일때는 쉼표로 구분합니다. 또한 함수를 값으로 할때도 함수이름:함수 형식으로 지정합니다.

 const a = 10; //선언과 값 지정을 동시에 한다.

 const book = {     //객체 리터럴 표기
 	title:"자바스크립트",
 	author:"홍길동",
 	pages: 500,
 	price: 15000,
 	info: function(){
 		alert(this.title + "책의 분량은" + this.pages + "쪽입니다.");
 	};

 book.title; //title 값 사용
 book.info(); //info 함수 사용 객체의 속성을 사용할때는 .을 찍고 그 다음에 명시한다.

 book.field="IT"; //현재 객체에 없는 속성을 표기하면 새로운 속성으로 추가된다.

• 생성자 함수 사용

  리터럴 표기법은 객체를 한번만 생성해 내며 같은 속성을 가진 객체를 복수로 생성하려면 계속해서 중괄호로 감싸서 일일히 작성해야합니다. 이렇게 값은 다르지만 같은 속성의 객체를 만들때는 생성자 함수를 이용합니다. 생성자 함수는 객체에 필요한 속성과 함수를 미리 지정해두고 필요할 때 마다 생성자 함수를 이용하여 객체를 생성하는게 가능합니다.

    //this는 생성될 객체자체를 가리킵니다. 생성자 함수의 파라미터들이 객체의 속성이 됩니다.
    function Book(author, pages, price, title){
    	this.author=author;
    	this.pages=pages;
    	this.price=price;
    	this.title=title;
    }

    //생성자 함수로 실제 객체를 생성할때는 new 키워드를 이용합니다. 해당 생성자로 새로운 객체가 만들어 졌습니다.
    const jsBook = new Book("닐스", 500, 15000, "집강아지");

    ```