Array.filter() Method
Tags: webdev, javascript, beginners, programming
Published: 2023-06-15 09:18:36

## What is Filter Method?

The `filter()` method is used to filter the elements of an array based on a condition. It returns a new array containing all elements that pass the test implemented by the provided function. The `filter()` method does not change the original array.

## Syntax

Here's the syntax for using `filter()`:

```js
const filteredArray = arr.filter((element, index, array) => {
	// Return true to keep the element, false otherwise
});
```

The `callback` function is called for each element in the array and takes the following arguments:

- `element`: the current element being processed in the array
- `index` (optional): the index of the current element
- `array` (optional): the array that filter() is being applied to

The `filter()` method calls the `callback` function once for each element in the array, in order, and constructs a new array from the elements for which the callback function returns `true`. The length of the new array will be equal to or less than the `length` of the original array, depending on the elements that pass the test.

Here's an example of how to use `filter()` to get all the even numbers from an array:

```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function (number) {
	if (number % 2 === 0) {
		return true;
	} else {
		return false;
	}
});

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]
```

In the example above, the callback function is an `anonymous` function that takes a single argument, number, and returns `true` if number is even, and `false` otherwise. The `filter()` method calls this function for each element in the `numbers` array and creates a new array with the elements that return `true`.

You can also use an arrow function as the callback function, like this:

```js
let evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]
```

The `filter()` method is useful for creating a new array from a subset of the elements in an array, based on a certain condition.

## Examples

Here are a few more examples of how you can use `filter()`:

### Getting the products with a price greater than 10

```js
const products = [
	{ id: 1, name: "Product 1", price: 10 },
	{ id: 2, name: "Product 2", price: 15 },
	{ id: 3, name: "Product 3", price: 20 },
];

const expensiveProducts = products.filter((product) => product.price > 10);

console.log(expensiveProducts); 
// prints [{ id: 2, name: 'Product 2', price: 15 }, { id: 3, name: 'Product 3', price: 20 }]
```

### Getting the users which live in a particular city

```js
const users = [
	{ id: 1, name: "John", city: "Islamabad" },
	{ id: 2, name: "Jane", city: "Lahore" },
	{ id: 3, name: "Jack", city: "Karachi" },
	{ id: 4, name: "Jill", city: "Rahim Yar Khan" },
	{ id: 5, name: "Joe", city: "Islamabad" },
	{ id: 6, name: "Jen", city: "Lahore" },
];

const usersInIslamabad = users.filter((user) => user.city === "Islamabad");
console.log(usersInIslamabad);
// prints [{ id: 1, name: 'John', city: 'Islamabad' }, { id: 5, name: 'Joe', city: 'Islamabad' }]

const usersInLahore = users.filter((user) => user.city === "Lahore");
console.log(usersInLahore);
// prints [{ id: 2, name: 'Jane', city: 'Lahore' }, { id: 6, name: 'Jen', city: 'Lahore' }]

const usersInKarachiOrRahimYarKhan = users.filter(
	(user) => user.city === "Karachi" || user.city === "Rahim Yar Khan"
);
console.log(usersInKarachiOrRahimYarKhan);
// prints [{ id: 3, name: 'Jack', city: 'Karachi' }, { id: 4, name: 'Jill', city: 'Rahim Yar Khan' }]

const usersInKarachiAndRahimYarKhan = users.filter(
	(user) => user.city === "Karachi" && user.city === "Rahim Yar Khan"
);
console.log(usersInKarachiAndRahimYarKhan);
// prints []
```

### Getting the users which are not admins

```js
const users = [
	{ id: 1, name: "John", isAdmin: true },
	{ id: 2, name: "Jane", isAdmin: false },
	{ id: 3, name: "Jack", isAdmin: false },
	{ id: 4, name: "Jill", isAdmin: true },
	{ id: 5, name: "Joe", isAdmin: false },
	{ id: 6, name: "Jen", isAdmin: true },
];

const nonAdminUsers = users.filter((user) => !user.isAdmin);
console.log(nonAdminUsers);
// prints [{ id: 2, name: 'Jane', isAdmin: false }, { id: 3, name: 'Jack', isAdmin: false }, { id: 5, name: 'Joe', isAdmin: false }]
```

