9. 객체

9.1 객체 생성하기👊

9.1.1 객체의 생성자

자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합이다. 한 쌍을 이룬 것을 프로퍼티 그것의 이름을 키(key)라고 한다. 값으로는 모든 데이터 타입의 데이터를 저장할 수 있다.
객체를 생성하는 방법에는 다음 세가지가 있다.

1. 객체 리터럴로 생성하는 방법

var card = { suit: "하트", rank: "A" };

2. 생성자로 생성하는 방법

function Card(suit, rank) {
  this.suit = suit;
  this.rank = rank;
}
var card = new Card("하트", "A");
console.log(card); // Card { suit: '하트', rank: 'A' }

3. Object.create로 생성하는 방법

var card = Object.create(Object.prototype, {
  suit: {
    value: "하트",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  rank: {
    value: "A",
    writable: true,
    enumerable: true,
    configurable: true,
  },
});
console.log(card); // Card { suit: '하트', rank: 'A' }

9.1.2 프로토타입

생성자 안에서 메서드를 정의할 때 문제점

생성자 안에서 this 뒤에 메서드를 정의하면 모든 인스턴스에 똑같은 메서드가 추가된다. 따라서 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 그만큼의 메모리를 소비하게 된다.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
  this.area = function () {
    return Math.PI * this.radius * this.radius;
  };
}

// 각각의 인스턴스가 똑같은 메서드 area를 소유한다.
var c1 = new Circle({ x: 0, y: 0 }, 2.0);
var c2 = new Circle({ x: 0, y: 1 }, 3.0);
var c3 = new Circle({ x: 1, y: 0 }, 1.0);

이러한 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결 할 수 있다.

프로토타입 객체

JS는 함수도 객체이기 때문에 기본적으로 prototype 프로퍼티를 갖고 있다.

함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토타입 객체라고 한다. 기본적으로 빈 객체를 가리킴

function F() {}
console.log(F.prototype); // Object {}

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용

F.prototype.prop = "value";
var obj = new F();
console.log(obj.prop); // value

인스턴스의 프로퍼티에 값을 대입했을 때 이름이 같은 프로퍼티가 있으면 그 프로퍼티에 값을 대입한다.

obj.prop = "instance value";
console.log(obj.prop); // instance value
console.log(F.prototype.prop); // prototype value

프로토타입 객체의 프로퍼티를 인스턴스에서 참조할 수 있는 상황을 가리켜 인스턴스가 프로토타입 객체를 상속하고있다 라고 한다. 앞에서 언급한 생성자 안에서 this뒤에 메서드를 정의할 때 생기는 문제를 다음과 같은 코드로 해결할 수 있다.

모든 인스턴스는 area 메서드를 소유하지 않지만 프로토타입 객체의 area 메서드를 사용할 수 있다.

// Circle 생성자
function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
// Circle 생성자의 prototype 프로퍼티에 area 메서드를 추가
Circle.prototype.area = function () {
  return Math.PI * this.radius * this.radius;
};
// Circle 생성자로 인스턴스 생성
var c1 = new Circle({ x: 0, y: 0 }, 2.0);
var c2 = new Circle({ x: 0, y: 1 }, 3.0);
var c3 = new Circle({ x: 1, y: 0 }, 1.0);