JavaScript Array Methods You Must Know (examples)

If you are a web developer, one of the most used programming languages for you will certainly be JavaScript.

And the other thing that you will certainly use quite often are Array Methods.

Let me explain the most popular of them and how to use them.

🟩 For each method we will use the example below which is really close to a real-life one:

clients:[
{firstname:"John", lastname:"Smith", age:"43"}, 
{firstname:"Mary", lastname:"Anderson", age:"17"},
]

👉 forEach()

The forEach method is used to loop through an array and to get each element of it one by one (everything that is between each coma). In our example, we will get each object separately.

Where can we use it?

For example, if we would like to display a list of clients with their data or a list of items in our store.

How to use it?

clients.forEach((client) => {
console.log(client);
});

It creates a list of clients.

👉 map()

The map method in comparison with the forEach, will not touch an existing array but will create a new one.

Where can we use it?

For example, if you have a list of clients where you have to display their first name and their last name in one field — full name.

How to use it?

const clientFullName = clients.map((client) => {
return { fullname: `${client.name} ${client.lastname}` };
});

It creates a new array where an object will be {fullname: “John Smith} and so on.

👉 filter()

This methods is used to find a particular data in the array to create a new array with this data.

Where can we use it?

For example, if we would like to display only the clients with the lastname Smith or if it is an online store — to display only products with a price not higher than 10$.

The other useful way to use it, is to use it to for a search input.

How to use it?

const filteredClients = clients.filter((item) => item.lastname === "Smith");
console.log(filteredClients);

In the result we will get only the client with the lastname Smith. In this case the string can be replaced by a variable for the search input.

👉 find()

This method returns the first found in the array element.

Where can we use it?

For example, if we would like to find if our client is less than 18 years old.

How to use it?

function findAge(age){
return clients.find(client => client.age < 18);
}

In this case we will have an output only of the first client under 18 years old even if they are more than that.

👉 reduce()

This methods is used to output a sum of numbers.

Where can we use it?

In our example, we can use for displaying an average age of our clients or it can be a total price in our online store.

How can we use it?

const clientArrLength = clients.length;
let total = clients.reduce(function(acc, curr) {
return acc + parseInt(curr.age) / clientArrLength;
}, 0);

In this case, we have to multiply the ages and to divide it by the length of an array that can represent the number of clients.

🟩 In case if you don’t know, parseInt() is use to transform a string to a number.
Without it the result of the sum of the ages would be “4317”.

I hope you enjoyed reading this article and that these JavaScript Methods became clear for you. 😊