[javascript] Class vs Factory 함수 비교

wonsama (79)in #kr • 6 years ago

Class vs Factory

class는 ES6(ECMAScript 2015)에서 추가된 문법으로, class 함수 와 factory 함수를 비교해 보려 합니다.

class

class TodoModel {
    constructor(){
        this.todos = [];
        this.lastChange = null;
    }
    
    addToPrivateList(){
        console.log("addToPrivateList"); 
    }
    add() { console.log("add"); }
    reload(){}
}

factory function

function TodoModel(){
    var todos = [];
    var lastChange = null;
        
    function addToPrivateList(){
        console.log("addToPrivateList"); 
    }
    function add() { console.log("add"); }
    function reload(){}
    
    return Object.freeze({
        add,
        reload
    });
}

캡슐화(Encapsulation)

내부 변수, 감추고싶은 함수에 접근 가능한지 여부를 확인

class : 접근 가능

var todoModel = new TodoModel();
console.log(todoModel.todos);     //[]
console.log(todoModel.lastChange) //null
todoModel.addToPrivateList();     //addToPrivateList

factory : 접근 불가

var todoModel = TodoModel();
console.log(todoModel.todos);     //undefined
console.log(todoModel.lastChange) //undefined
todoModel.addToPrivateList();     //taskModel.addToPrivateList is not a function

불변성(Immutable API)

한번 정의된 기능(함수)은 변경되지 않아야 됩니다.

class : 함수 변경 가능

todoModel.reload = function() { console.log("a new reload"); }
todoModel.reload();            //a new reload

factory : 함수 변경 불가

todoModel.reload = function() { console.log("a new reload"); }
todoModel.reload();            //reload

new

factory 함수를 사용하여 객체를 만들 때 new는 필요하지 않지만 더 읽기 쉽도록 만들면 갈 수 있습니다. 아무런 해가 없습니다.

factory : new 키워드를 사용해도 무방함(사용해도 되고, 안해도 되고)

var todoModel= new TodoModel();

상속(inheritance)

class : extends 키워드를 통해 class 정의를 상속받을 수 있음

class Service {
  doSomething(){ console.log("doSomething"); }
}
class SpecialService extends Service {
  doSomethingElse(){ console.log("doSomethingElse"); }  
}
var specialService = new SpecialService();
specialService.doSomething();
specialService.doSomethingElse();

class : java 에서 interface를 구현하는 것처럼 외부 파라미터를 통해 injection 받아 구현

class Service {
  doSomething(){ console.log("doSomething"); }
}
class SpecialService{
  constructor(args){
    this.service = args.service;
  }
  doSomething() { this.service.doSomething(); } 
  
  doSomethingElse(){ console.log("doSomethingElse"); }
}
var specialService = new SpecialService({
   service : new Service()
});
specialService.doSomething();
specialService.doSomethingElse();

function : class에서 2번째 구현한 방식으로 처리

function Service() {
  function doSomething(){ console.log("doSomething"); }
  return Object.freeze({
    doSomething
  });
}
function SpecialService(args){
  var service = args.service;
  function doSomethingElse(){ console.log("doSomethingElse"); }
  return Object.freeze({
    doSomething : service.doSomething,
    doSomethingElse
  });
}
var specialService = SpecialService({
   service : Service()
});
specialService.doSomething();
specialService.doSomethingElse();