자바스크립트 사용자 정의 객체 만들기

 

 

자바스크립트에는 수많은 내장 객체가 존재하지만 필요하다면 사용자가 직접 객체를 만들 필요가 있다.

이렇게 사용자가 직접 만든 객체를 '사용자 정의 객체'라고 한다.

 

사용자 정의 객체를 만드는 방법에는 몇 가지 있는데 그중 가장 많이 사용하는 객체 리터럴과 생성자 함수를 사용하는 방법을 알아보겠습니다.

 

리터럴 표기법을 사용해 객체만들기

리터럴(Literal)이란 프로그래밍에서 자료를 표기하는 방식입니다. 리터럴을 사용해서 표기한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식을 말합니다. 다음과 같이 변수를 선언하면서 동시에 값 10을 지정하는 것이 바로 리터럴 표기법입니다.

 

var a = 10;

그렇다면 '객체 리터럴 표기법'이란 객체를 선언하면서 동시에 값을 지정해 주는 것이겠죠? 객체 리터럴을 사용해 객체를 정의할 때는 중괄호{} 안에 '속성 이름 : 값'을 하나의 쌍으로 지정합니다. 속성이 여러 개일 경우 속성마다 쉼표를 넣어 구분합니다.

 

var toyRobot = {
    productId: "123-12",
    name: "Robot",
    price: "25,000",
    madeIn: "Korea",
    quantity: 10,
    showStock: function(){
        document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남아있습니다.";
    }
};

여기서 toyRobot은 객체이며 productId,name,price,madIn,quantity 은 속성 이름이고 그 : 옆에 있는 것들은 속성 값입니다.

showStock은 함수 이름입니다.

 

 

하지만 이와 같은 방식은 정해진 값을 가진 객체를 한 번만 만들어 냅니다. 즉 집어넣어야 할 데이터가 많다면 이 방식은 시간이 오래 걸립니다. 그렇다면 항상 필요한 속성과 함수는 틀처럼 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 책정보 값을 담는 것이 편리하지 않을까요? 이때 우리는 생성자 함수를 사용해 객체를 만듭니다.

 

생성자 함수란 객체를 만들어 내는 함수를 말합니다. 이 또한 함수이므로 funciton 예약어를 사용해 선언하고 그 안에 객체의 속성과 함수를 정의할 때는 자기 자신을 가리키는 this 예약어를 사용합니다.

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

jsBook = new Book("홍길동",300,10000,"자바스크립트")

 

 

 

이 글은 'Do it 웹 프로그래밍을 위한 자바스크립트 기본편' 을 기반으로 작성했습니다.