객체 리터럴에 의한 객체 생성 방식의 문제점과 생성자 함수에 의한 객체 생성 방식의 장점

모던 자바스크립트 Deep dive로 공부하는 내용입니다. 

객체는 프로퍼티를 통해 객체 고유의 상태를 표현한다.
메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작을 표현한다.
따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.
객체 리터럴은 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.

객체리터럴에 의한 객체 생성 방식

직관적이고 간편하나 비효율적이다. 
원을 표현한 객체인 circle1 객체와 circle2 객체는 프로퍼티 구조가 동일하다.

객체 고유의 상태 데이터인 radius 프로퍼티의 값은 객체마다 다를 수 있지만 getDiameter 메서드는 완전히 동일하다.
객체가 한,두 개라면 넘어갈 수도 있겠지만 만약 수십 개의 객체를 생성해야 한다면 문제가 크다.

const circle1 = {
    radius : 5,
    getDiameter() {
        return 2 * this.radius;
    }
};

console.log(circle1.getDiameter()); //10

const circle2 = {
    radius: 10,
    getDiameter() {
        return 2* this.radius;
    }
};

console.log(circle2.getDiameter()); // 20

 

생성자 함수에 의한 객체 생성 방식의 장점
생성자 함수에 의한 객체 생성방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

//생성자함수
function Circle(radius) {
    //생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
    this.radius = radius;
    this.getDiameter = function() {
        return 2 * this.radius;
    };
}

//인스턴스의 생성
const circle1 = new Circle(5); //반지름이 5일 Circle 객체를 생성
const circle2 = new Circle(10); //반지름이 10인 Circle 객체를 생성

console.log(circle1.getDiameter()); //10
console.log(circle2.getDiameter()); //20