Reduce is awesome ♥
Tags: typescript, javascript
Published: 2021-08-11 08:18:45


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjwofb5xgg57c9zqfevt.png)

## 1. Look a little bit bulky?

But fortunately, it’s not hard as can you expect.
[Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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

```typescript
const reduceReverseFunc = (arr: any[]): any[] => {
  return arr.reduce((acc, item) => [item, ...acc], [] as any[]);
};
```

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
```typescript 
 const reduceFlatFunc = (arr: any[]): any[] => {
  if (!Array.isArray(arr)) return arr;
  return arr.reduce((acc, item) => acc.concat(reduceFlatFunc(item)), [] as any[]);
};
```
* At first make a defender of error, by checking arr with [Array.isArray()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)
* And then by using [Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) we iterating arr, and for every iteration call `reduceFlatFunc` (that's called [recursion](https://developer.mozilla.org/en-US/docs/Glossary/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
```typescript 
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;
};
```
**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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) checking is number is even then using [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) we sort number Arr.
* [Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), because it's awesome as your life.
Thanks for reading, I so appreciate this ♥.
[Source code (GitHub).](https://github.com/pas8/reduceIsAwesome/blob/master/reduceIsAwesome.ts)