loading...
Cover image for 5 must-know Javascript array methods

5 must-know Javascript array methods

khusharth profile image Khusharth A Patani ・2 min read

Arrays are somethings which 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.

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

snacks.forEach((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.

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((snack) => {
    return snack.name;
});
// Output: ['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 which satisfies our given condition.

In the following example, we can use the filter method to filter out snacks which has 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((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 reduces the array into a single value in the end.

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 .

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

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

Posted on by:

khusharth profile

Khusharth A Patani

@khusharth

Frontend Developer | Javascript | React

Discussion

markdown guide