Javascript Reduce method

In This Article, I will teach you about one of the javascript array methods called Reduce

Have you ever struggled to calculate a total from a long list of numbers in JavaScript? If so, you're in luck. In this article, we'll explore the reduce() method, one of the most powerful and versatile array methods in JavaScript. With the reduce() method, you can easily and efficiently perform calculations on arrays of any length. Whether you're a seasoned JavaScript developer or just getting started, you'll find valuable insights and practical examples in this comprehensive guide to using reduce(). So, let's dive in!

This Article expects you to have prior experience in javascript array methods, but nevertheless, if you are a beginner stick around.

What is Array

In computer programming, an array is a collection of elements, each identified by an index or a key, that are stored in contiguous memory locations. An array can store a fixed-size sequential collection of elements of the same data type, such as integers, floating-point numbers, or characters.
Arrays are commonly used in programming because they allow for efficient storage and retrieval of data, as well as easy manipulation of the data stored in them. Elements in an array can be accessed using their index or key, making it easy to retrieve specific pieces of data from the array.

What is a method

Method refers to the property associated with a given entity, such as humans, we have eyes, hands, mouth, etc, used to perform one task or the other.
In the Javascript Array method, they are the Array properties used to perform actions in programming to achieve a given task.

How many methods are there in Array?

In Javascript Array There are over 10 methods used to execute a function and achieve a given goal.
They are:

• push: adds one or more elements to the end of an array and returns the new length of the array.
• pop: removes the last element from an array and returns that element.
• shift: removes the first element from an array and returns that element.
• unshift: adds one or more elements to the beginning of an array and returns the new length of the array.
• slice: returns a shallow copy of a portion of an array into a new array.
• splice: changes the contents of an array by removing or replacing existing elements and/or adding new elements.
• indexOf: returns the first index at which a given element can be found in the array, or -1 if it is not present.
• forEach: executes a provided function once for each array element.
• map: creates a new array with the results of calling a provided function on every element in the calling array.
• filter: creates a new array with all elements that pass the test implemented by the provided function.
• reduce: executes a reducer function (that you provide) on each element of the array, resulting in a single output value. but our focus today is the Reduce.

The Reduce Method

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value

Breaking that down

What this means is, when you execute the reduce method* in the array, you will have to provide a callback function in which the **reduce will be used to perform an action or calculation.

The callback function

The Reduce method has two parameters also known as the callback function, which are the accumulator and item.
The item is the individual items from your Array, while the accumulator is the value resulting from the previous call, incrementing the value on the next call.

The code

const arr = [1, 2, 3, 4, 5];
const calculateArr = arr.reduce((accumulator, item) => {
  return accumulator + item;
}, 0);

console.log(calculateArr); // 15

How did it work?

In this example, we have an array of numbers ([1, 2, 3, 4, 5]). It works by going through (loop) each element on the Array, on the first loop, the accumulator will be 1, then on the next loop, the accumulator will be 3, why? 1+2 is 3. Then on the third loop, the accumulator will be 6, 3 + 3 = 6, it will loop through until the element is finished, then the result is returned as a single value. I also provide an initial value of 0 for the accumulator. Finally, we log the sum to the console (15).

How does it benefit?

With this Reduce method you can calculate a cart price in a shopping app, taking the cart price and cart quantity, and feed it inside the reduce method.

Summary

I have explained what an array is: an Array is the collection of elements, each identified by an index or a key, that are stored in contiguous memory locations.
Array has methods used to execute functions to perform a task. Each method has its callback function and parameters.
We also talked about the reduce method which is our key point, I said:
The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value
Looking at the code, we saw how the reduce method loops through the Array and did the calculation.
So hopefully now, you have a clear understanding of the Reduce method and how to use it in your project.

Thank you for reading!