코드 조각: Array.prototype.reduce()

Array.prototype.reduce()는 무엇입니까?

reduce 메소드는 배열의 각 항목에 대해 콜백 함수를 실행하여 이전 항목에서 반환된 값을 전달합니다.

메서드 호출에서 달리 제공되지 않는 한 첫 번째 호출의 이전 값은 인덱스 0의 항목이 됩니다.

통사론

Array.prototype.reduce((prev, curr) => newValue)
// or
Array.prototype.reduce((prev, curr) => newValue, initialValue)

예

숫자의 합 구하기

여기에서 마지막으로 반환된 값에 현재 항목을 추가합니다.

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

const sum = numbers.reduce((acc, curr) => acc + curr); 
// 15

숫자의 최대값 얻기

합계 예제에서 했던 것처럼 현재 값에 더한 이전 값을 반환하는 대신 단순히 둘 중 더 큰 값을 반환합니다.

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

const max = numbers.reduce((acc, curr) => (acc > curr ? acc : curr)); 
// 5

이것은 객체 배열에도 적용될 수 있습니다.

const people = [
    { name: "John", age: 20 },
    { name: "Jane", age: 21 },
    { name: "Joe", age: 22 },
    { name: "Jack", age: 23 },
    { name: "Jill", age: 24 },
    { name: "Juan", age: 25 },
];

const oldestPerson = people.reduce((oldest, current) =>
    current.age > oldest.age ? current : oldest
);
// { name: "Juan", age: 25 }

필터와 맵 결합

때로는 데이터를 필터링한 다음 해당 데이터를 새로운 모양이나 유형에 매핑해야 합니다. 그러나 reduce를 사용하여 이 두 가지 작업을 모두 수행할 수 있습니다.

이렇게 하면 배열을 두 번 탐색할 필요가 없습니다.

const people = [
    {
        firstName: "John",
        lastName: "Doe",
        age: 20,
    },
    {
        firstName: "Jane",
        lastName: "Doe",
        age: 21,
    },
    {
        firstName: "Joe",
        lastName: "Doe",
        age: 22,
    },
    {
        firstName: "Jack",
        lastName: "Doe",
        age: 23,
    },
    {
        firstName: "Jill",
        lastName: "Doe",
        age: 24,
    },
    {
        firstName: "Juan",
        lastName: "Doe",
        age: 25,
    },
];


const canDrink = people.reduce(
    (drinkers, curr) =>
        curr.age >= 21
            ? [...drinkers, `${curr.firstName} ${curr.lastName}`]
            : drinkers,
    []
);
// [ "Jane Doe", "Joe Doe", "Jack Doe", "Jill Doe", "Juan Doe" ]

배열을 생성하고 있기 때문에 이번에는 초기 값을 전달했습니다. 전달하지 않으면[] 함수가 사람 개체에 대해 .push를 호출하려고 시도하여 포착되지 않은 TypeError가 발생합니다.

매번 drinkers 배열을 복사하지 않고도 이 작업을 수행할 수 있습니다.

const canDrink = people.reduce((drinkers, curr) => {
    if (curr.age >= 21) {
        drinkers.push(`${curr.firstName} ${curr.lastName}`);
    }
    return drinkers;
}, []);

비교해 보면 이것은 맵과 필터의 효과와 동일합니다.

const canDrink = people
    .filter((person) => person.age >= 21)
    ?.map((person) => `${person.firstName} ${person.lastName}`);

배열을 객체로 변환

배열을 객체로 쉽게 변환할 수 있습니다. 이 경우에는 요일과 해당 숫자 값의 사전입니다.

이 특정 예에서는 콜백 함수의 인덱스에 대한 선택적 세 번째 매개변수를 허용합니다.

const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

const daysOfWeek = days.reduce((newDays, day, index) => {
    newDays[day] = index;
    return newDays;
}, {});
// { Sunday: 0, Monday: 1, Tuesday: 2, Wednesday: 3, Thursday: 4, Friday: 5, Saturday: 6 }

개체 모양 변경

필요에 따라 물체의 모양을 변경할 수도 있습니다.

const coordinates = {
    lat1: 0,
    lon1: 0,
    lat2: 31.968599,
    lon2: -99.9018131,
    lat3: 26.820553,
    lon3: -80.053407,
    lat4: 25.774252,
    lon4: -80.193665,
};

const parsedCoordinates = Object.keys(coordinates).reduce(
    (acc, key) => {
        const value = coordinates[key];
        if (key?.includes("lat")) {
            acc["lat"].push(value);
        } else {
            acc["lon"].push(value);
        }
        return acc;
    },
    { lat: [], lon: [] }
);
/**
{
  lat: [ 0, 31.968599, 26.820553, 25.774252 ],
  lon: [ 0, -99.9018131, -80.053407, -80.193665 ]
}
*/`

결론

전반적으로 축소 방법을 사용하는 방법을 알고 있으면 작업이 훨씬 쉬워질 수 있습니다!