While performing array operations with long lines of code, have you ever stopped and wondered if there was an easier way to do it?

In JavaScript, there are various insanely useful array methods available to us. And when used correctly, they can help you achieve great things with just a few lines of readable code.

We will be looking at 8 array methods can drastically decrease your workload and benefit you.

1. Map
2. Find
3. Filter
4. forEach
5. Every
6. Some
7. Includes
8. Reduce

Let’s get started.

---

1. Map

The Map method allows you to convert your existing array into a new array with your specified operation.

var numbers = [4, 9, 16, 25];

var x = numbers.map(v=> 2*v)
console.log(x)
console.log(numbers)

The map method will return a new array and store it in the variable ‘x’. The original array ‘numbers’ will remain the same.

The expected output of the code above will be:

[8,18,32,50] // x

[4,9,16,25]  // numbers

2.Find

This is another useful.

What the find method does is that it allows us to find a particular object in the array.

The syntax is similar to the map method except we have to return true or false based on some particular check.

This method stops iterating over the array as soon as true is returned for the first time.

It is worth noting that it returns the very first time in the array that matches our search query.

var data = [
  {item:'Coffee', price:10},
  {item:'Tea',price:12},
  {item:'Shirt',price:25},
  {item:'Pen',price:6},
  {item:'Shirt', price:10}
];
var searchEle=data.find(v => v.item=='Shirt')
console.log(searchEle)

Output:

{
  item:"Shirt",
  price:25
}

As you can see, we have two objects in our array ‘data’ with the value of ‘item’ as ‘Shirt’, however, the .find() method has only returned the first object matching our condition.

3. Filter

As the name suggests, this method allows us to filter our array.

Like the above 2 methods, this method doesn’t alter the original array as well.

We will be using the same ‘data’ array in the previous example and we will be filtering out elements whose price is under 10.

var data = [
  {item:'Coffee', price:10},
  {item:'Tea',price:12},
  {item:'Shirt',price:25},
  {item:'Pen',price:6},
  {item:'Shirt', price:10}
];
var filteredArr=data.filter(v => v.price>=10)
console.log(filteredArr)

If you take a look at the function inside the filter method, you can see that we are checking if the ‘price’ property of the current object has a value greater than equal to 10.

If it does, the element is added to our “filteredArr” array.

The output of the code snippet above:

[
  {
    "item": "Coffee",
    "price": 10
  },
  {
    "item": "Tea",
    "price": 12
  },
  {
    "item": "Shirt",
    "price": 25
  },
  {
    "item": "Shirt",
    "price": 10
  }
]

Another interesting thing you can do is that you can achieve the functionality of the find() method using this method. However, there would be one difference.

When using the find method, we only get the first element that matches our search query, and with the filter method, we will obtain all the elements that match our query.

This would be better showcased if we use the same example like the one we used to show the find method, only this time we will use the filter method to achieve the same purpose.

var data = [
  {item:'Coffee', price:10},
  {item:'Tea',price:12},
  {item:'Shirt',price:25},
  {item:'Pen',price:6},
  {item:'Shirt', price:10}
];
var searchEle=data.filter(v => v.item=='Shirt')
console.log(searchEle)

We just had to swap the ‘find’ keyword with ‘filter’ and the rest of the code remains the same. However, the output would look different.

[
  {
    "item": "Shirt",
    "price": 25
  },
  {
    "item": "Shirt",
    "price": 10
  }
]

As stated before, unlike the find method, the filter will return every objected for which the function returns true and not stop the first time.

#web-development #javascript #programming #developer