filter in JavaScript: Examples and Use Cases

filter in JavaScript: Examples and Use Cases

filter selects elements from an array based on a condition. Here are practical examples.

Basic Filtering

[1, 2, 3, 4].filter((n) => n > 2); // [3, 4]
[1, 2, 3, 4].filter((n) => n % 2 === 0); // [2, 4] (evens)
``
### Filtering Objects

```js
const users = [
  { name: "A", age: 20 },
  { name: "B", age: 30 },
  { name: "C", age: 20 },
];
const adults = users.filter((u) => u.age >= 30); // [{ name: "B", age: 30 }]
``
### Removing Falsy Values

```js
[0, 1, "", "a", null, undefined, false, true].filter(Boolean);
// [1, "a", true]
``
`Boolean` is a function that returns the truthiness of a value. Passing it to `filter` removes all falsy values.

### Removing Duplicates

```js
const arr = [1, 2, 2, 3, 3, 3];
const unique = arr.filter((n, i, arr) => arr.indexOf(n) === i);
// [1, 2, 3]
``
Or use `Set`: `[...new Set(arr)]`.

### Search

```js
const products = [
  { name: "Apple", category: "fruit" },
  { name: "Carrot", category: "vegetable" },
];
const fruits = products.filter((p) => p.category === "fruit");
``
### Using the Index

```js
const arr = ["a", "b", "a", "c"];
const firstOccurrence = arr.filter((char, i, arr) => arr.indexOf(char) === i);
// ["a", "b", "c"] (remove duplicates)
``
### Common Mistakes

1. **Not returning a boolean**: `filter` expects truthy/falsy. If you return `undefined`, nothing is included.
2. **Mutating the original**: `filter` should be pure. It returns a new array.
3. **Confusing `filter` with `find`**: `filter` returns all matches (array). `find` returns the first match (single value).

### The Takeaway

`filter` selects elements based on a condition. Use cases: basic filtering, filtering objects, removing falsy values (`Boolean`), removing duplicates, and search. Return a boolean from the callback. Do not mutate the original. `filter` returns all matches; `find` returns the first.