Like other programming languages, such as Python, JavaScript does not support List comprehensions. For achieving similar functionality use different array methods and functional programming approaches in JavaScript. Developers can use these techniques with different arrow and callback functions to perform transformations, filtering, and reductions on arrays in a simple and useful manner that are very similar to list comprehensions.

This blog will explain JavaScript list comprehension.

JavaScript List Comprehension

For list comprehension in JavaScript, use the following predefined JavaScript methods:

• map()
• filter()
• for-of loop

Method 1: JavaScript List Comprehension Using “map()” Method

For list comprehension in JavaScript, use the “map()” method. It creates a new array with the results of calling a specified function on every element in the original array.

Syntax

The given syntax is utilized for the map() method for the list comprehension:

array.map(callback function)

Example
First, create an array of numbers called “numArray”:

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

Call the map() method by using an arrow function where every element will multiply by itself. The resultant array will be the square of the elements of an existing array:

const listofSquareofNumbers = numArray.map(num => num * num);

Finally, print the resultant array as a list on the console:

console.log(listofSquareofNumbers);

The output indicates that the map() method performs well for list comprehension:

Method 2: JavaScript List Comprehension Using “filter()” Method

Use the “filter()” method to achieve list comprehension-like behavior in JavaScript. Like the map() method, it also creates a new array with all elements that fulfill the implemented test by the specified function.

Syntax

The given syntax is utilized for the filter() method for list comprehension in JavaScript:

array.filter(callback function)

Example
Here, in the given example, we have an array of 10 numbers:

const numArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Call the filter() method to filter out numbers whose modulus equals 0:

const listofFilteredNumbers = numArray.filter(num => num % 2 === 0);

Display the list of filtered numbers on the console using the “console.log()” method:

console.log(listofFilteredNumbers);

Output

Method 3: JavaScript List Comprehension Using “for-of” Loop

You can also use the “for-of” loop for achieving list comprehension in JavaScript. It will iterate over an array and construct a new array based on specific conditions.

Example

First, create an array of even numbers:

const numArray = [2, 4, 6, 8, 10];

Create an empty array named list:

const list = [];

Use the for-of loop to iterate the array and add 10 in every array element:

for (const num of numArray) { 
list.push(num + 10); 
}

Finally, print the resultant list on the console:

console.log(list);

Output

That’s all about JavaScript list comprehension.

Conclusion

JavaScript does not have built-in list comprehension syntax like other programming languages, such as Python. However, developers can achieve similar results in JavaScript using the “map()” method, “filter()” method, or using the “for-of” loop. This blog explained list comprehension in JavaScript.