JavaScript Array.filter — Spot the Bug!

Why This Question Matters

We've all been there. You write a piece of code, it looks logically sound, you run it, and it returns an empty array or undefined without throwing a single error. It's the kind of bug that makes you stare at the screen for ten minutes questioning your sanity before you realize you missed one tiny keyword.

This specific challenge hits on a fundamental JavaScript concept: Arrow Function return values.

Many developers move quickly from traditional function declarations to arrow functions because they're shorter. But there's a subtle syntactic trap when you move from a "concise body" to a "block body." If you don't understand the difference, you'll end up with bugs that are surprisingly hard to spot during a quick code review.

Understanding the Code

Let's look at the snippet again:

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

At first glance, the logic is perfect. We have an array of numbers, we're using .filter(), and we're checking if the remainder of n / 2 is zero. That's the textbook way to find even numbers.

But if you run this, evens will be an empty array []. Why?

The issue is the curly braces {}. In JavaScript arrow functions, curly braces signify a block body. Once you open a block, the function no longer automatically returns the result of the expression inside it. You've explicitly told JavaScript: "I'm going to run a series of statements here."

Since there is no return keyword inside that block, the function returns undefined for every single element in the array. Because undefined is falsy, .filter() thinks every single number failed the test and tosses them all out.

Finding the Correct Answer

To fix this, you have two options.

Option A: Add the return keyword
If you want to keep the curly braces (maybe because you want to add a console.log for debugging), you must explicitly return the boolean:

const evens = nums.filter(n => {
  return n % 2 === 0;
});

Option B: Use an implicit return (The "Clean" Way)
If you remove the curly braces, you're using a concise body. In this mode, the expression is automatically returned.

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

Option B is the industry standard for simple predicates like this. It's cleaner, easier to read, and avoids the "missing return" trap entirely.

Common Mistakes Developers Make

This isn't the only place where this trips people up. You'll often see this happen when developers try to return objects from arrow functions.

Imagine you want to map an array of IDs to objects:

// ❌ This returns [undefined, undefined, undefined]
const users = ids.map(id => {
  { id: id, role: 'guest' } 
});

The engine sees the { and thinks it's the start of a function block, not an object literal. To fix this, you have to wrap the object in parentheses to tell JS, "Hey, this is an expression, not a block":

// ✅ This works
const users = ids.map(id => ({ id: id, role: 'guest' }));

Another common slip is forgetting that .filter() expects a truthy/falsy value. If you accidentally return an object or a non-empty string, it will be treated as true, and your filter won't actually filter anything.

Real-World Usage

In a production environment, you aren't usually filtering a simple list of numbers. You're filtering API responses, cleaning up null values from a database query, or toggling UI elements based on a state.

For example, when building a dashboard, you might filter a list of "active" users:

const activeUsers = users.filter(user => user.status === 'active' && !user.isBanned);

When these predicates get complex, some developers prefer the block body (with the return keyword) because it allows them to break the logic into variables for better readability:

const activeUsers = users.filter(user => {
  const isActive = user.status === 'active';
  const isNotBanned = !user.isBanned;
  return isActive && isNotBanned;
});

Both are valid, but the key is being consistent. Mixing implicit and explicit returns in the same project can lead to the exact bug we saw in the challenge.

Key Takeaways

- Curly braces = Block body. You must use the return keyword.
- No curly braces = Concise body. The result is returned implicitly.
- If your .filter() or .map() is returning undefined or an empty array unexpectedly, check your braces.
- When returning objects in a one-liner arrow function, wrap them in parentheses ({ }).
- Choose the syntax that makes the code most readable for your team, but don't forget the return statement.