DEV Community

Cover image for Reduce is awesome ♥
Anatolii
Anatolii

Posted on • Updated on

Reduce is awesome ♥

Alt Text

1. Look a little bit bulky?

But fortunately, it’s not hard as can you expect.
Array.prototype.reduce() have 2 param:

  1. CallbackFunction
  2. InitialValue

Where first is (acc, item, idx, arr) => and returning something which have the same type as InitialValue. And InitialValue is not required, but if you use typescript it will be better to have InitialValue (if you want that InitialValue is be equal to nullity use as SomeType)

  1. acc* — the sum of every iteration
  2. item* — an item of the current array
  3. idx*— index of the current array
  4. arr* — iterable array

2. ReduceReverseFunc as SimpleExample

const reduceReverseFunc = (arr: any[]): any[] => {
  return arr.reduce((acc, item) => [item, ...acc], [] as any[]);
};
Enter fullscreen mode Exit fullscreen mode

Where acc is the sum to which on every iteration we are adding a new item. For example, we give a [1, 2, 3, 4] as param to reduceReverseFunc.
1.item === 1 , acc === [] (acc equalInitialValue )
2.item === 2 , acc === [1] (acc equal the sum of the previous iteration)
3.item === 3, acc === [2, 1] (acc equal the sum…)
4.item === 4, acc === [3, 2, 1] (acc equal the sum…)
So the result will be [4, 3, 2, 1]

3. ReduceFlatFunc as RecursionExample

 const reduceFlatFunc = (arr: any[]): any[] => {
  if (!Array.isArray(arr)) return arr;
  return arr.reduce((acc, item) => acc.concat(reduceFlatFunc(item)), [] as any[]);
};
Enter fullscreen mode Exit fullscreen mode
  • At first make a defender of error, by checking arr with Array.isArray()
  • And then by using Array.prototype.reduce() we iterating arr, and for every iteration call reduceFlatFunc (that's called recursion) and if we don't have a new array, our defender will return the current arr.

So if u will run this code reduceFlatFunc([1, [2], [[3]],[[[4]]]) the result will be equal to [1, 2, 3, 4]

4. ReduceSortOddNumbersFunc as TrickyExample

const reduceSortOddNumbersFunc = (arr: number[]): number[] => {
  const sortedEvenArr = arr.filter((number) => number % 2).sort((a, b) => a - b);

  const { arr: sortedArr } = arr.reduce(
    (acc, number) => {
      const isNumberOdd = !(number % 2);
      const evenIdx = isNumberOdd ? acc.evenIdx : acc.evenIdx + 1;

      const arr = [...acc.arr, isNumberOdd ? number : sortedEvenArr[acc.evenIdx]];
      return { arr, evenIdx };
    },

    { arr: [], evenIdx: 0 } as { arr: number[]; evenIdx: number }
  );

  return sortedArr;
};
Enter fullscreen mode Exit fullscreen mode

Task: to write a function that takes an array as arguments and returns a new array in which all odd numbers are sorted in ascending order, while the even ones remain in their places.

Explanation

  • Firstly, we should write our NumberArrType.
  • We getting sortedEvenArr from using Array.prototype.filter() checking is number is even then using Array.prototype.sort() we sort number Arr.
  • Array.prototype.reduce() to arr (from param of function). Where InitialValue equal to { arr: [], evenIdx: 0 } then set type { arr: NumberArrType; evenIdx: number }using ts property as.
  • So then for every iteration, we check isNumberOdd .
  • Following, if number is odd, evenIdx will be equal to acc.eventIdx(so will be the same as in previous iteration),if not, evenIdx will be equal to acc.evenIdx + 1.
  • And the same logic we apply to iterable arr.
  • Finally, using destructuring getting arr and give another (sortedArr) name because we have the same which already using. And return, of course.

Conclusion

Don't be afraid to use Array.prototype.reduce(), because it's awesome as your life.
Thanks for reading, I so appreciate this ♥.
Source code (GitHub).

Discussion (0)