JavaScript Tutorial: How to use array methods

Essa — Tue, 22 Oct 2019 13:49:23 +0000

When I start learning javascript I didn't know what's the difference between each method. I am trying here to explain some array methods in javascript, and I will write an example for each array.

.findIndex() method returns an index in the typed array. For example, you have this code:

let array = [600, 400, 300, 1402, 948, 133, 200, 99]
array.findIndex((value) => value > 600) //output 3

When you run it, it will return 3 because 1402 is the next biggest number. But if you use the same array with .filter() method it will return something else because the filter method creates a new array with all elements that pass the test implemented by the provided function.


let array = [600, 400, 300, 1402, 948, 133, 200, 99]
array.filter((x) => x > 600) //output Array [ 1402, 948 ]

Another example for .fillter():

let products = [
    { name: "Math book", price: 10.99 },
    { name: "Python book", price: 43.87 },
    { name: "Physics book", price: 33 }
]

let expensiveProducts = products.filter((product) => product.price >= 15)
//output
//{ name: "Python book", price: 43.87 },
//{ name: "Physics book", price: 33 }

As we can see the output is the python book and the physics book because they cost more than 15.

.map() method creates a new array with the results of calling a provided function on every element in the calling array. Let's use the same example but with the map method.

let products = [
    {name: "Math book", price: 10.99},
    {name: "Python book", price: 43.87},
    { name: "Physics book", price: 33}
]

let prices = products.map((product) => product.price) 
// output Array(3) [ 10.99, 43.87, 33 ]

As we can see the output will be a new array with the prices.

.some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value. But .every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. And here is an example:

let users = [
    { name: "Bill Gates", age: 64},
    { name: "Mark Zuckerberg", age: 35},
    { name: "Elon Musk", age: 48},
    { name: "Sundar Pichai", age: 47},
    { name: "Satya Nadella", age: 52}
]

users.some(user => user.age <= 50) //true
users.every(user => user.age <= 50) //false

As you can see some users less than 50 years old so that's true. But no all of them less than 50 years old which is false.

.reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. In the code below we used reduce method to accumulator the price for each book.

let products = [
    { name: "Math book", price: 10.99 },
    { name: "Python book", price: 43.87 },
    { name: "Physics book", price: 33 }
]

let sum = products.reduce((accumulator, element) => accumulator + element.price, 0)
console.log(sum) //output 87.86

DEV Community: Essa

JavaScript Tutorial: How to use array methods