Filtering Data in JavaScript using the Array filter() Method

The JavaScript filter() method creates a new array with all elements that pass the test implemented by the provided function. It’s used when you want to filter out elements from an array based on some condition.

filterElements.js

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = arr.filter((ele) => ele % 2 == 0); // 2,4,6,8
const oddNumbers = arr.filter((ele) => ele % 2 != 0); // 1,3,5,7,9

console.log(`arr : ${arr}`);
console.log(`evenNumbers : ${evenNumbers}`);
console.log(`oddNumbers : ${oddNumbers}`);

Output

arr : 1,2,3,4,5,6,7,8,9
evenNumbers : 2,4,6,8
oddNumbers : 1,3,5,7,9

'evenNumbers' will hold all the even numbers from arr, whereas 'oddNumbers' will hold all the odd numbers from arr.

 

Syntax

let newArray = array.filter(callback(element, index, array));

Callback function: The method takes a callback function that is executed for every element in the array. This callback receives three arguments:

 

1.   Element: The current element being processed.

2.   Index: The index of the current element.

3.   Array: The original array on which filter() was called.

 

Filter the objects by specific property

 

filterByObjectProperty.js

const emps = [
  { id: 1, name: "Krishna", age: 36 },
  { id: 2, name: "Ram", age: 39 },
  { id: 3, name: "Gopi", age: 42 },
  { id: 4, name: "Sailu", age: 37 },
];

const empsWithAgeLessThan40 = emps.filter((emp) => emp.age < 40);

console.log(`emps : ${JSON.stringify(emps)}`);
console.log(`\nempsWithAgeLessThan40 : ${JSON.stringify(empsWithAgeLessThan40)}`);

Output

emps : [{"id":1,"name":"Krishna","age":36},{"id":2,"name":"Ram","age":39},{"id":3,"name":"Gopi","age":42},{"id":4,"name":"Sailu","age":37}]

empsWithAgeLessThan40 : [{"id":1,"name":"Krishna","age":36},{"id":2,"name":"Ram","age":39},{"id":4,"name":"Sailu","age":37}]

Key points about filter method

1.   The filter() method returns a new array and does not modify the original array. The original array remains unchanged.

2.   The callback function must return a truthy value (e.g., true, non-zero number) for the element to be included in the new array. If false or a falsy value is returned, the element is excluded.

3.   Only elements that pass the test (i.e., the callback returns true) will be included in the new array. If no elements pass the test, an empty array is returned.

 

Previous                                                    Next                                                    Home