11. 팩토리 함수

◼ Factory Function ?

 

팩토리 함수는 클래스나 생성자 함수에는 속하지 않는 함수이자, 새로운 객체를 리턴하는 함수이다. 

new 키워드가 없으면 팩토리 함수일 확률이 높다.

 

const name = "mung";
const age = 28;

const user = {
  name,
  age,

  setUserName(name) {
    this.userName = name;
    return this;
  },
};

console.log(user.setUserName("choi").userName); // "choi"

 

user.setUserName("choi") 는 .setUserName() 을 user 에게 적용한다. 이 때, this 는 user 가 되며 

.setUserName() 내부의 this 를 통해 user 객체의 .userName 속성을 변경한다. return this; 는 메소드 체이닝을 할 수 있게 한 것이다.

 

◼ Literals for One, Factories for Many 

 

객체를 반복해서 생성해야 하는 경우 객체 리터럴과 팩토리 함수의 기능을 결합해야한다. 팩토리 함수를 사용하면 원하는 만큼 많은 객체를 생성할 수 있기 때문이다. ex) 채팅 어플리케이션

 

const createUser = ({ name, age }) => ({
  name,
  age,
  setUserName(name) {
    this.userName = name;
    return this;
  },
});

console.log(createUser({ name: "mung", age: 28 }));

 

 

 

✅ ({name, age}) 부분과 같이 객체 리터럴을 암시적으로 반환하고 싶은 경우 중괄호 바깥을 괄호로 감싸주어야 한다는 점에 주의하자.

 

 

◼ Destructuring

 

const createUser = ({ userName, age }) => ({

 

중괄호 ( { , } ) 는 객체를 해체하라는 의미로 해석된다. 이 함수는 하나의 인수(객체) 를 받지만 이를 해체하여 userName 과 age 라는 두 매개변수에 값을 바인딩한다.

 

---

👀 reference 

 

https://tpgns.github.io/2018/04/08/javaScript-factory-function-with-es6/