Array Methods in JavaScript

4 min readSep 3, 2020

JavaScript arrays are wonderful and they provide a lot of built-in methods. Using these methods we can do some efficient things with the list of benefits, like looping, accessing each value and index in the array, and a lot of other useful stuff. Today we are going to discuss some most useful array methods every developer should know. Let's get started.

filter()

Javascript array.filter() method creates a new array with all elements that pass the test implemented by the callback function.

Suppose you have an array of student objects where each object contains three properties: id and name and GPA. To find the student whose GPA is greater than 3.50, you loop over the array element using for loop. But javascript filter() method allows you to do this task in a shorter way.

In this example, we called the filter() method of the student's array object and passed into an es6 arrow function that tests each element. If functions return true, then the filter() method includes the element in the result array.

Note: filter() method does not change the original array.

find()

Javascript array.find() method returns the value of the first element in an array that passes the test implemented by the callback function.
The syntax is similar to filter, but find() returns only the first element in an array.

map()

Javascript array.map() method creates a new array with the results of calling a provided function on every element in this array. It is one of the most useful and often used. It calls the function for each element of the array and returns the array of results.

Suppose you need to take an array, transform its elements, and include the results in a new array.

Here the map() method iterate on each element of the numbers array and return a new array with the elements that have been transformed.

Suggestion: If you don’t actually need the array and you are simply trying to iterate, use forEach(). Remember map will create a new array on each call.

foreach()

Javascript array.forEach() method calls a function for each element in the array.

slice()

The slice() is used to clone an array as shown in the following example:

Here, the newNum array contains all the elements of the numbers array.

The slice() method accepts two optional parameters as follows:
slice(start, stop). This method with optional parameters returns a new array with specified start to end elements.

reduce()

Suppose that you have an array of numbers, like this:

let numbers = [1, 2, 3, 4, 5];

If you call array.reduce() that helps you to reduce an array to a single value, like this:

Now the million-dollar question is how exactly it works? well, The reduce() method take 4 arguments:

accumulator(initialValue)
currentValue(The value of the array element in the current iteration)
currentIndex(The index of the array element in the current iteration)
array

Here, currentIndex and array are the optional arguments. In the above example, total = accumulator, by default it's 0. And in every iteration current value is changed. So for Now the total= 0 and currentNumber= 1.