How to Fix Array.filter Not Working in JavaScript

In this tutorial, you'll learn about How to Fix Array.filter Not Working in JavaScript. We cover key concepts, practical examples, and best practices.

The Problem

Array.filter() returns unexpected results when the callback returns a truthy/falsy value instead of a boolean, or when filtering objects by property values using incorrect comparisons.

Quick Fix

Step 1: Ensure the callback returns a boolean

A missing explicit return in a block body returns undefined:

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(num => {
    num % 2 === 0;
});
console.log(evens);

[]

The expression is evaluated but not returned. Fix with explicit return:

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(num => {
    return num % 2 === 0;
});
console.log(evens);

[2, 4]

Or use implicit return:

const evens = nums.filter(num => num % 2 === 0);

Step 2: Use strict equality for comparisons

Loosely comparing may produce false positives:

const items = [
    { id: '1', name: 'Alice' },
    { id: 1, name: 'Bob' },
    { id: '2', name: 'Charlie' }
];
const result = items.filter(item => item.id == 1);
console.log(result);

[
    { id: '1', name: 'Alice' },
    { id: 1, name: 'Bob' }
]

Both '1' == 1 and 1 == 1 are true. Use strict equality:

const items = [
    { id: '1', name: 'Alice' },
    { id: 1, name: 'Bob' },
    { id: '2', name: 'Charlie' }
];
const result = items.filter(item => item.id === 1);
console.log(result);

[{ id: 1, name: 'Bob' }]

Step 3: Filter undefined and null correctly

Falsy values include 0 and '', which may be valid data:

const data = [0, 1, '', 'hello', null, false, undefined];
const clean = data.filter(item => item);
console.log(clean);

[1, 'hello']

Filter only null/undefined:

const data = [0, 1, '', 'hello', null, false, undefined];
const clean = data.filter(item => item != null);
console.log(clean);

[0, 1, '', 'hello', false]

Step 4: Use filter with index for duplicate removal

Remove duplicates by comparing with the first occurrence:

const nums = [1, 2, 1, 3, 2, 4];
const unique = nums.filter((value, index, arr) => arr.indexOf(value) === index);
console.log(unique);

[1, 2, 3, 4]

Prevention

• Always use strict equality (===) in filter callbacks.
• Be explicit about what counts as truthy vs valid data.
• Use implicit return for simple conditions.
• Test filters with edge cases (empty array, all matching, none matching).
• Consider reduce for complex filter-and-transform logic.

Common Mistakes with filter error

1. Using return to exit a function early instead of wrapping a pure value in the monad
2. Mixing let bindings with <- bindings in do notation, producing type errors
3. Overlapping type class instances that cause GHC to reject the program with ambiguous dispatch errors

These mistakes appear frequently in real-world JS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