javaScript-객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하다. 

 

하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다.

 

따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.

 

const circle1 = {
	redius: 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

객체는 프로퍼티를 통해 객체 고유의 상태를 표현한다.

 

그리고 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작을 표현한다.

 

따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.

 

 

 

예시에서 원을 표현한 객체인 circle1 객체와 circle2 객체는 프로퍼티 구조가 동일하다. 

 

객체 고유의 상태 데이터인 radius 프로퍼티의 값은 객체마다 다를 수 있지만 getDiameter 메서드는 완전히 동일하다.

 

하지만 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 작성해야한다.

 

여기서 만약 수십, 수백개의 객체를 생성해야 한다면 문제가 크다.

 

---

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getDiameter = function() {
  return 2 * this.radius;
};

const circle1 = new Circle(5);
console.log(circle1.getDiameter()); // 10

const circle2 = new Circle(10);
console.log(circle2.getDiameter()); // 20

여기서 Circle 생성자 함수를 정의하고,  이 함수의 프로토타입 객체에 getDiameter 메서드를 정의한다.

 

이후에는 new 연산자를 사용하여 Circle 생성자 함수를 호출하여 새로운 circle1 및 circle2 객체를 생성한다.

 

프로토타입을 이용한 방식은 객체의 속성과 메서드를 더 명확하게 나눌 수 있으며, 객체를 생성하는 방식도 더욱 명시적이라서 유지보수에 더 효과적일 것 같다.