Little did you know, there is more than one way to carry out a list comprehension JavaScript. So, what are they, and how to get them done right? This instruction below will guide you from the bottom to the top. Jump right in for more information!

What Is A List Comprehension Javascript?

A list comprehension Javascript is what provides you with a more concise syntax when you wish to build a new list based on the values of an existing list. This function is vastly well-known in a variety of credible programming languages. List comprehension may be considered an exquisite approach to filter a list, typically called an array.

For instance, Python enables you to build a new list from an existing one. The following is an example of an array-based list:

Code:

birds = ["Peacock", "Falcon", "Crow", "Pigeon", "Swan"]
new_List = [bird + "x" for bird in birds]
print('The new list:',new_List)
print('The old list:',birds)

The new list: ['Peacockx', 'Falconx', 'Crowx', 'Pigeonx', 'Swanx']
The older list: ['Peacock', 'Falcon', 'Crow', 'Pigeon', 'Swan']

The list comprehension syntax of Python is the syntax that has been assigned to the new_List variable. It allows you to filter the “birds” array so that you only add elements to the new_List variable that begin with the letter “x”.

The old list is not changed because the syntax generates a new list. You only need one line of code to filter the list, so it is very elegant.

List Comprehension JavaScript Iterate Options

Method 1: Utilize Array.filter() 

To list comprehension JavaScript, you can utilize the Array.filter() method.

By using a specific filter, the Array.filter() method enables you to build a new array from an existing one. The filter is a JavaScript expression that, upon passing the test function you define in the body of function, returns an element of an array.

Returning to the Python example, following is how you can use JavaScript to make a newList out of the clothes array:

Code:

 let auto_brands = ["Tesla", "Ferrari", "Mercedes", "Audi", "Porsche"];
 let new_List2 = auto_brands.filter(function (currentElement) {
    return currentElement.includes("e");
  });

  console.log(new_List2);

Output:

['Tesla', 'Ferrari', 'Mercedes', 'Porsche']

Method 2: Utilize Array.map()

Utilizing the Array.map() function from JavaScript is another approach for getting the same result as the code above. This method shares some things in common with the Array.filter() feature. They both allow you to make a new array based on an existing one.

The difference is: Rather than filtering the existing array, the map() method merely iterates through it, supporting you to run code within the callback function freely.

Look at the following code. It appends the character “i” after each element in the list:

Code:

let fruits = ["Strawberry", "Pear", "Mango", "Durian", "Coconut"];
let new_List3 = fruits.map(function (currentElement) {
return currentElement + "i";
});

console.log(new_List3);

Output:

['Strawberryi', 'Peari', 'Mangoi', 'Duriani', 'Coconuti']

Conclusion

Above are all you should keep up on regarding how to perform list comprehension JavaScript. Now that you have had a down pat on what you need, let’s get on the road and pave your way. We wish you lots of luck then!

Read more

→ How To Create Array Of Linked Lists In Java