메서드 체인은 일련의 함수를 허용한다

Source: Dev.to

JavaScript에서 메서드 체이닝

메서드 체이닝은 같은 객체 또는 결과에 대해 여러 메서드를 순차적으로 호출하는 것을 의미합니다. 이 패턴은 filter, map, reduce 같은 배열 메서드에서 흔히 사용되며, 각 메서드가 새로운 배열이나 값을 반환해 다음 메서드가 그 결과를 가지고 작업할 수 있게 합니다.

예시: 배열 메서드 체이닝

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(num => num % 2 === 0) // 짝수만 필터링
  .map(num => num * 2) // 남은 각 숫자를 두 배로
  .reduce((acc, num) => acc + num, 0); // 두 배가 된 숫자들을 합산

console.log(result); // Outputs 18 (2*2 + 4*2 + 5*2)

작동 방식

Filter

원본 배열에서 짝수만 포함하는 새로운 배열을 생성합니다.

Map

필터링된 배열의 각 숫자를 두 배로 만들어 또 다른 새로운 배열을 만듭니다.

Reduce

맵핑된 배열에 있는 모든 두 배가 된 숫자를 합산해 단일 값(18)을 반환합니다.

예시: 객체 배열과 함께 체이닝

let cart = [
  { name: "Drink", price: 3.12 },
  { name: "Steak", price: 45.15 },
  { name: "Drink", price: 11.01 },
];

const drinkTotal = cart
  .filter(item => item.name === "Drink")
  .map(item => item.price)
  .reduce((total, price) => total + price, 0)
  .toFixed(2);

console.log(`Total Drink Cost $${drinkTotal}`); // Total Drink $14.13

메서드 체이닝의 장점

• 가독성 향상 – 데이터 변환 흐름이 명확하고 선형적입니다.
• 중간 변수 필요 감소 – 각 단계가 다음 단계에 전달할 값을 반환합니다.
• 더 선언적인 코드 – 어떻게 임시 상태를 관리할지보다 무엇을 해야 하는지를 표현합니다.

행복한 코딩 되세요! 🔥