기존에는 팩토리 함수를 통해, 혹은 생성자 함수를 통해서 객체를 생성하는 방식을 사용했었다. ES6 이 후로부터 클래스를 통한 객체를 생성하는 방식이 생겼는데, 함수로 객체를 생성하는 방법과 클래스를 사용해 객체를 생성하는 방법까지 간단하게만 알아보자.

팩토리 함수(Factory function)

간단한 예시를 들어 설명하자면 이런 자바스크립트 코드가 있다.

function makeRGB (r, g, b) {
  return {r, g, b};
}

console.log(makeRGB(0, 0, 0));
// {r: 0, g:0, b:0}

이렇게 RGB 색상 정보가 들어가있는 객체를 만들어주는 함수를 간단하게 만들 수 있는데, 함수가 객체를 반환하는 경우 이런 함수를 팩토리 함수라고 부른다. 객체를 만들어내는 공장이라고 생각하면 쉽다.

생성자 함수(Constructor function)

유사한 객체를 여러개 생성해야하는 상황일 때, 팩토리 함수의 생산성은 효율적이라고 할 수 없다.

function makeRGB (r, g, b) {
  this.r = r;
  this.g = g;
  this.b = b;
}

const black = new makeRGB(0, 0, 0);
const white = new makeRGB(255, 255, 255);

console.log(black); // makeRGB(r: 0, g: 0, b: 0)
console.log(white); // makeRGB(r: 255, g: 255, b: 255)

console.log(black.r); // 0
console.log(white.b); // 255

생성자 함수의 기본 알고리즘은 이렇다

function makeRGB (r, g, b) {
	// this = {};

	// this 안에 프로퍼티 추가
 this.r = r;
 this.g = g;
 this.b = b;

	// return this;
}

this 에 빈 객체를 담아두고 함수가 실행되면 this 에 새로운 프로퍼티를 추가하여 비어있던 this 를 수정한 뒤, 수정된 this 를 반환한다.

this 를 사용하는 경우에는 호출하는 위치에 따라 결정이 되므로 주의해야한다. 기본적으로 this 는 window 를 가리키고 있기 때문에 함수를 호출할때는 new 를 붙혀서 호출해야만 원하는 결과값을 얻을 수 있다.

const black = new makeRGB(0, 0, 0);
const white = new makeRGB(255, 255, 255);

클래스(Classes)

ES6 이후 추가된 클래스 문법은 서로 연관된 변수와 함수를 묶어주는 템플릿 역할을 하게된다. 생성자 함수를 더 편리하게 사용할 수 있도록 도입되었는데, 객체 단위의 코드를 그룹으로 묶어주며 재사용 또한 가능하다.

class 키워드를 사용하여 클래스 선언 후, constructor 메서드 안에 코드를 작성하면 된다. 코드의 작성 방법 자체는 동일하다. 다만 클래스로

class makeRGB {
  constructor(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
  }
} 

const black = new makeRGB(0, 0, 0);
const white = new makeRGB(255, 255, 255);

console.log(black); // makeRGB(r: 0, g: 0, b: 0)
console.log(white); // makeRGB(r: 255, g: 255, b: 255)

console.log(black.r); // 0
console.log(white.b); // 255

---

참고 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this