JavaScript에서 자주 사용되는 기능 중 하나인 Method Chaining에 대하여
간략하게 설명을 해본 뒤, 예제를 통하여 쉽게 이해를 해볼 수 있도록 정리해 보겠습니다.
메서드 체이닝(Method Chaining)이란?
JavaScript의 method chaining(메서드 체이닝)은 객체 지향 프로그래밍 스타일 중 하나로,
객체의 메서드를 연속적으로 호출할 수 있게 해주는 기능입니다.
이를 통해 코드의 가독성을 향상시키고, 더욱 간결한 코드를 작성할 수 있지만,
한 번에 너무 많은 체이닝을 사용하면 혼란을 가중시킬 수 있으므로, 유의할 필요가 있습니다.
메서드 체이닝은 object.method1().method2().method3()와 같은 식으로
연속된 메서드 적용을 의미하는데, 아래의 문자열에서의 예시가 대표적으로
실제로 사용되는 예시입니다.
let original = " JavaScript is fun! ";
let modified = original.trim().toUpperCase().replace('FUN', 'AWESOME');
console.log(modified); // "JAVASCRIPT IS AWESOME!"
메서드 체이닝 구현 기본 예제: 자기 자신(this) 반환
실제 자바스크립트 메서드 구현 과정에서 체이닝을 구현하는 가장 쉬운 방법 중 하나는
자기 자신 객체를 this로 반환하도록 구현하는 것입니다.
다음은 간단한 method chaining을 자기 자신을 반환하여 구현한 예시 코드입니다.
function number(initialValue) {
let value = initialValue;
return {
multiple: function(factor) {
value *= factor;
return this; // 자기 자신 반환 -> 체이닝 가능
},
divide: function(divisor) {
value /= divisor;
return this; // 자기 자신 반환 -> 체이닝 가능
},
value: function() {
return value; // 숫자 반환 -> 체이닝 불가
}
};
}
const myNumber = number(10);
console.log(myNumber.multiple(3).divide(2).value()); // 출력: 15 (10 -> 30 -> 15)
위 코드에서 return을 할 때, 함수들의 딕셔너리 형태로 해주면서
여러 메서드 사용이 가능하도록 지원을 해주고 있으며,
호출 시 마다 value 값이 바뀐 자기 자신 객체를 계속 반환하며
체이닝이 이루어지고 있는 것을 확인했습니다.
(참고로, 위 코드에서는 value 호출 후에는 숫자가 반환되어 더 이상 체이닝이 불가합니다.)
메서드 체이닝 구현 심화 예제: class 활용, 다른 객체 반환
위와 같은 기법을 구현할 때, class를 통하여 선언하면 구현에 좀 더 유리한 점이 많습니다.
또한, 꼭 자기 자신 객체가 아닌 다른 종류의 객체로 넘어가 체이닝을 지속하는 것도 가능합니다.
아래는 0부터 시작하여 증가만 가능한 A 클래스와
100부터 시작하여 감소만 가능한 B 클래스 사이를 넘나드는 간단한 예시입니다.
class A {
constructor() {
this.value = 0;
}
increase() {
this.value++;
return this;
}
moveToB() {
return new B(this); // B 클래스로 전환
}
showValue() {
console.log('A:', this.value);
return this;
}
}
class B {
constructor(aObj) {
this.a = aObj;
this.value = 100;
}
decrease() {
this.value--;
return this;
}
moveToA() {
return this.a; // A 클래스로 전환
}
showValue() {
console.log('B:', this.value);
return this;
}
}
const objA = new A();
objA.increase().moveToB().decrease().moveToA().increase().moveToB().showValue().moveToA().showValue();
// 출력:
// B: 99
// A: 2
'JavaScript & React > JS 기초' 카테고리의 다른 글
JavaScript에서 ChatGPT API 호출 방법 코드 예제 (0) | 2024.04.20 |
---|---|
자바스크립트 Promise 객체, async 및 await 개념 정리 예제 (0) | 2024.03.24 |