DEV Community

Cover image for 5 must-know Javascript array methods
Khusharth A Patani
Khusharth A Patani

Posted on • Updated on

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)
Enter fullscreen mode Exit fullscreen mode

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 
});
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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'},
] */

Enter fullscreen mode Exit fullscreen mode

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) 
Enter fullscreen mode Exit fullscreen mode

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



Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Discussion (0)