ES5 및 이후 버전의 JavaScript는 배열을 처리하기 위한 몇 가지 새로운 방법을 가져왔습니다. 그들 중 많은 것들이 배열을 사용하는 일반적인 작업에 대한 모범 사례가 되었으며 JavaScript는 배열과 함께 훨씬 더 좋습니다.
Array.map() 및 Array.filter()는 대부분의 JS 개발자를 위한 필수 요소인 일일 드라이버 ES5 추가의 두 가지 예입니다.

키트에서 똑같이 유용하지만 종종 덜 이해되는 도구는 Array.reduce() 입니다. 최근에는 reduce를 더 자주 사용하지만 자연스럽게 느껴지기까지 시간이 좀 걸리고 다른 개발자들이 힘들어하는 모습을 종종 봅니다.

감소는 종종 잘못 가르쳐서 오해를 받습니다.

제 생각에는 혼란의 큰 이유는 reduce가 잘못 가르쳤기 때문입니다. 사실, 그것은 심지어 나에게 잘못 명명된 것처럼 느껴지기도 합니다(물론 감속기의 개념과 이름은 JavaScript에 추가되기 훨씬 이전에 나왔음에도 불구하고).

감속기를 가르칠 때 가장 일반적인 예는 다음과 같습니다.

const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentItem) => {
    return accumulator + currentItem;
}, 0);

// sum = 10

이것은 리듀서가 어떻게 작동하는지 상당히 명확하게 보여줍니다. 배열에서 reduce()를 호출하고 초기 값과 해당 배열의 각 항목에 대해 실행되는 함수를 전달합니다.

전달된 함수에 reduce 다음을 보냅니다.

1) 현재 항목 및
2) 이전 콜백에서 반환된 값(또는 처음 호출 시 초기 상태)
reduce의 최종 값은 궁극적으로 내부 리듀서 함수가 마지막으로 호출될 때 반환되는 값입니다.

결과적으로 이 경우 감속기는 배열의 값을 합산하여 전체 값을 반환합니다.

그래서... 숫자 배열을 추가하는 것이 Reduce의 전부입니까?

나는 그 예를 여러 번 보았지만 훨씬 더 자세한 설명은 거의 보지 못했습니다.

"흠, 흥미롭군."나는 하루를 계속하면서 생각했다.

그렇다면 감속기의 진정한 의미는 무엇입니까? 그들은 실제로 무엇을 위해 좋은가?

실제 힘은 다음과 같습니다.

리듀서는 배열을 처리하지만 배열이 아닌 것을 출력할 때 유용합니다.

그것이 실제로 요약되며 매우 자주 유용합니다.

결국, 그것이 우리가 위의 예에서 하고 있는 것이 아닙니까? 배열을 가져와 정수를 반환합니다. 그런 맥락에서 배열을 "축소"한다는 것은 어느 정도 이해가 되지만 정수처럼 단순한 것을 항상 출력할 필요는 없습니다.

다음 예를 들어보세요.

const trips = [{type: 'car', dist: 42}, {type: 'foot', dist: 3}, {type:'flight', dist: 212}, {type: 'car', dist: 90}, {type: 'foot', dist: 7}] 

const distanceByType = trip.reduce((out, curr) => {
    const { type, dist } = curr;
    if (out[type]) {
        out[type] += dist;
    } else {
        out[type] = dist;
    }
    return out;
}, {});

// distanceByType = {car: 132, foot: 10, flight: 212};

그래서 여기서는 배열을 사용하지만 단일 개체 대신 합계 개체를 반환합니다.

여기서 우리는 감속기가 실제로 무엇인지의 본질을 보기 시작했습니다.

감속기는 변압기입니다

배열을 가져와 다른 것으로 변환합니다.

이런 식으로 생각하면 reduce가 무엇을 하는지 이해하는 데 도움이 될 뿐만 아니라 언제 사용해야 하는지 깨닫는 데 도움이 됩니다.

사용자 배열이 있지만 Mike, Becka and 3 others will be attending와 같은 문자열을 출력하고 싶습니까? 감속기는 그럴 때 좋습니다!

기사 배열이 있고 카테고리별로 키가 지정된 객체를 원하십니까? 감속기는 그럴 때 좋습니다!

사용 사례는 계속됩니다.

앞으로 나아가 Array.reduce() !

나는 그것이 도움이 되기를 정말로 희망하고 가능하다면 의견에서 더 명확하게 하고 싶습니다.

마음에 드는 reduce 사용 사례가 있습니까? 아래에 댓글을 달아주시면 기사에 추가하겠습니다 🚀