JavaScript list comprehension alternative

Learn JavaScript alternatives to perform a list comprehension

Posted on May 27, 2021


A list comprehension is a certain language construct available in some programming languages like Python that allows you to create a new list from an already existing list.

You can think of list comprehension as an elegant way to filter a list. The list itself is usually an array.

If you’re already familiar with Python, you may recognize the following Python syntax:

animals = ["cow", "bird", "fish", "horse", "tiger"]

newList = [animal for animal in animals if "i" in animal]

print(newList) # ["bird", "fish", "tiger"]

The syntax assigned to the newList variable is the list comprehension syntax of Python. It enables you to filter the animals array and add the element into the newList variable only when the element has the letter "i" inside it.

If you’re wondering if JavaScript supports a list comprehension syntax like Python, the answer is unfortunately no.

The JavaScript Committee TC39 once considered adding list comprehension to JavaScript, but it was canceled in favor of other JavaScript array methods like filter() and map().

So as an alternative to the list comprehension syntax, you can use the filter() or map() method as follows:

JavaScript list comprehension filter alternative

As an alternative list comprehension filtering ability, you can use the Array.filter() method from JavaScript.

The Array.filter() method allows you to create a new array out of an existing array by applying a certain filter to it.

Getting back to the Python example, here’s how you can create a newList out of the animals array in JavaScript:

let animals = ["cow", "bird", "fish", "horse", "tiger"];

let newList = animals.filter(function (currentElement) {
  return currentElement.includes("i");
});

console.log(newList); // ["bird", "fish", "tiger"]

As you can see, the filter() method is a good alternative to the list comprehension filter. Next, let’s see how you can iterate through a list using the map() method.

JavaScript list comprehension iterate alternative

Another use of list comprehension is to iterate through a list and do an operation to each element repeatedly.

For example, the following Python code adds the letter "i" to each element in the list:

animals = ["cow", "horse", "tiger"]

newList = [animal+"i" for animal in animals]

print(newList) # ['cowi', 'horsei', 'tigeri']

You can produce the same output as the code above by using JavaScript’s Array.map() method.

Just like Array.filter() method, the Array.map() method allows you to create a new array from an existing array.

But instead of filtering the existing array, the map() method simply iterate over the array and allows you to freely execute a piece of code inside the callback function.

The following JavaScript code produces the same output as the Python code above:

let animals = ["cow", "horse", "tiger"];

let newList = animals.map(function (currentElement) {
  return currentElement + "i";
});

console.log(newList); // ["cowi", "horsei", "tigeri"]

With that, you can iterate through any JavaScript array and execute a provided callback function, just like a Python list comprehension 😉

Related articles:

Grab the free JavaScript book today 👍

Learn the building blocks of JavaScript programming language like data types, functions, objects, arrays and classes.

Use the knowledge from the book to build a small but solid program.

Learn more