How to do Array/List Comprehension in JavaScript with Map and Filter

In languages like Python, "list comprehensions" offer a concise, special syntax for creating a new list by transforming or filtering an existing one. While JavaScript had a proposal for a similar feature, it was ultimately withdrawn in favor of using standard, powerful array methods that are now the idiomatic way to achieve the same result.

This guide will show you how to perform the two main tasks of a list comprehension—mapping and filtering—using the standard JavaScript Array.prototype.map() and Array.prototype.filter() methods.

What is a List Comprehension? (The Python Example)

To understand what we're trying to replicate, let's look at a simple Python list comprehension. It allows you to create a new list in a single, readable line.

Task 1: Mapping (Transforming every item)

This Python code creates a new list by adding 10 to each number.

# Python list comprehension
numbers = [1, 2, 3]
new_numbers = [x + 10 for x in numbers]
# new_numbers is now [11, 12, 13]

Task 2: Filtering (Selecting a subset of items)

This Python code creates a new list containing only the positive numbers.

# Python list comprehension
numbers = [-2, -1, 0, 1, 2]
positive_numbers = [x for x in numbers if x > 0]
# positive_numbers is now [1, 2]

JavaScript achieves these goals with its standard array methods.

The JavaScript Equivalent of Mapping: Array.prototype.map()

The map() method is the direct JavaScript equivalent of a mapping list comprehension. It creates a new array by calling a function on every element of the original array and collecting the results.

For example, you want to create a new array by adding 10 to each number in an existing array.

// Problem: How to add 10 to each of these numbers?
const numbers = [1, 2, 3];

Solution:

const numbers = [1, 2, 3];

const newNumbers = numbers.map(num => {
  return num + 10;
});

// A more concise version with an implicit return:
// const newNumbers = numbers.map(num => num + 10);

console.log(newNumbers);   // Output: [11, 12, 13]
console.log(numbers);      // Output: [1, 2, 3] (The original is unchanged)

note

Just like a list comprehension, map() is an immutable operation—it does not modify the original array.

The JavaScript Equivalent of Filtering: Array.prototype.filter()

The filter() method is the JavaScript equivalent of a filtering list comprehension. It creates a new array containing only the elements that pass a test (i.e., for which the callback function returns true).

For example, you want to create a new array containing only the positive numbers from an existing array.

// Problem: How to get only the positive numbers?
const numbers = [-2, -1, 0, 1, 2];

Solution:

const numbers = [-2, -1, 0, 1, 2];

const positiveNumbers = numbers.filter(num => {
  return num > 0;
});

// A more concise version:
// const positiveNumbers = numbers.filter(num => num > 0);

console.log(positiveNumbers); // Output: [1, 2]
console.log(numbers);         // Output: [-2, -1, 0, 1, 2] (The original is unchanged)

Combining Filtering and Mapping

You can easily chain these methods together to perform more complex operations, such as filtering a list and then transforming the remaining elements.

For example, you have a list of numbers and want to create a new list containing only the doubled values of the positive numbers.

const numbers = [-2, -1, 0, 1, 2, 3];

Solution: First, filter() the array to get the positive numbers, and then chain map() to double them.

const numbers = [-2, -1, 0, 1, 2, 3];

const result = numbers
  .filter(num => num > 0)  // First, get [1, 2, 3]
  .map(num => num * 2);    // Then, double each one to get [2, 4, 6]

console.log(result);       // Output: [2, 4, 6]

note

This chaining of functional methods is a powerful and highly readable pattern in modern JavaScript.

Conclusion

While JavaScript does not have a special "array comprehension" syntax, its built-in array methods provide the same functionality in a clear and powerful way.

• To transform every element in an array (mapping), use the Array.prototype.map() method.
• To select a subset of elements from an array (filtering), use the Array.prototype.filter() method.

These functional, chainable methods are the idiomatic JavaScript approach for creating new arrays based on existing ones, and they are a cornerstone of modern, declarative programming.