[JavaScript] Instantiation Patterns

객체 지향 프로그래밍은 수작업이 아닌 공장에서의 생산작업을 의미한다. 하나의 공장(원형)을 만든 후, 같은 성격의 제품들(인스턴스)을 계속해서 찍어내는 것이다. 자바스크립트에 class 가 등장하면서, 공장을 만들어내기가 훨씬 쉬워졌지만, 그 전에는 어떤 방식으로 인스턴스들을 만들어냈을까?

 

크게 다음의 네 가지 방법이 있다. 이들은 레거시 코드로 이와 같은 방식으로 코드를 작성할 일은 많지 않다. 하지만 이미 만들어진 코드를 이해하는 데 중요하므로 알아둘 필요가 있다. 

 

1. Functional

var Shoes = function(brand){
  var shoeInstance = {};
  shoeInstance.brand = brand;
  shoeInstance.run = function(){
    console.log('I am running with ' + brand);
  }
  return shoeInstance;
}

var nike = Shoes('nike'); 

생성자함수를 이용해 객체를 만들어내는 방식이다. 함수 내 프로퍼티와 메소드가 모두 들어가 있다. 이 경우에는 인스턴스들이 생겨날 때마다 프로퍼티와 메소드가 새로 생겨난다. 메모리 사용 관점에서 효율적이지 못하다.

 

 

2. Functional Shared

// functional shared
var extend = function(to, from){
  for(let key in from){
    to[key] = from[key];
  }
};

var shoeMethods = {};
shoeMethods.run = function(){
  console.log('I am running with ' + this.brand);
}

var Shoes = function(brand){
  var shoeInstance = {};
  shoeInstance.brand = brand;
  extend(shoeInstance, shoeMethods)
  return shoeInstance;
}

var nike = Shoes('nike'); 

functional 방식의 메모리 문제를 해결한 방식이 functional shared 방식이다. 외부에 있는 shoeMethods 객체에 메소드를 따로 저장하고, 이를 인스턴스들이 참조할 수 있도록 했다(share). 따라서 인스턴스들이 생겨날 때마다 메소드 때문에 추가적으로 메모리를 차지하지 않는다. 

 

3. Prototypal

// prototypal
var shoeMethods = {};
shoeMethods.run = function(){
  console.log('I am running with ' + this.brand);
}

var Shoes = function(brand){
  var shoeInstance = Object.create(shoeMethods);
  shoeInstance.brand = brand;
  return shoeInstance;
}

var nike = Shoes('nike'); 

functional shared 와 유사하나, object.create() 를 사용해 코드를 더 간결하게 만들었다. object.create(obj) 는 obj를 프로토타입으로 하는 객체를 생성하는 함수다. 위 코드에서는 메소드가 담긴 객체 shoeMethods 를 프로토타입으로 하는 객체를 만들어 안에 프로퍼티들을 추가하는 방식으로 인스턴스를 만들어냈다. 

 

4. Pseudoclassical

// pseudoclassical
var Shoes = function(brand){
  this.brand = brand;
};

Shoes.prototype.run = function(){
  console.log('I am running with ' + this.brand);
};

var nike = new Shoes('nike'); 

네 가지 중 가장 간결한 방식이다. 유의할 점은, 인스턴스를 만들 때 'new' 키워드를 꼭 붙여주어야 한다는 점이다.