[JS] 생성자 함수와 객체 리터럴의 차이

1. 객체 리터럴의 문제

---

단 하나의 객체만 생성하므로 동일한 프로퍼티를 갖는 객체를 여러개 생성해야할 때 비효율적이다.

const square1 = {
	side: 3,
    getArea() {
    	return this.side*this.side;
    }
};

console.log(square1.getArea()); // 9

const square2 = {
	side: 5,
    getArea() {
    	return this.side*this.side;
    }
};

console.log(squre2.getArea()); // 25

문제는, 객체마다 프로퍼티 값이 다를 수 있지만 메서드가 동일한 경우가 많다는 사실이다.

예시로 정사각형을 표현한 square1과 square2는 프로퍼티 구조가 동일하다.

 

이런 경우 객체 리터럴은 구조가 동일함에도 매번 같은 프로퍼티와 메서드를 기술해야한다.

이를 대비하기 위해 생성자 함수가 나왔다.

 

2. 생성자 함수의 편의

---

생성자 함수를 이용하면 여러 개의 객체를 간편하게 생성 가능하다.

이를 통해 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성했다.

function Square(side) {
	// this는 생성자 함수가 생성할 인스턴스를 가리킨다.
	this.side = side;
    this.getArea = function() {
    	return this.side * this.side;
    };
}

const square1 = new Square(3);
const square2 = new Square(5);

생성자 함수가 생성한 객체는 인스턴스라고 부른다.

 

this

---

this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 변수이다.

this가 가리키는 값은 함수 호출 방식에 따라 동적으로 결정된다.

 

생성자 함수로 호출된 경우, this가 가리키는 값은 생성자 함수가 생성할 인스턴스이다.