Skip to content
BSWEN
Blog

JavaScript map vs filter: What's the Difference?

Cowrie
Cowrie
Dev @ Bswen

Purpose

I got confused about when to use map vs filter in JavaScript. Both methods return new arrays but serve different purposes. In this post, I’ll show the key differences and how to use each method correctly.

The Problem

When I first learned JavaScript, I struggled to understand the difference between map and filter. Both methods work on arrays and return new arrays, but they behave differently. I kept mixing them up, which led to inefficient code.

Here’s what I initially tried:

const numbers = [1, 2, 3, 4, 5];


// I thought this would filter even numbers
const wrong = numbers.map(x => x % 2 === 0 ? x : undefined);
console.log(wrong);
[undefined, 2, undefined, 4, undefined]

You can see that I got an array with undefined values - not what I wanted.

How map works

map() transforms every element in an array to a new value and returns a new array of the same length.

When I run this:

transform-example.js
const numbers = [1, 2, 3, 4, 5];


// Transform numbers to doubled values
const doubled = numbers.map(x => x * 2);
console.log(doubled);


// Transform to strings
const asStrings = numbers.map(x => x.toString());
console.log(asStrings);


// Extract names from users
const users = [
  {id: 1, name: "John", age: 25},
  {id: 2, name: "Pete", age: 30},
  {id: 3, name: "Mary", age: 28}
];


const names = users.map(user => user.name);
console.log(names);

I get this output:

[2, 4, 6, 8, 10]
['1', '2', '3', '4', '5']
["John", "Pete", "Mary"]

Notice that all arrays have the same length as the original array.

How filter works

filter() tests each element against a condition and returns only the elements that pass, potentially creating a smaller array.

When I run this:

filter-example.js
const numbers = [1, 2, 3, 4, 5];


// Filter only even numbers
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens);


// Filter users by age
const adultUsers = users.filter(user => user.age >= 18);
console.log(adultUsers.length);
console.log(users); // Original array unchanged

I get this output:

[2, 4]
3
[
  {id: 1, name: "John", age: 25},
  {id: 2, name: "Pete", age: 30},
  {id: 3, name: "Mary", age: 28}
]

You can see that filter returned only the even numbers (smaller array) and the original array remained unchanged.

Common Mistakes

I made several mistakes when learning these methods:

  1. Using map to filter
  2. Using filter to transform
  3. Not understanding that both return new arrays

Here’s the wrong approach I tried:

wrong-approach.js
// Wrong: Using map to filter
const wrong = numbers.map(x => x % 2 === 0 ? x : undefined);
console.log(wrong); // [undefined, 2, undefined, 4, undefined]

Then I tried the correct approach:

correct-approach.js
// Correct: Use filter
const correct = numbers.filter(x => x % 2 === 0);
console.log(correct); // [2, 4]

Chain both methods

The real power comes from chaining these methods together.

When I run this:

chaining-example.js
const adultUserNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name);
console.log(adultUserNames);

I get this output:

["John", "Pete", "Mary"]

But when I reverse the order:

wrong-order.js
const userNamesWithAdultCheck = users
  .map(user => ({
    name: user.name,
    isAdult: user.age >= 18
  }))
  .filter(user => user.isAdult);
console.log(userNamesWithAdultCheck);

I get this output:

[
  {name: "John", isAdult: true},
  {name: "Pete", isAdult: true},
  {name: "Mary", isAdult: true}
]

Both approaches work, but the first one is more efficient since it transforms fewer objects.

The reason

I think the key reason for the confusion is that both methods follow the same pattern:

  1. Take an array
  2. Process each element
  3. Return a new array

The difference is in the processing logic:

  • map: “Transform this element into something new”
  • filter: “Keep this element only if it matches a condition”

Another way to think about it:

  • map: Always returns one element per element (same length)
  • filter: Returns zero or one element per element (length may vary)

Summary

In this post, I explained the difference between map and filter array methods in JavaScript. The key point is that map transforms elements (always same length) while filter selects elements (length may vary). Chain them together for powerful data processing pipelines. Master these methods to write more declarative and readable array operations.

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!

Comments

Tags: