Filter method in JavaScript

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

The filter method in JavaScript creates a new array from the existing one if the given condition is true.

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

//Examples
// filter method in JS
// are used for comments


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 in JavaScript.

// 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 using the filter method in JavaScript?

Filtering the array of objects is common in JavaScript. It is achieved 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 filter() method in JavaScript.

Learn about JS Map method

References

https://www.w3schools.com/jsref/jsref_filter.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://www.geeksforgeeks.org/javascript-array-filter-method/

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *