DEV Community

Cover image for 5 JavaScript Array methods you need to know!
Avneesh Agarwal
Avneesh Agarwal

Posted on • Originally published at blog.avneesh.tech

5 JavaScript Array methods you need to know!

While building applications you would have noticed yourself using Array's a lot. So let's take a look at the 5 Array methods.

To show you all the methods with examples, I am going to create a simple Array with some fruits and their prices-

const fruits = [
   {
    name: "Mango",
    price: 3,
  },
  {
    name: "Apple",
    price: 5,
  },
  {
    name: "Banana",
    price: 10,
  },
];
Enter fullscreen mode Exit fullscreen mode

1. Map

A map function is similar to loop and if you are a React developer you probably have seen this function be used quite a lot. So let's understand this properly with an example-

function getFruitNames() {
  return fruits.map((fruit) => fruit.name);
}

console.log(getFruitNames());
Enter fullscreen mode Exit fullscreen mode

The getFruitNames maps through the fruits Array and returns the name of each fruit. So if we run the function it will return an Array with all the fruit names-

['Mango', 'Apple', 'Banana']
Enter fullscreen mode Exit fullscreen mode

2. Filter

If you want to filter some products out based on some conditions like getting the fruits that cost more than 4 then we will use the filter function to do so. This is how you use a filter function-

function getCostlyFruits() {
  return fruits.filter((fruit) => fruit.price > 4);
}

console.log(getCostlyFruits());
Enter fullscreen mode Exit fullscreen mode

This function returns-

[
  { name: "Apple", quantity: 5 },
  { name: "Banana", quantity: 10 },
];
Enter fullscreen mode Exit fullscreen mode

3. Reduce

Reduce lets you add up a bunch of numbers inside an Array, in a very easy way.

The Math GIF

Let's see it in action-

function getTotalCost() {
  return fruits.reduce((acc, fruit) => acc + fruit.price, 0);
}

console.log(getTotalCost());
Enter fullscreen mode Exit fullscreen mode

So the first parameter is the number formed by adding the previous numbers and the second parameter is the amount that will get added to the first value. The 0 that you see at the end can be replaced with the number you want the count to start with.

This function outputs a number, in this case- 18

4. Find

If you want to find fruit based on its price or by its name, then this is the method you are looking for.

function getFruitByName(name) {
  return fruits.find((fruit) => fruit.name === name);
}

console.log(getFruitByName("Mango"));
Enter fullscreen mode Exit fullscreen mode

This will return the Mango object when run-

{ name: 'Mango', price: 3 }
Enter fullscreen mode Exit fullscreen mode

5. Includes

This method lets you check if there is an item in that Array. Suppose I want to check if banana is present in the fruits Array. If it is present then it will return true, otherwise false. You can't check items inside an object in the Array, so I am going to use the Array with the names from our getFruitNames function-

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Orange"));
Enter fullscreen mode Exit fullscreen mode

This will return false as Orange isn't inside the fruits Array, but if we try Apple then it would return true-

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Apple"));
Enter fullscreen mode Exit fullscreen mode

Hope you found this useful. If you have any questions, drop them down in the comments. Until next time Peace ✌️

Useful Links-

CodePen

Connect with me

Discussion (0)