DEV Community

Cover image for Power of Js reducer
sakethk
sakethk

Posted on • Edited on

2 1

Power of Js reducer

Reducer executes a function (provided as argument to reducer) on each element of the array, resulting in single output value.

Custom Reducer function

const reducer = (array, cb, init) => {
  let result = init
  for(let i = 0; i < array.length; i++)
    result = cb(result, array[i], i, array)

  return result
}
Enter fullscreen mode Exit fullscreen mode

1. Calculating Length of array using reducer

const length = (array) => reducer(array, (total, currEle) => total+1 ,0)

const list = [1, 2, 3]

console.log(length(list)) // 3
Enter fullscreen mode Exit fullscreen mode

2. Implementing map using Reducer

const map = (array, cb) => reducer(array, (acc, currEle) => [...acc ,cb(currEle)] ,[])

const double = n => n * 2
const list = [10, 20, 30, 40]

console.log(map(list, double)) //[ 20, 40, 60, 80 ]
Enter fullscreen mode Exit fullscreen mode

3. Implementing filter using Reducer

const filter = (array, cb) => reducer(array, (acc, currEle) => cb(currEle) ? [...acc , currEle] : acc ,[])

const isGreaterThanTwo = n => n > 2
const list = [1, 2, 3, 4]

console.log(filter(list, isGreaterThanTwo)) //[ 3, 4 ]
Enter fullscreen mode Exit fullscreen mode

4. Implementing flatMap using reducer

const map = (array, cb) => reducer(array, (acc, currEle) => [...acc ,cb(currEle)] ,[])

const flatMap = (array, cb) => reducer(array, (acc, currEle) => [...acc , ...map(currEle, cb)] ,[])

const double = n => n * 2
const twoDList = [[1], [2]]

console.log(flatMap(twoDList, double)) //[ 2, 4 ]
Enter fullscreen mode Exit fullscreen mode

5. Implementing forEach using reducer

const forEach = (array, cb) => reducer(array, (acc, currEle) => cb(currEle) ,null)

const printDouble = n => console.log(n * 2)
const list = [20, 40, 50]

forEach(list, printDouble)
/* 
output:
40
80
100
*/
Enter fullscreen mode Exit fullscreen mode

6. Implementing reverse using reducer

const reverse = (array, cb) => reducer(array, (acc, currEle) => [currEle, ...acc] ,[])

const list = ["a", "b"]

console.log(reverse(list)) //[ 'b', 'a' ]
Enter fullscreen mode Exit fullscreen mode

7. Implementing every using reducer

const every = (array, condition) => reducer(array, (acc, currEle) => acc && !!condition(currEle), true)

const list = [3, 6]
const isDivisibleByThree = e => e % 3 === 0

console.log(every(list, isDivisibleByThree)) // true
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more