자바스크립트와 믹스인

서론

자바스크립트에 클래스(class)가 추가된지도 시간이 흘렀다. 이제 Js의 클래스는 일종의 문법적설탕(Syntatic sugar)이며, Js의 클래스는 사실 일종의 함수라는 것도 널리 알려졌다고 생각한다. 즉, 자바스크립트는 근본적으로 prototype기반의 언어라는 것은 변하지 않았다는 사실이다. 하지만 내부적으로는 다른 언어의 class와 동작방식이 다르다고 하더라도 (내부적으로는 prototype으로 처리한다.) class라는 문법적 요소가 생긴것은 분명 환영할만한 일이다.

자바스크립트 class의 문제점

하지만 자바스크립트의 class에는 다른 언어에는 존재하지 않는 약점이 존재한다. 바로 다중상속이 불가능하다는 점이다. 이는 자바스크립트의 class는 결국 prototype으로 구현된 함수이기 때문인데, 자바스크립트의 모든 객체는 단 하나의 prototype만을 가질 수 있기 때문에 생긴 문제이다.

믹스인

그렇다면 자바스크립트에서는 어떻게 다중상속을 구현할까? 바로 믹스인을 통해서 구현할 수 있다. 단순히 다중상속 뿐 아니라 다른 객체지향언어에서도 쓰이는 패턴으로, 믹스인(mixin, mix-in)이란_**

"다른 클래스의 부모클래스가 되지 않으면서 다른 클래스가 사용할 수 있는 메서드가 구현된 클래스"

라고 정의될 수 있는것이다. 좀 더 간단히 말하자면, 구현된 메소드를 가지고 있는 인터페이스라고 말할수도 있을 것이다.

예시

우리는 동물클래스를 생각할 수 있을것이다.

class Animal{
	constructor(){
    	...	
    }
    walk(){
    	...
    }
    

그리곤 물고기클래스를 만들 필요가 생겨져 물고기클래스를 만들게 되었다.

class Fish extends Animal{
  swim(){
    ...
  }
  breathInWater(){
    ...
  }
}

이제 개에 대한 클래스가 필요해졌다고 생각해보자. 개는 분명히 헤엄을 칠 수 있지만, 물 속에서 숨을 쉴 수는 없다. 이럴 때 각 행위에 대한 믹스인을 만들어서 해결할 수 있다.

function SwimMixin(superclass){
  return class extends superclass{
    swim(){
      ...
    }
  }
}
    
class Dog extends SwimMixin(Animal){
  ...
}

여러개의 믹스인을 상속받는 방법은 다음과 같다

class Duck extends SwimMixin(FlyMixin(Animal)){
  ...
}

물론 위와같은 방법은 상속받는 믹스인이 많아질수록 번거로워지므로 lodash의 compose기능을 이용하면 작업이 매우 편해진다.

const mixinclass = compose(BarkMixin, SwimMixin)(Animal);
class Dog extends mixinclass{
  ...
}