javascript Chain-of-responsibility pattern 체이닝 패턴

javascript Chain-of-responsibility pattern 체이닝 패턴

 

javascript 에서 체이닝 패턴에 대해 알아보겠습니다.

 

예를들어 javascript 에서 selector를 활용해 어떠한 element의 child에 접근 하고자 할 때

아래와 같이 접근 하는 경우를 볼 수 있습니다.

 

<div id="grid">
    <h2>테스트</h2>
</div>
<script>
    console.log(document.getElementById("grid").getElementsByTagName("h2"));
</script>

 

"grid" 를 id property로 갖는 요소에 접근하는 getElementById 메소드를 호출 후 바로 .getElementsByTagName 메소드를 호출했습니다. 이렇게 연속적으로 메서드를 연결해서 호출할 수 있도록 하는 패턴이 체이닝 패턴입니다.

 

이제 체이닝 패턴을 어떻게 구현하는지 알아보도록 하겠습니다.

계산기 Class를 생성해 예로 들어보겠습니다.

 

<script>
class Calc(){
    constructor(){
        this.value = 0;
    }
}
</script>

 

value 변수를 갖고 있는 Calc 클래스를 생성합니다.

이제 파라메터로 받는 값을 더하고 빼는 plus, minus 메소드와 값을 출력하는 print 메소드를 생성합니다.

 

<script>
class Calc(){
    constructor(){
        this.value = 0;
    }
    plus(num){
        this.value += num;
    }
    minus(num){
        this.value -= num;
    }
    print(){
    	console.log(this.value);
    }
}
</script>

 

이제 Calc를 new로 생성해 prototype의 메소드를 실행해보겠습니다.

 

<script>
/*Calc code*/


const calc = new Calc();
calc.plus(3);
calc.mius(1);
calc.print();
<script>

 

2가 출력되는 것을 확인하실 수 있습니다.

이제 이 코드를 체이닝 패턴으로 바꾸어보겠습니다. 간단하게 prototype method에 this를 리턴해주시면 됩니다.

 

<script>
class Calc(){
    constructor(){
        this.value = 0;
    }
    plus(num){
        this.value += num;
        return this;
    }
    minus(num){
        this.value -= num;
        return this;
    }
    print(){
    	console.log(this.value);
    }
}
</script>

 

위의 코드를 보시면 plus, minus 메소드에 return this; 가 추가된 것을 보실 수 있습니다.

이제 메소드를 실행하게되면 this인 Calc가 리턴되어 해당 객체의 메소드를 실행할 수 있게됩니다.

 

<script>
/*Calc code*/


const calc = new Calc();
calc.plus(3).mius(1).print();
<script>

같은 결과가 콘솔창에 출력되는 것을 확인하실 수 있습니다.

 

이처럼 체이닝 패턴은 코드가 간결해지고 메소드가 특정 기능만을 수행하게 세분화하여 구현하게되는 장점이 있지만

에러 발생 시 어느 메소드에서 발생한 에러인지 찾아내기 어려운 단점이 있습니다.

 

 

 

참고 : JavaScript Patterns 스토얀 스테파노프