The Javascript Array Methods

7 important advanced Js array methods

Hey there, today we will look at Javascript array methods in detail. These Js array methods are the most useful ones and you would fail to use them in your Js projects.

Let’s dive in!

a) reduce()

The reduce method calculates a single value in an array by calling the function for each element.

The syntax:

Array.reduce(function(accumulator, item, index, array) 

accumulator – It has the initialValue to be used for the array, so it is the result of the previous function call.

Ex:

const arr = [20, 21, 43, 40, 12];
const sum = arr.reduce((sum, current) => sum + current, 0);
alert(sum); // 136

The sum has the first element of the array and the current will contain the next element of the array (20 + 21 = 41) during the first iteration and then 41 + 43 = 84 during the next iteration, and so on…

b) some()

This method doesn’t have to return true or false for all elements like every method except if one element meets the provided test condition the method returns true for all elements.

The syntax:

Array.some(callback(element[, index[, array]])[, thisArg]

Ex:
Checks if any of the value is greater than 20

let ages = [67, 23, 40, 57];
let age = ages.some(age => age > 20)
alert(age); // true

 

c) forEach()

This method iterates over a given array and it has the following syntax:

The syntax:

arr.forEach(callback function(val, index, array)

Ex:

const fruits = ['mangoes', 'Oranges', 'bananas', 'lemons'];
fruits.forEach(function(fruit) {
    alert(fruit);
});

output: mangoes, Oranges, bananas, lemons

or…

You can also have it this way, you can call the value, index and the entire array with the callback function using the forEach
method.

Ex:

const fruits = ['mangoes', 'Oranges', 'bananas', 'lemons'];
fruits.forEach((val, index, array) => {
    console.log(val, index, array);
});

output:
mangoes 0 Array(4)0: "mangoes"1: "Oranges"2: "bananas"3: "lemons"length: 4

Oranges 1 Array(4)0: "mangoes"1: "Oranges"2: "bananas"3: "lemons"length: 4

bananas 2 Array(4)0: "mangoes"1: "Oranges"2: "bananas"3: "lemons"length: 4

lemons 3 Array(4)0: "mangoes"1: "Oranges"2: "bananas"3: "lemons"length: 4

 

d) Map()

The map method is one of the most used methods. What it does is iterates through an array and create a brand new array.

It has the following syntax:

let var = arr.map(function(item, index, array) {
  // Return element for new array
});

Ex:

const fruits = ['mangoes', 'Oranges', 'bananas', 'lemons']
const fruitUppercase = fruits.map(function (fruit) {
    return fruit.toUpperCase();
});

alert(fruitUppercase);

output: MANGOES,ORANGES,BANANAS,LEMONS

 

e) find()

The find method locates an abject with a given specific condition and returns that particular element. This expression must match the callback function.

The syntax:

let var = arr.find(function(item, index, array) {
  //
});

Ex:

let fruits = ['mango', 'oranges', 'banana', 'pineapples'];
let fruit = fruits.find(fruit => fruit === 'banana');
alert(fruit); // banana

or…

let fruits = [
    {id: 1, name:'mango'},
    {id: 2, name:'oranges'},
    {id: 3, name: 'banana'},
    {id: 4, name:'pineapples'}
];

let fruit = fruits.find(item => item.id == 4);
console.log(fruit.name); // pineapples

If the find method finds nothing then undefined is returned.

 

f) filter()

The filter method returns all values that match a given condition passed to the callback function.

The syntax:

let var = arr.filter(function(item, index, array) {
   //
});

Ex:

let fruits = ['mango', 'oranges', 'banana', 'pineapples', 'Olives', 'Orangelo'];
let fruit = fruits.filter(fruit => fruit.endsWith('s'));
alert(fruit); // oranges, pineapples, Olives

 

g) every()

The every array method is used to check if an array of elements match a provided test condition from the callback function.

Therefore it returns a boolean true or false.

The syntax:

Array.every(function(element, index, arr), thisValue)

Ex:

let ages = [67, 23, 40, 57];
let age = ages.every(age => age > 20)
alert(age);

output: true

Sign up for free tutorials in your inbox.

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *