Skip to main content

The 9 must know JavaScript Array Methods


The array below will be used to demonstrate all the array methods.

const items = [
{ name: "Bike", price: 100 },
{ name: "TV", price: 200 },
{ name: "Album", price: 10 },
{ name: "Book", price: 5 },
{ name: "Phone", price: 1000 },
{ name: "Computer", price: 25 },
];

Filter#

The filter() method creates a new array containing only the items that meets the filter criteria,
like in the example below, al the items where the price is less or equal to 100.

const filteredItems = items.filter((item) => {
return item.price <= 100;
});
console.log(filteredItems);

Results

[
{ "name": "Bike", "price": 100 },
{ "name": "Album", "price": 10 },
{ "name": "Book", "price": 5 },
{ "name": "Computer", "price": 25 }
]

Map#

The map() method will iterate over an array, perform some operations on the data and create a new array from that results.

// iterating on an array and creating a new array based in your selection createria
const itemNames = items.map((item) => {
return item.price * 2;
});
console.log(itemNames);

Results

[200, 400, 20, 10, 2000, 50]

Find#

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

// find a single item in an array
const findItem = items.find((item) => {
return item.price === 1000;
});
console.log(findItem);

Results

{ "name": "Phone", "price": 1000 }
  • If you need the index of the found element in the array, use findIndex().
  • If you need to find the index of a value, use Array.prototype.indexOf(). (It’s similar to findIndex(), but checks each element for equality with the value instead of using a testing function.)
  • If you need to find if a value exists in an array, use Array.prototype.includes().

Foreach#

The foreach() method iterates over ever element in the array, once.
Unlike map(), foreach() will mutate the array if you change the orginal values in the array.

items.forEach((item) => {
console.log(item.name);
});

Results

Bike
TV
Album
Book
Phone
Computer

Some#

The some() method returns true of false if one of the items in the array matches condition

const hasSomeExpensiveItems = items.some((item) => {
return item.price > 1100;
});
console.log(hasSomeExpensiveItems);

Results

false

Every#

The every() method returns true of false if all of the items in the array matches condition

const hasExpensiveItems = items.every((item) => {
return item.price < 1100;
});
console.log(hasExpensiveItems);

Results

true

Reduce#

The reduce() method performs an operation on the array and returns one result, like getting the total amount of all the items in a cart.

const total = items.reduce((currentTotal, item) => {
return item.price + currentTotal;
}, 0);
console.log(total);

Results

1340

Sort#

The sort() method sorts items based on a property and returns a new array

const sorted = items.sort((a, b) => {
// Sorting high to low
return a.price < b.price;
// Sorting low to high
// return a.price > b.price;
});
console.log(sorted);

Results

[
{ "name": "Phone", "price": 1000 },
{ "name": "TV", "price": 200 },
{ "name": "Bike", "price": 100 },
{ "name": "Computer", "price": 25 },
{ "name": "Album", "price": 10 },
{ "name": "Book", "price": 5 }
]

Includes#

The includes() method determines whether an array includes a certain value among its entries,
returning true or false as appropriate

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ["cat", "dog", "bat"];
console.log(pets.includes("cat"));
// expected output: true
console.log(pets.includes("at"));
// expected output: false

Thank you!

Last updated on