on this page
introductiongetting startedusing reduce: exampleusing reduce: another examplequestion for youFrom a list to one number
This array method can be very useful -- The JavaScript reduce method
Oct 14th, 2021
Javascript
on this page
introductiongetting startedusing reduce: exampleusing reduce: another examplequestion for youLast updated June 23rd, 2022
The JavaScript reduce method is one of the higher order functions introduced in es6 which allows us to "reduce" the values inside of an array into a single value. Today, we will be taking a look at how to implement this in our code.
The .reduce()
method is a higher order function that can be called on any array -- see below:
Like all the other array methods .reduce()
loops through your entire array. The difference here is that .reduce()
is a function has two parameters, one being a function while the other is the initial value of what we call and accumulator -- this is the thing that will increment at every iteration of the loop.
The function inside reduce, takes in two parameters itself, one being an accumulator while the other being the value of the current position in the array. See Below:
To update the accumulator at each iteration we must add a return it inside the function. We can assign this function to a variable which can then be used for anything.
Lets say we have an array from 1 - 10 and we need to add all the elements in the array to determine the total, we can use the reduce method to accomplish this -- We can call the reduce method on our array, setup the accumulator and current parameters and also pass in an initial value of 0.
Going over out class object that we created (link to other post), lets say we wamted to calculate the average for the class. We can either write a while loop or for loop to accomplish this or we can use the reduce method.
Here is an array of objects where each object represents a student in the class.
Using the reduce method:
Now that this is complete, we have a way to reduce an array into a single value without writing our own loop!
Now knowing this, here's a question for you -- how else can we implement the reduce method?
Check out the youtube channel to see how we are implementing the feature in the app we are building! theYoutubeChannel
17 views
0
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce();
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce(() => {}, 0);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce((acc, curr) => {}, 0);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce((acc, curr) => {
return acc + cur;
}, 0);
const students = [
{
Name: "John",
Grade: 90,
},
{
Name: "Sarah",
Grade: 95,
},
{
Name: "Jane",
Grade: 80,
},
{
Name: "Julie",
Grade: 79,
},
];
const students = [
{
Name: "John",
Grade: 90,
},
{
Name: "Sarah",
Grade: 95,
},
{
Name: "Jane",
Grade: 80,
},
{
Name: "Julie",
Grade: 79,
},
];
const TotalMarks = students.reduce((acc, curr) => acc + cur, 0);
const averageMark = TotalMakrs / students.length;
console.log(averageMark);