How to find all matches in an array of objects in JavaScript

How to find all matches in an array of objects in JavaScript:

In this post, we will explore different ways to find all matches in an array in JavaScript.

Method 1: By using the `filter` method:

The filter method takes one function as its parameter and filters down the elements of the array that are passed by the provided function. It returns a shallow copy of the portion of the array.

Let’s consider the below example:

let studentArr = [{
    id: 1,
    name: 'Alex',
    age: 20
},
{
    id: 2,
    name: 'Bob',
    age: 18
},
{
    id: 3,
    name: 'Chandler',
    age: 19
},
{
    id: 4,
    name: 'Daisy',
    age: 16
},
{
    id: 5,
    name: 'Eva',
    age: 20
}];


let filterArray = studentArr.filter(item => item.id % 2 === 0);

console.log(filterArray);

Download it on GitHub

In this example, we are filtering out the elements with even ids. The filter method checks if the id of an element is even or not with the modulo operator.

If you run this program, it will print:

[ { id: 2, name: 'Bob', age: 18 }, { id: 4, name: 'Daisy', age: 16 } ]

As you can see here, it filtered out the elements with even ids.

Updating the values of the filtered array elements:

The filter method returns a shallow copy of the array elements. So, if we modify any property of these elements, it will reflect on the original array. For example:

let studentArr = [{
    id: 1,
    name: 'Alex',
    age: 20
},
{
    id: 2,
    name: 'Bob',
    age: 18
},
{
    id: 3,
    name: 'Chandler',
    age: 19
},
{
    id: 4,
    name: 'Daisy',
    age: 16
},
{
    id: 5,
    name: 'Eva',
    age: 20
}];


let filterArray = studentArr.filter(item => item.id % 2 === 0);


console.log(`filterArray before update: `,filterArray);

filterArray[0].id = 33;

console.log(`filterArray after update: `,filterArray);
console.log(`studentArr: `, studentArr);

The id of the 0th element of filterArray is changed to 33. If you run this program, it will print:

filterArray before update:  [ { id: 2, name: 'Bob', age: 18 }, { id: 4, name: 'Daisy', age: 16 } ]
filterArray after update:  [ { id: 33, name: 'Bob', age: 18 }, { id: 4, name: 'Daisy', age: 16 } ]
studentArr:  [
  { id: 1, name: 'Alex', age: 20 },
  { id: 33, name: 'Bob', age: 18 },
  { id: 3, name: 'Chandler', age: 19 },
  { id: 4, name: 'Daisy', age: 16 },
  { id: 5, name: 'Eva', age: 20 }
]

Download it on GitHub

You can see that the updated value is also reflected in the original array studentArr.

Method 2: How to filter out objects with multiple properties:

We can filter out elements based on multiple conditions. For example, if we want to pick the objects with even id and age greater than 16, we can use a separate function with these conditions and that function can be passed as the parameter to the filter method. The following example shows how to write it:

const studentFilter = (student) => student?.id % 2 === 2 && student?.age > 16;

let studentArr = [{
    id: 1,
    name: 'Alex',
    age: 20
},
{
    id: 2,
    name: 'Bob',
    age: 18
},
{
    id: 3,
    name: 'Chandler',
    age: 19
},
{
    id: 4,
    name: 'Daisy',
    age: 16
},
{
    id: 5,
    name: 'Eva',
    age: 20
}];

let filterArray = studentArr.filter(studentFilter);

console.log(`filterArray: `,filterArray);
console.log(`studentArr: `, studentArr);

Download it on GitHub

The studentFilter function is passed as the parameter to the filter method. If you run this program, it will print:

filterArray:  [ { id: 2, name: 'Bob', age: 18 } ]
studentArr:  [
  { id: 1, name: 'Alex', age: 20 },
  { id: 2, name: 'Bob', age: 18 },
  { id: 3, name: 'Chandler', age: 19 },
  { id: 4, name: 'Daisy', age: 16 },
  { id: 5, name: 'Eva', age: 20 }
]

Method 3: How to create a deep copy with the `filter()` method:

The return value of the filter() method is a shallow copy of objects. We need to deep-clone the objects to create a new copy. There are different ways in JavaScript to deep copy an object. One of the simplest ways to do it is with the JSON.parse(JSON.stringify(obj)) method. It will return a new deep copied object of the original object obj.

The following example shows how we can use this method with the return array of filter:

let studentArr = [{
    id: 1,
    name: 'Alex',
    age: 20
},
{
    id: 2,
    name: 'Bob',
    age: 18
},
{
    id: 3,
    name: 'Chandler',
    age: 19
},
{
    id: 4,
    name: 'Daisy',
    age: 16
},
{
    id: 5,
    name: 'Eva',
    age: 20
}];


let filterArray = studentArr.filter(item => item.id % 2 === 0).map(item => JSON.parse(JSON.stringify(item)));


console.log(`filterArray before update: `,filterArray);

filterArray[0].id = 33;

console.log(`filterArray after update: `,filterArray);
console.log(`studentArr: `, studentArr);

Download it on GitHub

If you run this program, it will print the below output:

filterArray before update:  [ { id: 2, name: 'Bob', age: 18 }, { id: 4, name: 'Daisy', age: 16 } ]
filterArray after update:  [ { id: 33, name: 'Bob', age: 18 }, { id: 4, name: 'Daisy', age: 16 } ]
studentArr:  [
  { id: 1, name: 'Alex', age: 20 },
  { id: 2, name: 'Bob', age: 18 },
  { id: 3, name: 'Chandler', age: 19 },
  { id: 4, name: 'Daisy', age: 16 },
  { id: 5, name: 'Eva', age: 20 }
]

Even though we changed the id of the element of the filtered array, it didn’t change the property of the original array.

CodeVsColor

How to find all matches in an array of objects in JavaScript