JavaScript

How to Implement a filter() for Objects in JavaScript?

JavaScript is a scripting language that executes the script by providing functionality to the users. It executes on the client side and has built-in functions including alert(), console.log() and filter() methods.

In JavaScript, users face difficulty in utilizing the filter() method on objects because the filter() method cannot iterate over the keys and values in an object.

Keeping in view the importance of the filtering phenomenon, we have provided a detailed guide to understanding how to filter objects in JavaScript.

How Does filter() Work for Objects in JavaScript?

The basic working of the filter() method is that the elements/objects are passed to a condition. After fulfilling the conditions, the method returns an array of filtered data. Users can specify the conditions in the filter() method according to their needs.

Example 1

An example is demonstrated to practically implement a filter() method for objects in JavaScript.

Code

let student = [
let student = [
  { name: 'Ali', subject: 'English' },
  { name: 'John', subject: 'Physics' },
  { name: 'Marry', subject: 'Math' },
  { name: 'Dany', subject: 'English' },
  { name: 'Kohli', subject: 'English' },
]

TopStudent = student.filter(student => student.subject == 'English');
console.log(TopStudent);

The description of the above code is as follows:

  • First, an array of objects is created which contains the name and subject of the students.
  • After that, a filter is applied to check the condition “student.subject==English’”
  • It evaluates students that are studying English subjects and stores them in the TopStudent variable.
  • Finally, the TopStudent variable is displayed using the console.log() method.

Output

The outcome of the filter() method represents that those students named Ali, Dany, and Kohli study the English subject.

Example 2

An example is given to filter the even numbers in an array containing values 1 to 6.

Code

const numbers = [1, 2, 3, 4, 5, 6];

let callback = a => a % 2 === 0;

const e = numbers.filter(callback);

e;

In this code:

  • An array number is created having 1 to 6 values in it.
  • After that, a filter() method is implemented by passing the callback variable.
  • Furthermore, the callback variable stores values divided by 2 and stored in it.

Output

The output shows the above code execution by filtering the values, which are divided by the number 2.

Conclusion

In JavaScript, the filter() method returns a new array of selected elements/objects that meet the specific condition. It is difficult to directly apply the filter() method to the keys and values of the objects. This post guides you to filter objects by their keys and values. To do so, a practical implementation of the object with the filter() method is also provided.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.