일러두기
- 본 글은 ‘모던 자바스크립트 Deep Dive’ 17장, ’생성자 함수에 의한 객체 생성’을 참고하여 작성되었습니다.
- 글에 틀린 점이 있다면 댓글로 피드백 부탁드립니다 :)
객체를 생성하는 방법, 한 가지가 아니다!
강의를 들을 때 new 연산자로 객체를 만드는 과정들이 계속 생소하게 느껴져서 책으로 짚고 넘어갈 필요가 있다고 느꼈다. 아니나 다를까 모던 자바스크립트 Deep Dive를 찾아 보니 중괄호에 프로퍼티와 메소드를 입력해서 객체를 생성하는 가장 익숙한 방법 말고도 자바스크립트에는 객체를 생성하는 방법이 몇 가지 더 있다고 한다. 우리가 아는 가장 익숙한 방법은 ‘객체 리터럴’을 활용한 객체 생성 방법이라고 부르고, 그 외에도 Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스 등을 활용해 새로운 객체를 생성할 수 있다.
객체 생성법
1. 객체 리터럴
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스 (ES6)
다섯가지의 방법 중 ‘객체 리터럴’을 사용한 생성법을 제외한 나머지는 모두 함수를 사용해 객체를 생성한다.
본 글에서는 객체 리터럴을 사용해서 객체를 생성하는 것과 생성자 함수를 사용해서 객체를 제작하는 것이 각각 어떻게 다른지, 어떤 장단이 있는지 알아보려한다.
객체 리터럴
객체 리터럴을 사용한 객체 생성법은 우리가 익히 아는대로다. 중괄호 내부에 프로퍼티, 메서드를 직접 할당한다.
var person = {
name: 'Lee',
sayHello: function () {
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: ƒ}그렇다면 이렇게 직관적이고 편리한 객체 생성법이 있는데, 왜 굳이 함수를 사용해서 객체를 만들려고 하는 것일까?
객체의 템플릿이 필요할 때
아래 코드에서 반복되는 객체 구조를 눈여겨보자
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()); // 20circle1, circle2 객체는 radius key에 할당된 value만 다를 뿐이지, 객체 내부에 radius 프로퍼티와 이를 활용해 지름을 계산하는 메서드가 있는 구조 자체는 동일하다.
객체 리터럴로 객체를 생성하면 직관적이고 편하지만, 이와 같이 반복되는 구조의 객체가 있을 때 대처하지 못한다는 단점이 있다. 이 때 바로 생성자 함수를 사용해서 객체를 생성하면 위와 같은 코드를 조금 더 간결하게 만들 수 있다. 이 때 이 ‘생성자 함수를 사용해서 생성한 객체’는 인스턴스라고 부른다.
인스턴스 만들기
1.생성자 함수선언
2.new 연산자와 함께생성자 함수를 호출해서인스턴스생성
// 1. 생성자 함수의 선언
function Circle(radius) {
// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
// 2. 인스턴스의 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성
console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20위 경우 코드 길이 자체는 크게 줄지 않았지만, 반복될 객체의 구조를 생성자 함수로 템플릿처럼 지정해두고 필요할 때 new 연산자와 함께 호출하여 동일한 구조의 객체를 쉽게 생성할 수 있다는 장점이 있다.
