Top 10 JavaScript Array Methods with examples [UPDATED]

Hey developers, welcome to the "Top 10 Array Methods of JavaScript" post. In this post, we are going to cover the Top 10 JavaScript Array methods with examples which are mostly used. This can be your JavaScript Array Methods Cheatsheet🔥.

So let's start without wasting any time😜.

JavaScript Array Methods with Example

i) filter()

This array method is used to create a new filtered array on the given conditions. The filter method executes the function for each element of the array.

Example:

const values = [20, 23, 43, 3, 2, 61, 394, 42, 52]

const newArray = values.filter(function(value){

    if (value >= 20) {

        console.log(value);

    }

})

// Expected Output: 20 23 43 61 394 42 52

ii) forEach()

This method is used to call a function for each element of the given array. But this method will not execute on the empty elements. This method is used to iterate over the elements of an array and it executes the given function for each element.

Example:

const myArray = [4, 20, 15, 30, 3, 42, 2003];

myArray.forEach(function (currentValue) {

    console.log(currentValue);

});

// Expected Output: 4 20 15 30 3 42 2003

iii) includes()

This array method is used to find does the given array contains a specific value or not. It returns true if the array contains specified values else it will return false.

Example:

const colors = ['Red', 'Green', 'Blue', 'Black', 'Purple', 'Pink'];

const containsRed = colors.includes('Red')

console.log(containsRed);

//Expected Output: true

iv) map()

This javascript array method is used to iterate over an array. It calls the function for every element of an array. And it creates a new array by calling a specific function for every array element. 

Example:

const colors = ['Red', 'Green', 'Blue', 'Black', 'Purple', 'Pink'];

colors.map(function (value, index) {

    console.log(index, value);

})

//Expected Output:

/*

0 Red

1 Green

2 Blue

3 Black

4 Purple

5 Pink

*/

v) reduce()

This array method is used to perform some operations on the array to get a single value. It is an iterative method. 

Example:

const values = [20, 23, 43, 3, 2, 61, 394, 42, 52]

let sumOfValues = values.reduce(function (previousValue, currentValue) {

    return previousValue + currentValue;

}, 0)

console.log(sumOfValues);

// Expected Output:  640

vi) sort()

This javascript array method is used to sort the given array. This array method compares two values and returns the same array as the reference which is now a sorted array.

Example:

const myArray = [4, 20, 15, 30, 3, 42, 2003];

myArray.sort()

console.log(myArray);

// Expected Output: [15, 20, 2003, 3, 30, 4, 42]

vii) find()

This array method returns the first element in an array that passes a given test function. This array method returns 'undefined' if no element of the array pass the test functions. And it returns a single value as an output.

Example:

const myArray = [4, 20, 15, 30, 3, 42, 2003];

const result = myArray.find(function (element) {

    return element > 24;

})

console.log(result);

// Expected Output: 30

viii) findIndex()

This javascript array method is used to find the first index of the element in an array which pass a given test function. It returns single value output. This array method executes the function for each element of the array.

Example:

const myArray = [4, 20, 40, 38, 15, 30, 3, 42, 2003];

const largeNumber = myArray.findIndex(function (element) {

    return element > 37;

})

console.log(largeNumber);

// Expected output: 2

ix) reverse()

This array method is used to reverse the given array. It gives the same array but in this, the first element of the array becomes last and the last element of the array becomes first. and like this other elements of the arrays turned in the opposite direction.

Example:

const myArray = [30, 23, 19, 13, 12, 4, 2, 1]

console.log(myArray.reverse());

// Expected Output: [1, 2, 4, 12, 13, 19, 23, 30]

x) join()

This javascript array method is used to join all the elements of the array into a string. And it separates the array element with a comma(,). It will not change the original and not create a new array. It returns the given array as a string which is by default separated by a comma (,).

const colors = ['Red', 'Green', 'Blue', 'Black', 'Purple', 'Pink'];

const colorsString = colors.join()

console.log(colorsString);

//Expected Output: true: Red,Green,Blue,Black,Purple,Pink

Array Methods in JavaScript PDF: Download Now