JavaScript map() and filter() Explained for Beginners

Want to know how JavaScript map and filter work? Here is the short answer. map() builds a new array by changing every item in an old array. filter() builds a new array that keeps only the items that pass a test. Neither one changes the original array. This guide explains both from zero, with small examples you can paste into your browser and run.

You should know what an array is before you start. An array is an ordered list of values, like [1, 2, 3]. If you need a refresher, read our guide to JavaScript arrays first (link below). We will define every other new word as we go.

Why use map and filter instead of a loop?

In the past you may have used a for loop to go through an array. Loops work, but you must manage a counter and an empty result array yourself. map() and filter() do that work for you. The code is shorter and easier to read.

Both are called array methods. A method is a function that belongs to a value. You call it with a dot, like numbers.map(...). Both methods take a callback. A callback is a function that you give to another function so it can run it for you.

The starting array

We will use this array in every example:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers);

The first line creates a constant called numbers that holds five values. The second line prints the array to the console. You can open the console in your browser by pressing F12 and clicking the Console tab.

How map() works

map() visits each item, runs your callback, and puts the callback's result into a brand new array. The new array always has the same length as the old one.

const doubled = numbers.map(function (n) {
  return n * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] (unchanged)

Line 1 calls map() on numbers and stores the result in doubled. The word n is the current item; JavaScript sets it to 1, then 2, then 3, and so on. Line 2 returns n times 2. That returned value goes into the new array. The last two lines show that doubled has new values while numbers is still the same.

Arrow functions make it shorter

Most developers write callbacks as arrow functions. An arrow function is a short way to write a function using =>. The next code does exactly the same thing as the code above.

const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

Read it as: for each n, give back n * 2. When the function body is one expression, you can skip the curly braces and the return word. The result is returned automatically.

How filter() works

filter() also visits each item. Your callback must return true or false. If it returns true, the item stays. If it returns false, the item is dropped. The new array can be shorter than the old one, or even empty.

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

console.log(evens);    // [2, 4]
console.log(numbers);  // [1, 2, 3, 4, 5] (unchanged)

The % sign is the remainder operator. n % 2 gives the leftover after dividing by 2. For even numbers the leftover is 0, so n % 2 === 0 is true. Only 2 and 4 pass the test, so evens is [2, 4].

map vs filter: a quick comparison

Using map and filter with objects

Real data is usually a list of objects. An object groups related values with names, like { name: 'Pen', price: 3 }. Here is a small shop list:

const products = [
  { name: 'Pen', price: 3 },
  { name: 'Notebook', price: 8 },
  { name: 'Backpack', price: 40 },
  { name: 'Eraser', price: 1 }
];

const names = products.map(p => p.name);
console.log(names);  // ['Pen', 'Notebook', 'Backpack', 'Eraser']

The array holds four objects. In the map() call, p is one product at a time, and p.name reads its name. The result is a new array that contains only the names. This is a very common use of map(): pulling one field out of a list of objects.

const cheap = products.filter(p => p.price < 10);
console.log(cheap);
// [{name:'Pen',price:3},{name:'Notebook',price:8},{name:'Eraser',price:1}]

Here filter() keeps products whose price is less than 10. Backpack costs 40, so it is removed. The objects that stay are the same objects, not copies.

Chaining map and filter together

Both methods return an array, so you can call another method on the result. This is called chaining. Let us get the names of the cheap products in capital letters.

const result = products
  .filter(p => p.price < 10)
  .map(p => p.name.toUpperCase());

console.log(result);  // ['PEN', 'NOTEBOOK', 'ERASER']

Step one: filter() removes the expensive product and gives a shorter array. Step two: map() takes each remaining product and returns its name in uppercase using toUpperCase(). Reading top to bottom, the code tells the story in plain order.

Map and filter in React

If you learn React later, you will see map() all the time. It turns an array of data into a list of elements on the screen. Knowing map() well now will make React much easier.

Common beginner mistakes

• Forgetting to return. With curly braces you must write return. Without it, map() fills the array with undefined.
• Ignoring the result. map() and filter() do not change the original array. Save the result in a variable.
• Using map() just to loop. If you only want to do something for each item, like printing, use forEach() instead.
• Returning a non-boolean from filter(). It works, but a clear true or false test is easier to read.

Practice challenge

Try this on your own: given const ages = [12, 18, 25, 9, 40], use filter() to keep ages 18 or more, then map() to add 1 to each. The answer should be [19, 26, 41].

const result = ages.filter(a => a >= 18).map(a => a + 1);

This keeps 18, 25 and 40, then adds 1 to each. If your answer matches, you understand both methods.