모던 자바스크립트 Deep Dive의 10장 "객체 리터럴" 부분에서,
객체 리터럴에 의한 객체 생성 방식을 알아봤습니다.
이번 17장에서는 생성자 함수에 의한 객체 생성 방식을 알아보겠습니다.
우선 생성자 함수로 객체를 만들어보겠습니다.
// 객체 생성
const person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.age = 20;
console.log(person) // {name: "Lee", age: 20}
객체를 생성할 때,
new Object();
로 만들 수 있습니다.
이외에도 new 연산자를 사용하면,
String, Number, Boolean, Function, Array, Date, RegExp, Promise
등의 객체를 만들 수 있습니다.
그러나 반드시 Object 생성자 함수를 사용해 객체를 만들 필요는 없습니다.
오히려 객체 리터럴을 사용하는 것이 더 간편해 보입니다.
그렇다면 왜 Object 생성자 함수를 사용해 객체를 생성할까요?
객체 리터럴로 객체를 새성하면, 단 하나의 객체만 생성합니다.
따라서 동일한 프로퍼티를 갖는 객체를 여러 번 생성해야 할 경우, 비효율적입니다.
// 반지름이 5인 원의 객체
const circle1 = {
radius: 5;
getDiameter() {
return 2 * this.radius;
}
};
console.log(circle1.getDiameter()); // 10
// 반지름이 10인 원의 객체
const circle2 = {
radius: 10,
getDiameter() {
return 2 * this.radius;
}
};
console.log(circle1.getDiameter()); // 20
위 코드에서 두 객체는 radius
부분만 다른 것을 확인할 수 있습니다.
그러나 radius
부분만 다르게 하여 객체를 여러 번 생성해야 할 경우, 코드가 비효율적입니다.
이러한 방식으로 수십 개의 객체를 생성해야 한다면 어떻게 해야 할까요?
이번에는 똑같은 코드를 생성자 함수 방식으로 바꿔보겠습니다.
// 원의 객체
function circle(radius) {
this.radius = radius;
this.getDiameter = function() {
return 2 * this.radius;
}
};
// 인스턴스 생성
const circle1 = new Circle(5); // radius = 5
const circle2 = new Circle(10); // radius = 10
console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20
위 코드에서, 생성자 함수에 의한 객체 생성 방식은
객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼
프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있습니다.
생성자 함수의 역할은
프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작하여
하는 것입니다.
function Circle(radius) {
// 1. 인스턴스 생성과 this 바인딩
// 2. 인스턴스 초기화
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
// 3. this가 완성된 인스턴스를 암묵적으로 반환
}
// 인스턴스 생성
const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: f}
};
위 코드에서 암묵적으로 인스턴스가 생성되고, this에 바인딩 됩니다.
바인딩이란 식별자와 값을 연결하는 과정으로,
this 바인딩은 this 키워드와 this가 가리킬 객체를 연결합니다.
이후 인스턴스가 초기화 및 할당되어, 이후 반환됩니다.