### Getting the users which are not admins and live in a particular city

```js
const users = [
	{ id: 1, name: "John", city: "Islamabad", isAdmin: true },
	{ id: 2, name: "Jane", city: "Lahore", isAdmin: false },
	{ id: 3, name: "Jack", city: "Karachi", isAdmin: false },
	{ id: 4, name: "Jill", city: "Rahim Yar Khan", isAdmin: true },
	{ id: 5, name: "Joe", city: "Islamabad", isAdmin: false },
	{ id: 6, name: "Jen", city: "Lahore", isAdmin: true },
];

const nonAdminUsersInIslamabad = users.filter(
	(user) => !user.isAdmin && user.city === "Islamabad"
);
console.log(nonAdminUsersInIslamabad);
// prints [{ id: 5, name: 'Joe', city: 'Islamabad', isAdmin: false }]
```

### Get the list of products which belong to a particular category

```js
const products = [
	{ id: 1, name: "Phone", category: "Electronics" },
	{ id: 2, name: "Laptop", category: "Electronics" },
	{ id: 3, name: "Shirt", category: "Clothing" },
	{ id: 4, name: "Pants", category: "Clothing" },
	{ id: 5, name: "Socks", category: "Clothing" },
	{ id: 6, name: "Watch", category: "Accessories" },
	{ id: 7, name: "Tie", category: "Accessories" },
	{ id: 8, name: "Belt", category: "Accessories" },
];

const electronicsProducts = products.filter(
	(product) => product.category === "Electronics"
);
console.log(electronicsProducts);

const clothingProducts = products.filter(
	(product) => product.category === "Clothing"
);
console.log(clothingProducts);

const accessoriesProducts = products.filter(
	(product) => product.category === "Accessories"
);
console.log(accessoriesProducts);
```

## `filter()` vs `map()`

The `filter()` method is similar to the `map()` method. Both methods create a new array from an existing array. The difference is that the `filter()` method returns a new array that contains only the elements that pass a certain condition, while the `map()` method returns a new array with the results of calling a callback function on every element in the original array. Here's an example:

```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

const evenNumbersSquared = evenNumbers.map((number) => number * number);

console.log(evenNumbersSquared); 
// prints [4, 16, 36, 64, 100]
```

In the example above, we first use the `filter()` method to create a new array with only the even numbers. Then we use the `map()` method to create a new array with the squares of the even numbers.

## `filter()` vs `forEach()`

The `filter()` method is similar to the `forEach()` method. Both methods iterate over an array and call a callback function on each element in the array. The difference is that the `filter()` method returns a new array that contains only the elements that pass a certain condition, while the `forEach()` method does not return anything. Here's an example:

In `forEach()`:

```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = [];

numbers.forEach((number) => {
	if (number % 2 === 0) {
		evenNumbers.push(number);
	}
});

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]
```

In the example above, we first create an empty array called `evenNumbers`. Then we use the `forEach()` method to iterate over the `numbers` array and push the even numbers into the `evenNumbers` array.

In `filter()`:

```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]
```

In the example above, we use the `filter()` method to create a new array with only the even numbers.

## When to use `filter()`

The `filter()` method is useful when you want to create a new array that contains only the elements that pass a certain condition. It's also useful when you want to remove elements from an array that don't pass a certain condition. Here are some examples:

Like Getting the users which are not admins

```js
const users = [
	{ id: 1, name: "John", isAdmin: true },
	{ id: 2, name: "Jane", isAdmin: false },
	{ id: 3, name: "Jack", isAdmin: false },
	{ id: 4, name: "Jill", isAdmin: true },
	{ id: 5, name: "Joe", isAdmin: false },
	{ id: 6, name: "Jen", isAdmin: true },
];

const nonAdminUsers = users.filter((user) => !user.isAdmin);

console.log(nonAdminUsers);

// prints [{ id: 2, name: 'Jane', isAdmin: false }, { id: 3, name: 'Jack', isAdmin: false }, { id: 5, name: 'Joe', isAdmin: false }]
```

## Conclusion

In this article, we learned about the `filter()` method. We learned how to use the `filter()` method to create a new array with only the elements that pass a certain condition.

We also learned about the `filter()` method's similarities and differences with the `map()` and `forEach()` methods.