함수 체이닝(Function Chaining)이란?
함수 체이닝은 점 표기법(dot notation)을 사용해 여러 함수를 한 줄로 연결해 호출하는 기법입니다. 이 방식은 코드를 훨씬 간결하게 만들어 가독성을 높일 뿐만 아니라, 성능 면에서도 이점을 제공합니다. 이번 글에서는 일반 객체를 활용해 함수 체이닝을 구현하는 방법을 단계별로 살펴보겠습니다.
1) 함수 체이닝 없이 작성한 경우
아래 예제에서는 먼저 객체 'obj'를 생성하고, 그 안에서 'this' 키워드로 'i'라는 공개 프로퍼티를 선언한 뒤 초기값 0을 할당했습니다. 이어서 같은 객체 안에 add(), subtract(), print()라는 사용자 정의 메서드를 추가했습니다. 이렇게 구성하면 객체 "obj"는 마치 클래스처럼 동작하며, 그 속성들을 다른 객체에서도 재사용할 수 있습니다.
이제 'new' 키워드로 새로운 객체 'x'를 생성하면 obj의 프로퍼티와 메서드를 자유롭게 사용할 수 있습니다. 그런데 주목할 점은 "obj" 내부에 선언된 add(), subtract(), print() 함수가 아무런 값을 반환하지 않는다는 것입니다. 이 때문에 함수 체이닝이 불가능하며, x.add(5).subtract(2).print()처럼 메서드를 연결해 호출하면 undefined가 출력됩니다. 반면 각 함수를 개별적으로 호출하면 정상적으로 3(사용자 입력 '5-2')이 계산되어 화면에 표시됩니다.
예제 코드
<html>
<body>
<script>
var obj = function(){
this.i = 0;
this.add = function(i){
this.i += i;
};
this.subtract = function(i){
this.i -= i;
};
this.print = function(){
document.write(this.i);
document.write("</br>");
document.write(x.add(3)); // returns undefined
}
}
var x = new obj();
x.add(5);
x.subtract(2);
x.print(); // 5-2 = 3이므로 3 출력
x.add(5).subtract(2).print(); // 체이닝 불가능하므로 undefined 출력
</script>
</body>
</html>
실행 결과
3
undefined
2) return this로 함수 체이닝 구현하기
위와 동일한 코드에서 각 메서드 끝에 "return this" 문장만 추가해 보겠습니다. add()와 subtract()가 자신이 속한 객체(this)를 반환하기 때문에, 반환된 객체에서 곧바로 다음 메서드를 이어서 호출할 수 있습니다. 그 결과 함수 체이닝이 정상적으로 동작하며, 최종적으로 3이 출력됩니다.
예제 코드
<html>
<body>
<script>
var obj = function(){
this.i = 0;
this.add = function(i){
this.i += i;
return this;
};
this.subtract = function(i){
this.i -= i;
return this;
};
this.print = function(){
document.write(this.i);
}
}
var x = new obj();
x.add(5).subtract(2).print();
</script>
</body>
</html>
실행 결과
3
핵심 정리
- 함수 체이닝은 메서드가 자기 자신의 객체(this)를 반환할 때만 가능합니다.
- 각 메서드에
return this를 추가하면 add(5).subtract(2).print()처럼 한 줄로 연속 호출할 수 있습니다. - 반환 값이 없는 메서드를 체이닝하면 undefined가 반환되어 의도한 대로 동작하지 않습니다.