How we can use Reduce?

In first part of this series we talked about how does reduce work. Now let's see some examples.

Let's start with a simple one. How we can sum up elements of an array with reduce.

As we can remember from first part callback function takes 4 parameters: accumulator, current value, index and array. In this example as we did not define an initial value accumulator starts as the first element of the array, which is 1.

We can think like this:

first value(initialValue): 1
accumulator = initialValue

first iteration: accumulator = accumulator + 2
accumulator = 3

second iteration: accumulator = accumulator + 3
accumulator = 6

As our function returns accumulator; result is 6.

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur);

console.log(sum);
//6

Let's check more complex ones.

First of all, i will put our data structure here so, we will use this data structure for all the other examples.

const users = [{
        id: "124124124124",
        name: "Some Person",
        username: "some123",
        insterests: ["hiking", "sports"],
        country: {
            code: "tr",
            name: "Turkey"
        }
    },
    {
        id: "456456",
        name: "John Doe",
        username: "john123",
        insterests: ["sci-fi", "coding"],
        country: {
            code: "us",
            name: "United States"
        }
    },
    {
        id: "56356456",
        name: "Foo Bar",
        username: "foo123",
        insterests: ["board games"],
        country: {
            code: "de",
            name: "Germany"
        }
    },

]

We will see how we can turn an array to an object.

Our system works like this:
initialValue = {}
accumulator = initialValue

first iteration: accumulator[124124124124] = 'Some Person'
accumulator = {124124124124: 'Some Person'}

second iteration: accumulator[456456] = 'John Doe'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe'}

third iteration: accumulator[56356456] = 'Foo Bar'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe', 56356456: 'Foo Bar'}

const reducedArr = users.reduce((accumulator, currentValue) => {
    accumulator[currentValue.id] = currentValue.name;
    return accumulator;
  }, {});

In our next example we will pick values from initial data and return an array with elements which we want.

In here our system works like this:

initialValue = []
accumulator = []

In this example we are using spread syntax basically we are using it like this:

const arr = []; const arr2 = [...arr, {name: 'random'}] console.log(arr2);//[{name: 'random'}]

first iteration: accumulator = [{name: 'Some Person', id: '124124124124'}]
.
.
.

 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {name: currentValue.name, id: currentValue.id}];
    return accumulator
 }, []) 

With same logic from above we could use elements as key values also like this:

const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {[currentValue.id]: currentValue.name}];
    return accumulator
 }, []) 

In general we can use the reduce method like this.