Filter an array in JavaScript

This post will discuss how to filter an array in JavaScript. The solution should return an array of all elements that pass a predicate.

1. Using `Array.prototype.filter()` function

The recommended solution in JavaScript is to use the filter() method, which creates a new array with all elements that pass the predicate function.

The following code example shows how to filter an employee’s object having an age greater than 30.

var employees = [

{ name: 'William', age: 25 },

{ name: 'Oliver', age: 40 },

{ name: 'James', age: 20 },

{ name: 'Sophia', age: 35 }

];

var emps = employees.filter(function (emp) {

if (emp.age > 30) {

return emp;

}

});

console.log(emps);

Output: [ { name: 'Oliver', age: 40 }, { name: 'Sophia', age: 35 } ]

Download Run Code

You can simplify the code to:

var emps = employees.filter(function (emp) {

return emp.age > 30;

});

You can further shorten the code through ES6 arrow functions.

1	var emps = employees.filter(emp => emp.age > 30);

2. Using Lodash/Underscore Library

Like the JavaScript native filter() method, Underscore and Lodash Library provide their own implementation of the filter() method. You can pass any of the above callback functions to the _.filter method to get the same result.

var _ = require('lodash');

const people = [

{name: 'John', age: 23},

{name: 'Andrew', age: 3},

{name: 'Peter', age: 8},

{name: 'Hanna', age: 14},

{name: 'Adam', age: 37}

];

const emps = _.filter(people, emp => emp.age >= 18);

console.log(emps);

Download Code

3. Using jQuery

jQuery map() function is often used to transform all array elements to a new array of items. You can use this for filtering an array as well, as demonstrated below:

const { JSDOM } = require("jsdom");

const { window } = new JSDOM();

var $ = require("jquery")(window);

var employees = [

{ name: 'William', age: 25 },

{ name: 'Oliver', age: 40 },

{ name: 'James', age: 20 },

{ name: 'Sophia', age: 35 }

];

const emps = $.map(employees, function(emp) {

if (emp.age > 30) {

return emp;

}

});

console.log(emps);

Output: [ { name: 'Oliver', age: 40 }, { name: 'Sophia', age: 35 } ]

Download Code

Similar to the Array.prototype.filter() method, jQuery Library has grep() method. You can pass any of the above callback functions to the $.grep() method to get the same result and get the array elements that satisfy the specified function.

const { JSDOM } = require("jsdom");

const { window } = new JSDOM();

var $ = require("jquery")(window);

var employees = [

{ name: 'William', age: 25 },

{ name: 'Oliver', age: 40 },

{ name: 'James', age: 20 },

{ name: 'Sophia', age: 35 }

];

const emps = $.grep(employees, emp => emp.age > 30);

console.log(emps);

Output: [ { name: 'Oliver', age: 40 }, { name: 'Sophia', age: 35 } ]

Download Code

That’s all about filtering an array in JavaScript.

Filter an array in JavaScript

1. Using Array.prototype.filter() function

2. Using Lodash/Underscore Library

3. Using jQuery

Share this:

1. Using `Array.prototype.filter()` function