Filter method in JavaScript

Filter method in JavaScript with ES6 easy Examples

The filter method in JavaScript is used to filter or extract arrays or arrays of objects for certain criteria from the existing array.

It creates a new array from the existing one if the given condition is true.

The basic syntax of the filter() method in JavaScript.

// filter method in JS

// The function accepts 'item' as parameter
let new_array = array.filter(function(item) {
  return condition;
});

//using arrow function
// we passed 'item'
let new_array = array.filter( item => condition );

//using arrow function with curly brackets.
let new_array = array.filter(item => {
  return condition;
});

The “item” in the function argument shows the current element while iterating the elements of an array to check the given condition.

Here is a simple example of the filter() method.

// examples

// consider a simple array
var numbers = [2, 4, 6, 8, 10, 12, 3, 5, 7];

// filter even numbers
var even = numbers.filter(function(number) {
  return number %2 ==0;
});
console.log(even);
// [ 2, 4, 6, 8, 10, 12 ]

// filter odd numbers
var odd = numbers.filter(function(number) {
  return number %2 ==1;
});
console.log(odd);
// [ 3, 5, 7 ]

How to use the filter() method using the ES6 arrow function?

It is simple to use an arrow function with the filter method in JavaScript. Here is an example code.

// examples

//filter even numbers
var even = numbers.filter(number => number %2 ==0);
console.log(even);
// [ 2, 4, 6, 8, 10, 12 ]

// filter odd numbers
var odd = numbers.filter(number => number %2 ==1);
console.log(odd);
// [ 3, 5, 7 ]

You can even write an arrow function with an opening and closing Curly bracket. If you are using these brackets then it is necessary to use the reserved word “return”, else it will return an empty array.

// examples

var even = numbers.filter(number => { 
    return number %2 ==0
});
console.log(even);
// [ 2, 4, 6, 8, 10, 12 ]

//without return
var odd= numbers.filter(number => { 
    number %2 ==1
});
console.log(odd);
// []

How to filter an array of objects?

Filtering the array of objects is common in JavaScript. You can get it by checking a true condition, for example, look at the following code. The condition ( company.headquarter === “S.Korea” ) is true for Samsung and LG.

// example

const companies = [
    {name:"Nokia", founded:'1865', headquarter:'Espoo'},
    {name:"Samsung", founded:'1938', headquarter:'S.Korea'},
    {name:"LG", founded:'1974', headquarter:'S.Korea'},
    {name:"Apple", founded:'1975', headquarter:'USA'},
];

//filter the Korean companies, ES6
let korean_companies = companies.filter( company => company.headquarter === "S.Korea");

console.log(korean_companies);
// [{name: "samsung", founded: "1992", headquarter: "S.Korea"}, {name: "LG", founded: "1994", headquarter: "S.Korea"}]

Watch the video about the JavaScript filter() method.