JavaScript filter() Method

Introduction

The JavaScript map() method is a powerful array method used to transform data and create new arrays efficiently. It improves code readability and is widely used in modern JavaScript development, APIs, and frameworks like React.

What is JavaScript filter() Method?

In JavaScript, filter is an array method used to search for elements in an array based on a given condition.

Syntax of filter()

array.filter(function(currentValue,index,array){})

Explanation of Parameters:

• currentValue: Current element
• index: Current position
• array: Original array

Basic Examples of filter()

Example 1: Filter Numbers Greater Than 10

let numbers = [5,10,15,20];

let result = numbers.filter( num => num>10);

console.log(result);

Output:

Example 2: Filtering Even Numbers:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); 

Output:

Example 3: Filtering Odd Numbers:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 10];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); 

Output:

Example 4: Filtering a string from the array

const fruits = ['Apple', 'Banana', 'Orange'];
const filteredData= fruits.filter(fruit => fruit == 'Orange');
console.log(filteredData); 

Output:

Example 5: Filtering Objects in an Array

const employees = [
  { name: 'John', age: 38 },
  { name: 'Tom', age: 37 },
  { name: 'Mathew', age: 35 },
  { name: 'Andrew', age: 30 },
];

const data = employees.filter(employee => employee.age > 36);
console.log(data); 

Output:

Real-Life Example

You will see many real-life examples of the filter() method.

1. Real-Life Example 1: E-commerce Product Filtering

Suppose users want products above ₹500.

let prices = [300,700,900];

let result = prices.filter(price => price>500);

console.log(result);

Output:

Real-Life Example 2: Student Pass Marks

Filter students who passed (number greater than or equal to 40).

let marks = [35,80,20,90];
let passed = marks.filter(mark => mark>=40);

console.log(passed);

Output:

Real-Life Example 3: Search Functionality

In this example, we will search for products containing: Laptop

let products=["Laptop", "Phone","Laptop Bag"];
let result= products.filter(item => item.includes("Laptop"));
console.log(result);

Output:

Difference Between filter() and find()

Common Mistakes in filter()

You will see many common mistakes.

Mistake 1: Forgetting Return Statement

Wrong:

let nums= [1,2,3,4,5];
let results = nums.filter(num => {num>2});
console.log(results);

Output:

Note: In the above example, we missed a return.

Correct:

let nums= [1,2,3,4,5];
let results = nums.filter(num => {return num>2});
console.log(results);

Output:

Mistake 2: Expecting the Original Array to Change

let nums= [1,2,3];
nums.filter( num => num>1);
console.log(nums);

Output:

let nums= [1,2,3];
let results = nums.filter( num => num>1);
console.log(results);

Output:

filter() method – Interview Questions

filter() method – Objective Questions (MCQs)

Conclusion

The JavaScript filter() method is a powerful array method used to select elements based on conditions. It is commonly used in search systems, e-commerce filters, API data processing, and user management.

Unlike loops, filter() provides a cleaner and more readable way to work with arrays.