Chaining Pattern of JavaScript

체이닝패턴

체이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴입니다.

여러 가지 동작을 수행할 때, 먼저 수행한 동작의 반환 값을 변수에 할당한 후 다음 작업을 할 필요가 없기 때문에 호출을 여러 줄에 걸쳐 쪼개지 않아도 됩니다.

javascript

myobj.method1('hello').method2().method3('world').method4();

만약 메서드에 의미있는 반환 값이 존재하지 않는다면, 현재 작업중인 객체 인스턴스인 this 를 반환하게 됩니다.

이렇게 하면 객체의 사용자는 앞선 메서드에 이어 다음 메서드를 바로 호출할 수 있습니다.

javascript

var obj = {
	value : 1,
	increment : function () {
		this.value += 1;
		return this;
	},
	add : function (v) {
		this.value += v;
		return this;
	},
	shout : function () {
		console.log(this.value);
	}
};

// 메서드 체이닝 호출
obj.increment().add(2).shout(); // 4 가 기록

// 위와 달리 메서드를 하나씩 호출하려면 다음과 같이 해야한다.
obj.increment();
obj.add(3);
obj.shout(); // 8 가 기록

체이닝 패턴의 장단점

체이닝 패턴을 사용하면 코드량이 줄고 코드가 좀더 간결해져 거의 하나의 문장처럼 읽히게 할 수 있다는 장점이 있습니다.

또 체이닝 패턴을 통해서 함수를 쪼개는 방법을 생각하게 되고, 혼자서 너무 많은 일을 처리하려는 함수보다는 좀더 작고 특화된 함수를 만들게 됩니다.

장기적으로는 이런 방법을 통해 유지보수가 개선됩니다.

그러나 이렇게 작성된 코드는 디버깅하기가 어렵습니다.

코드의 어느 라인에서 에러가 발생했는지 알아내더라도, 그 라인에서 수행하는 일이 너무 많을 수 있기 때문입니다.

여러 개의 메서드 중 하나가 실패해 버린다면, 실패한 메서드가 어느 것인지 알아내기기 어렵습니다.

『Clean Code』 의 저자 로버트 마틴은 이러한 상황을 '열차 사고' 패턴이라 불렀습니다.

어쨋거나 이 패턴을 알아두면 도움이 됩니다.

어떤 메서드가 명백히 의미있는 반환값을 가지지 않는다면 항상 this 를 반환하게 하는 것입니다.

이 패턴은 jQuery 라이브러리 등에서 널리 사용되고 있습니다.

DOM API 를 들여다보면, DOM 의 요소들도 체이닝 패턴을 사용하는 경향이 있음을 알 수 있습니다.

Jaehee's WebClub