🥘 줄이기: 육즙이 가득해요, 자기야!

저는 10년 넘게(👴🏻) JS 코드베이스에서 작업해 왔지만 여전히 가끔 저를 놀라게 하는 한 가지는 reduce 함수입니다. MDN documentation on reduce 에 갈 때마다 처음에는 그것이 어떻게 작동하는지 이해하는 데 약간의 어려움이 있습니다.

그럼 트위터나 가보면 다들 "reduce가 제일 중요한 배열 함수야!"신호 불안 😩!

따라서 이 짧은 게시물에서는 Reduce에 대해 설명하고 실제로 관련이 있고 압도적이지 않은 예를 보여 드리겠습니다.

그래서 그것으로; 🥘를 줄이자.

"공식"문서 설명부터 시작해 보겠습니다.

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

이것으로부터 우리는 다음을 압니다.

각 배열 요소

에 대해 콜백 함수() => {}를 사용합니다.

이전에 계산된 요소를 가져와 콜백 함수에 사용합니다. 그렇게 (previousValue, currentValue) => {}

축소 후 새 값 배열을 반환합니다

.

우리는 이것을 실제로 알지 못하지만 reduce는 이 함수에 대한 정말 멍청한 이름입니다. IMOaccumulator가 훨씬 더 정확하고 정확한 용어입니다.

한 가지 유의할 점은 reduce가 콜백을 받지만 매개변수로 initial value도 받는다는 것입니다. 이것은 올바른 방향으로 "누산기를 작동시키는 것"입니다. 숫자를 추가/조작하는 경우 0 에서 시작하는 것이 좋습니다.

예를 들어 다음과 같이 표시됩니다.

// This is incredibly similar to the MDN example
const arrayToReduce = [1, 2, 3, 4, 5];
arrayToReduce.reduce((prevValue, currValue) => return prevValue + currValue), 0)

하지만 MDN의 예를 들어 조금 분해해 봅시다. 작동 방식을 좀 더 이해하려면 console.logs로 완료하세요.

const initialValue = 0;
const arrayToReduce = [1, 2, 3, 4, 5];
arrayToReduce.reduce(
(previousValue, currentValue) => {

    console.log("prev:", previousValue, "curr:", currentValue); 
    const result = previousValue + currentValue; 
    console.log("result", result); 

    return result
  },
  initialValue
);

이것을 실행하면 다음과 같이 출력됩니다.

> "prev: " 0 "curr:" 1
> "result" 1
> "prev: " 1 "curr:" 2
> "result" 3
> "prev: " 3 "curr:" 3
> "result" 6
> "prev: " 6 "curr:" 4
> "result" 10
> "prev: " 10 "curr:" 5
> "result" 15
> 15

나는 출력을 보여주는 예없이 이것을 설명하고 모든 것이 솔직하지 않다고 느낍니다. 여기에서 명확하게 볼 수 있듯이 기본적으로 result는 콜백( previousValue )의 입력으로 다음 반복에 추가되며 배열이 반복되는 현재 반복은 currentValue 입니다.

이는 기본적으로 다음을 수행하는 것과 동일합니다.

const arrayToForLoop = [1, 2, 3, 4, 5];
let valueToKeepTrackOf = 0; //equivalent to reduce's "initialValue" parameter
let finalResult = [];

arrayToForLoop.forEach(item => {
  console.log("prev:", valueToKeepTrackOf, "current:", item);
  valueToKeepTrackOf += item;
  console.log(valueToKeepTrackOf); 
  finalResult.push(valueToKeepTrackOf);
});

console.log(finalResult);

그래서 당신은 그것을 가지고 있습니다! 요컨대 reduce입니다. 연산자를 추가/사용하는 데 매우 유용합니다!

내 개인적인 조언: 복잡한 일에 이것을 사용하지 마십시오. 정말 복잡하거나 여러 JSON 개체에 중첩된 작업을 수행해야 하는 경우 먼저 단순화하고 거기에서 시작하는 것이 가장 좋습니다.

언제나처럼 MDN is a great source to understand this in its entirety .

표지 사진 크레딧: La Cucina Italia