[JavaScript] 메서드 체이닝

메서드 체이닝이란? 하나의 객체 메서드를 연결해서 연속적으로 호출하는 기법.

메서드 체이닝의 핵심 원리

각 메서드가 객체 자신을 반환하여 연속 호출 가능.

주요 이점

• 연속 호출: 객체 반환으로 즉시 다음 메서드 호출
• 가독성 향상: 여러 작업을 한 줄로 연결, 간결성 증대
• 유연성: 필요한 메서드만 선택적 연결 가능

메서드 체이닝 구현 방법

• 메서드 정의: 각 메서드에서 작업 수행 후 this 반환
• 메서드 연결: 객체 생성 후 점(.) 연산자로 메서드 연속 호출
• 최종 결과: 체인의 마지막에 결과를 반환하는 메서드 호출

예제

class 계산기 {
  constructor() {
    this.값 = 0;
  }

  더하기(숫자) {
    this.값 += 숫자;
    return this; // 객체 자신을 반환하여 체이닝 가능하게 함
  }

  빼기(숫자) {
    this.값 -= 숫자;
    return this;
  }

  곱하기(숫자) {
    this.값 *= 숫자;
    return this;
  }

  결과얻기() {
    return this.값; // 최종 값을 반환
  }
}

const 결과 = new 계산기()
  .더하기(5)
  .빼기(2)
  .곱하기(3)
  .결과얻기();

console.log(결과); // 출력: 9

위 예제에서 더하기, 빼기, 곱하기 메서드는 모두 this 반환. 계산기 객체에 연속적인 메서드 호출 가능. 마지막으로 결과얻기 호출하여 최종 계산된 값 반환

메서드 체이닝을 단계별로 이해하기

javascript
코드 복사
const 계산기 = new 계산기();
계산기.더하기(5);  // 5를 더하고 계산기 객체 반환
계산기.빼기(2);    // 2를 빼고 계산기 객체 반환
계산기.곱하기(3);  // 3을 곱하고 계산기 객체 반환
const 결과 = 계산기.결과얻기();  // 최종 결과 얻기

각 메서드가 this 반환함으로써 메서드 체이닝 가능. 코드의 간결성과 가독성 향상

요약

• 메서드 체이닝: 객체 메서드 호출을 연속적으로 이어서 표현 가능한 기법
• 각 메서드는 this 반환하여 다음 메서드 바로 호출 가능
• 코드의 간결성과 가독성 향상. 선택적 메서드 연결로 유연한 사용 가능