[JavaScript] 메서드 체인

메서드 체인

자바스크립트에서 메서드가 객체를 반환하면 반환한 객체의 메서드를 호출할 수 있는 기법이다. 그러면 객체의 메서드를 마침표 연산자를 통해 계속 연결해서 실행시킬 수 있다.

 

다음 예제에 있는 obj 객체는 budget 프로퍼티와 두 개의 메서드를 가지고 있다. 하나는 돈을 받는 메서드이고 다른 하나는 인수로 받은 금액을 저축하는 메서드이다. 두 메서드 모두 this를 반환하는 데 이 때 this는 obj 객체를 의미한다. 따라서 객체를 반환하기 때문에 해당 객체의 메서드를 chain을 통해 호출할 수 있다.

 

예제

let obj = {
    budget: 1000,
    receiveMoney: function () {
        this.budget += 1000;
        return this;
    },
    savingMoney: function (save) {
        this.budget -= save;
        return this;
    },
    showBudget: function () {
        console.log(this.budget);
    }
};

obj.receiveMoney().savingMoney(500).showBudget();

 

결과

1500

만약 메서드 체인을 사용하지 않았다면 동일한 결과를 얻기 위해서 아래와 같이 메서드를 각각 호출했을 것이다.

obj.receiveMoney()
obj.savingMoney(500)
obj.showBudget();

결론

자바스크립트에서 메서드 체인은 굉장히 유용하다. 위에서도 보았듯이 코드를 간결하고 직관적으로 만들어 주기 때문이다.

자바스크팁트 비동기 처리기법인 Promise에서도 메서드 체인을 통해 fulfilled되었을 때와 rejected 되었을 때 실행할 코드를 연결하여 작성할 수 있다.

promise
    .then((hello) => {
        console.log(hello);
    })
    .catch((error) => {
        console.log(error);
    });