배열 메서드 체이닝

Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨. 65개 중 55번째.

배열 체이닝(Chaining)을 사용하면 단일 문에서 배열에 대한 여러 작업을 수행할 수 있습니다. 이 방식을 사용하면 코드를 한결 간결하고 가독성 있게 만들 수 있습니다.

다음은 배열 메서드를 체이닝하는 예시입니다:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .reduce((sum, num) => sum + num, 0);

console.log(result); // 60

이 예제에서는 숫자 배열로 시작하여 홀수를 `filter`로 걸러내고, 남은 각 숫자를 두 배로 늘린 다음, 그 결과를 합산합니다.

체이닝의 순서는 중요합니다. 체인의 각 메서드는 이전 메서드의 result에 대해 동작합니다.

챌린지

쉬움

과일 객체의 배열을 인자로 받는 processFruits라는 함수를 작성하세요. 각 과일 객체는 name (문자열)과 quantity (숫자) 속성을 가집니다.

함수는 체이닝된 배열 메서드를 사용해 다음을 수행해야 합니다:

수량(quantity)이 0인 과일은 걸러냅니다(Filter).
각 과일의 이름을 대문자로 변환합니다.
"APPLE: 5, BANANA: 3"과 같이 모든 과일과 수량을 나열하는 하나의 문자열을 만듭니다.

참고 사항:

.join(", ") 함수를 사용하여 문자열 배열을 하나의 문자열로 변환할 수 있습니다.

.join() 함수까지 체이닝하는 것도 가능합니다:

arr.filter(...)
   .map(...)
   .join(...)

직접 해보기

function processFruits(fruits) {
  // 여기에 코드를 작성하세요
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

논리 & 흐름의 모든 레슨

직접 연습해 보세요: 온라인 JavaScript 컴파일러