자바스크립트 메서드 체이닝 간단 설명 및 예제

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