배열 메서드 체이닝
Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 55번째.
배열 체이닝을 사용하면 단일 문에서 배열에 대해 여러 작업을 수행할 수 있습니다. 이러한 방식은 코드를 더 간결하고 가독성 있게 만들어 줍니다.
다음은 배열 메서드를 체이닝하는 예시입니다:
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이 예제에서는 숫자 배열로 시작하여 홀수를 걸러내고, 남은 각 숫자를 두 배로 만든 다음 결과를 모두 합산합니다.
체이닝의 순서는 중요합니다. 체인의 각 메서드는 이전 메서드의 결과에 대해 작동합니다.
챌린지
쉬움과일 객체 배열을 인자로 받는 processFruits라는 함수를 만드세요. 각 과일 객체는 name (문자열)과 quantity (숫자) 속성을 가집니다.
이 함수는 다음과 같은 작업을 수행하기 위해 체이닝된 배열 메서드를 사용해야 합니다:
quantity가 0인 과일을 필터링하여 제외합니다.- 각 과일의 이름을 대문자로 변환합니다.
- 모든 과일과 그 수량을 "APPLE: 5, BANANA: 3"과 같은 형식의 문자열로 만듭니다.
참고 사항:
.join(", ") 함수를 사용하여 문자열 배열을 하나의 단일 문자열로 변환할 수 있습니다.
.join() 함수까지 체이닝하는 것이 가능합니다:
arr.filter(...)
.map(...)
.join(...)치트 시트
배열 메서드 체이닝을 사용하면 단일 문에서 배열에 대해 여러 작업을 수행할 수 있어 코드가 더 간결하고 가독성이 좋아집니다.
체인의 각 메서드는 이전 메서드의 결과에 대해 작동합니다:
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.join() 메서드를 체이닝하여 배열을 문자열로 변환할 수도 있습니다:
arr.filter(...)
.map(...)
.join(", ")직접 해보기
function processFruits(fruits) {
// 여기에 코드를 작성하세요
}
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
