Array Methods in Javascript that makes development easier

In this article, we will see some array methods in javascript that makes development easier. Array Methods in Javascript that makes development easier.

When you start to work as a javascript developer, you often need to do some manipulation in array to get the output.

Here, we will see some array methods in javascript that makes development easier.

Map

Firstly, it is one of the common and useful methods in javascript array. Map takes each element in the array and calls a function and returns the result of it.

That is to say, Let's consider an example array

1let sample = [{
2 "id" : 1,
3 "name" : "ganesh",
4 "data" : "sample",
5 "score" : 12
6},{
7 "id" : 2,
8 "name" : "john",
9 "data" : "samplevalue",
10 "score" : 23
11},{
12 "id" : 3,
13 "name" : "test",
14 "data" : "testvalue",
15 "score" : 32
16},{
17 "id" : 4,
18 "name" : "four",
19 "data" : "sample",
20 "score" : 33
21}]

Above all , we want to return only id and name from the array without mutating the original array.

so, we can achieve this using map method in javascript. Note: Map

1let mappedArray = sample.map(obj => {
2 return {
3 id: obj.id,
4 name: obj.name,
5 }
6})
7
8console.log(mappedArray)

Filter

filter method loops through each element in the array and returns the element which matches the condition.

Let's consider the above array as an input here as well,

1let sample = [{
2 "id" : 1,
3 "name" : "ganesh",
4 "data" : "sample",
5 "score" : 12
6},{
7 "id" : 2,
8 "name" : "john",
9 "data" : "samplevalue",
10 "score" : 23
11},{
12 "id" : 3,
13 "name" : "test",
14 "data" : "testvalue",
15 "score" : 32
16},{
17 "id" : 4,
18 "name" : "four",
19 "data" : "sample",
20 "score" : 33
21}]

Above all, we want to filter out the elements which has data as sample. we can achieve this using filter

1let filteredArray = sample.filter(obj => {
2 if (obj.data === "sample") return true
3})
4
5console.log(filteredArray)

Screenshot 2019 11 09 at 2 34 09 PM

Reduce

Mainly, reduce method is used when you want to accumulate the each element value into a single value.

For example, if you want to sum all the element values in the array. you can achieve this using reduce method in javascript.

On the above input array, we want to get sum of all the user score. reduce method is used to achieve it.

1let sumValue = sample.reduce((sum, obj) => {
2 return obj.score + sum
3}, 0)
4
5console.log(sumValue)

Screenshot 2019 11 09 at 2 40 03 PM

Some

some method checks if atleast one element in the array matches the condition.if it matches, it will return true else it will return false.

That is to say, Let's see this with an example array data,

1let userdata = {
2 "id" : "1",
3 "name" : "john",
4 "organisations" : [{
5 "organisationid" : "123",
6 "role" : "ADMIN"
7 },
8 {
9 "organisationid" : "54534",
10 "role" : "MEMBER"
11 },
12 {
13 "organisationid" : "3467",
14 "role" : "MODERATOR"
15 }]
16}

Here, we want to check if user role in any organisation is admin or not. we can achieve this using some method in javascript.

1isUserAdmin = userdata.organisations.some(val => {
2 if (val.role === "ADMIN") {
3 return true
4 }
5})
6
7console.log(isUserAdmin)

So, you can see the output like,

Screenshot 2019 11 09 at 2 43 44 PM

Every

every method check if each element passes the condition, if it matches, it return true else it return false.

1let isScoreAbovePar = sample.every(item => {
2 return item.score > 10
3})
4
5console.log(isScoreAbovePar)

So, you can see the output like,

Screenshot 2019 11 09 at 2 49 21 PM

findIndex

there might be sometime where you need to find the element index . it can be achieved using findIndex method in javascript.

1let userWithScore = sample.findIndex(element => {
2 return element.score === 23
3})
4
5console.log(userWithScore)

Mainly, findIndex takes a function as an input which returns the true or false based on the condition.

Above all, we are checking if an object has score value equal to 23 , if it is, it returns true for the element.

Screenshot 2019 11 09 at 2 56 27 PM

Splice

Mainly, splice method returns all the element from the specified position. for example,if you specify 2, then it reurns all the element from the array index position 2.

1let arr = [1, 2, 3, 4, 5, 6, 7]
2
3let splicedArray = arr.splice(2)
4
5console.log(splicedArray)
6console.log(arr)

So, it will return the output like,

Screenshot 2019 11 09 at 3 03 17 PM

But, the problem with splice is it mutates the original array. As you can see from the above output. it mutates the original array.

Slice

Slice is similar to splice method in javascript except it creates a new array without mutating the original array.

1let arr = [1, 2, 3, 4, 5, 6, 7]
2
3let splicedArray = arr.slice(2)
4
5console.log(splicedArray)
6console.log(arr)

output will be like,

Screenshot 2019 11 09 at 3 03 17 PM

Complete Code

Summary

To sum up, these are all the most commonly used array methods in javascript. you can learn more about array methods in javascript here.

To Read More

How to build an Actionable data ta...

In this article, we will see how to build an Actionable data table using a react...

How to Integrate Google Sheet in No...

This article explains how to Integrated Google sheet with your Nodejs Applicatio...

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...