8 Modern JavaScript Array Methods that Every Developer Should Know

8 Modern JavaScript Array Methods that Every Developer Should Know

In JavaScript, there are various insanely useful array methods available to us. We will be looking at 8 JavaScript array methods that every developer should know: Map, Find, Filter, forEach, Every, Some, Includes, Reduce

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.