JavaScript filter() Method Explained with Simple Examples

When you work with arrays in JavaScript, you often need to select only specific items from a list. For example, you may want only even numbers, active users, or products under a certain price. In such cases, a filter in JavaScript becomes very useful.

The filter() method helps you create a new array that contains only the elements that match a condition. Moreover, it keeps your code clean and easy to read. In this article, we will understand everything in simple words with clear examples.

What Does the filter() Method Do?

The filter() method is used to select elements from an array based on a condition. In simple words, it checks every item in the array and keeps only those items that return true.

For example, if you have a list of numbers and you want only numbers greater than 10, filter() can do this easily. As a result, you get a new array with only the matching values.

However, one important thing to understand is that filter() does not change the original array. Instead, it creates a brand-new array. That’s why it is safe and predictable to use.

Syntax of filter() Method

Here is the basic syntax –

array.filter(function(element, index, array) {
  return condition;
});

Now, let’s understand each part clearly.

• array → The original array you are working on.
• element → The current item being checked.
• index → The position of the current item (optional).
• array → The original array itself (optional).
• return condition → This must return true or false.

If the condition returns true, the element is added to the new array. On the other hand, if it returns false, the element is skipped.

Basic Example – Filtering Numbers

Let’s start with a simple example.

const numbers = [5, 12, 8, 20, 3];

const greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

console.log(greaterThanTen);

Output:

[12, 20]

Now, let’s understand what happened here.

First, the filter() method checks each number one by one. Then, it tests whether the number is greater than 10. Because 12 and 20 satisfy the condition, they are added to the new array. As a result, the output becomes [12, 20].

However, the original numbers array remains the same. That’s why filter() is very useful when you do not want to change your original data.

Example – Filtering Even Numbers (Arrow Function)

We can also write the same code using an arrow function. In modern JavaScript, this is more common.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);

Output:

[2, 4, 6]

Here, the condition checks whether the number is divisible by 2. If it is, the function returns true. Therefore, only even numbers are included in the new array.

In addition, this version is shorter and cleaner. That’s why many developers prefer arrow functions with filter().

Example – Filtering Strings

Now let’s filter strings based on their length.

const words = ["cat", "elephant", "dog", "tiger"];

const longWords = words.filter(word => word.length > 3);

console.log(longWords);

Output:

["elephant", "tiger"]

In this example, the condition checks if the word length is greater than 3. Because “elephant” and “tiger” meet the condition, they are included in the new array.

This shows that filter in JavaScript is not limited to numbers. You can also use it with strings and other data types.

Example – Filtering Objects

In real-world projects, we often work with arrays of objects. Therefore, understanding this example is very important.

const users = [
  { name: "Rahul", active: true },
  { name: "Amit", active: false },
  { name: "Neha", active: true }
];

const activeUsers = users.filter(user => user.active === true);

console.log(activeUsers);

Output:

[
  { name: "Rahul", active: true },
  { name: "Neha", active: true }
]

Here, the condition checks whether the user is active. If active is true, the object is added to the new array.

For example, this is very useful in applications where you only want to show active users. As a result, your data becomes more organized and easier to manage.

Why Use filter() Instead of a for Loop?

You might think that we can do the same thing using a for loop. Yes, that is possible. However, filter() makes your code shorter and more readable.

With a for loop, you have to –

• Create an empty array.
• Write loop logic.
• Add conditional statements.
• Push matching elements manually.

On the other hand, filter() does all this in one clean step. Therefore, it reduces errors and improves code quality.

In addition, it follows a functional programming style, which is preferred in modern JavaScript development.

Important Things to Remember

Before you use filter in JavaScript, keep these points in mind:

1. filter() always returns a new array.
2. It does not modify the original array.
3. If no elements match, it returns an empty array.
4. The callback function must return true or false.

Because of these rules, your code becomes more predictable and easier to debug.

Bottom Line

The filter() method is a powerful and simple way to select elements from an array. It checks each item, applies a condition, and returns a new array with matching results.

Moreover, it keeps your original data safe and makes your code cleaner. That’s why filter in JavaScript is one of the most commonly used array methods.

Now that you understand the concept with simple examples, try creating your own filtering conditions. Practice with numbers, strings, and objects. As a result, you will become more confident in using JavaScript arrays.

Read Also – JavaScript Map() Method