[JavaScript] 생성자 함수

이번 과제는 생성자 함수 그리고 this, prototype을 사용하여 문제를 해결해나가는 것이 key point였던 것 같다.

그래서 생성자 함수를 왜 사용하는지 그 목적에 대해 정리해보려고 한다. 

생성자 함수의 정의와 다양한 객체 생성 방식 중 생성자 함수를 사용하는 방식에 대해 알아보자.

 

생성자 함수(constructor)란?

new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수이다.

생성자 함수에 의해 생성된 객체를 인스턴스(instance)라고 한다.

> 참고 | 자바스크립트는 빌트인 생성자 함수를 제공한다. (Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise)

 

객체 리터럴에 의한 객체 생성 VS 생성자 함수에 의한 객체 생성

객체 리터럴은 직관적이고 간편하지만 단 하나의 객체만 생성한다. 따라서 동일한 property를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 property를 기술해야 하기 때문에 비효율적이다.

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()); // 20

객체는 property를 통해 고유의 상태를 표현하고, 메서드를 통해 상태 데이터인 property를 참조하고 조작하는 동작을 표현한다. property는 객체마다 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.

위의 예제처럼 상태 데이터 radius값은 다르지만, getDiameter 메서드는 완전히 동일하다.

객체 리터럴 방식으로 객체를 생성할 경우 property 구조가 동일함에도 불구하고 매번 같은 property와 method를 작성해야 한다.

만약 수백, 수천 개의 객체를 생성해야 한다면 문제가 생길 것이다.

 

반면 생성자 함수로 객체 생성을 할 경우,

인스턴스를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 property 구조가 동일한 객체 여러 개를 생성할 수 있다.

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

// 인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

생성자 함수는 이름 그대로 인스턴스(객체)를 생성하는 함수이다. 자바와 같은 클래스 기반 객체지향 언어의 생성자와는 다르게 그 형식이 정해져 있는 것이 아니라 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출되면 해당 함수는 생성자 함수로 동작한다.