Why JavaScript map() Returns undefined: How to Fix This Behavior

Feb 28, 2026

Purpose

This post explains why JavaScript’s map() method returns undefined values in arrays when the callback function doesn’t return anything. I’ll show you exactly what happens and how to fix this common issue.

The JavaScript map() Method

The map() method creates a new array by calling a function for every element in the original array. It collects whatever the function returns and puts it in the new array at the same position.

I expected map() to either skip elements without a return or provide a default value. But I got something different.

What happens when we don’t return anything?

I tried this code:

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => {
  if (num > 3) {
    return num * 2; // Only returns for numbers > 3
  }
  // No return statement for numbers <= 3
});
console.log(result); // What do you think this shows?

I expected this would either:

Show only the transformed values: [8, 10]
Show the original values for non-matches: [1, 2, 3, 8, 10]

But I got this output:

[undefined, undefined, undefined, 8, 10]

Undefined values appeared where I didn’t return anything.

How to solve it?

I tried adding explicit return statements:

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => {
  if (num > 3) {
    return num * 2;
  }
  return num; // Explicit return for all cases
});
console.log(result); // [1, 2, 3, 8, 10]

This worked perfectly. No undefined values.

Then I tried using null instead:

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => {
  if (num > 3) {
    return num * 2;
  }
  return null; // Explicit null instead of undefined
});
console.log(result); // [null, null, null, 8, 10]

This also works when you want to distinguish between no value and undefined.

The reason

I think the key reason for this behavior is how JavaScript functions work. Functions that don’t explicitly return a value automatically return undefined. Since map() collects whatever the callback returns, those undefined values go into the array.

This makes sense when you understand that map() isn’t filtering - it’s transforming. Every element gets a spot in the new array.

Real-world impact

I’ve seen this cause issues in production code:

undefined values break type checking
They cause errors in array methods like .map().map()
They create bugs in data processing pipelines

Alternative approach: filter first

When I only want to transform certain elements, I use filter + map:

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(num => num > 3) // First filter, then map
  .map(num => num * 2);
console.log(result); // [8, 10]

This pattern skips elements entirely instead of placing undefined values.

Summary

In this post, I showed why JavaScript map() returns undefined when callbacks don’t return values. The key point is that functions implicitly return undefined when they have no explicit return statement. You can fix this by always returning values in map callbacks or using filter before map when you want to skip elements.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!