5 must-know Javascript array methods

Arrays are somethings that are used a lot in the programming world. In javascript, arrays have a lot of powerful methods that we can use to iterate, add, remove, or manipulate the data according to our needs. We will be seeing some of them in this post.

1. forEach()

This method is used when we want to iterate over the same array. The method executes a function for every item present in the array. It does not return anything by default.

Syntax:

array.forEach(function(currentElement, index, arr) {
    // do something
}, thisValue)

Parameters:

• currentElement: The value of the current element in the loop.
• index : The index of the current element.
• arr : The array on which forEach() method is called.
• thisValue : Value of this keyword.

Example:

const snacks = [
{ id: 1, name: 'Burger', price: 60 },
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

snacks.forEach(function(snack) {
    console.log(snack.name); // Output: Burger, Pizza, Sandwich 
});

2. map()

This method receives a function as a parameter and returns a new array as an output. The function is called once for every element present in the array.

Syntax:

array.map(function(currentElement, index, arr) {
    // do something and return a new array
}, thisValue)

Parameters:

• Same as forEach method.

Example:

In the following example, we can use the map method to create a new array having only the names of the snacks in it.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 50}
]

const snackNames = snacks.map(function(snack) {
    return snack.name;
});
// Output: snackNames = ['Burger', 'Pizza', 'Sandwich']

3. filter()

The filter method as the name suggests is used to filter an array based on a condition we provide to the method and in return, it creates a new array that satisfies our given condition.

Syntax:

array.filter(function(currentElement, index, arr) {
    // return a new array with elements that satisy a condition
}, thisValue)

Parameters:

• Same as forEach method.

Example:

In the following example, we can use the filter method to filter out snacks that have a price of more than 50.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const filteredSnacks = snacks.filter(function (snack) {
    return snack.price > 50;
});
/* Output: [
{ id: 1, name: 'Burger', price: '60'},
{ id: 2, name: 'Pizza', price: '100'},
] */

4. reduce()

This method executes a provided function for every value present in the array and this function is also called a reducer function as it reduces the array into a single value in the end.

Syntax:

array.reduce(function(total, currentElement, index, arr) {
    // reduce the array to a single value
}, initialValue) 

Parameter:

• total : It is the total of all the return values we get on each function call and it's initially set equal to the initialValue.
• currentElement : The value of the current element in the loop.
• index : The index of the current element.
• arr : The array on which reduce() method is called.
• initialValue : It is the initial value used for the first parameter (here total) of the function.

Example:

In our example, if we want to get the total of the price of all the snacks present in our array we can use the reduce() method.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const totalPrice = snacks.reduce((snack, currentTotal) => {
    return snack.price + currentTotal;
}, 0); // 0 is used to initialize our total to 0

console.log(totalPrice); // Output:  200

5. includes()

This method is used to determine if an element is present in an array or not. If the element is present it returns true otherwise it returns false .

Syntax:

array.includes(element, startIndex);

Parameters:

• element : The element to search for.
• startIndex : Index of the array from where you want to start.

Example:

const numbersArray = [10, 20, 30, 40, 50];

console.log(numbersArray.includes(10)); // Output: True
console.log(numbersArray.includes(100)); // Output: False