20 JavaScript tools to blow your mind
JavaScript has grown way beyond the browser. Discover the new features, tools and libraries transforming the way we use it.
05. Replace 'for' loops with 'map' to keep things simple
Let’s pretend we have an array of numbers and we’d like to produce another array by doubling all of the numbers from the first array. One way to do this is to declare an empty array, write a for loop, and set a number in the second array by looking up the index on the first array and doubling it.
Or we could use a more concise solution by mapping an array to another array:
[1, 2, 3].map((num) => num * 2); // [2, 4, 6]
06. Replace 'for' loops with 'filter'
This time, let’s pretend we have an array of numbers and we’d like to produce another array containing only the even numbers from the first array. Again, one way of doing this would be to declare an empty array, write a for loop, and write an if statement to check if the number at the index is even (for example).
Or, we could use the filter method available for arrays:
[4, 7, 2, 3].filter((num) => num % 2 === 0); // [4, 2]
07. Use 'reduce' instead of 'for' loops
For this exercise, let’s calculate the sum of all of the numbers in an array. One way to do this would be to declare a variable that has zero as its initial value. Then, we would write a for loop and traverse our array, taking each number and adding it to our newly created variable.
Or we could use the reduce method:
[7, 2, 4].reduce((a, b) => a + b); // 13
Of course, we could combine all three concepts by multiplying all the numbers by 7 and adding all the numbers that are smaller than 20:
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
[3, 2, 1, 6]
.map(num => num * 7)
.filter(num => num < 20)
.reduce((a, b) => a + b); // 21
08. Take advantage of immutability
Data immutability is a common concept in functional languages. Immutable data allows programs to detect changes early on by comparing object references, instead of having to continually check and iterate through objects to see if we need to refresh the data on the screen.
Since, by default, objects and arrays are not immutable in JavaScript, there is a library to help accomplish this. It’s called Immutable.js and it was developed and open-sourced by an engineering team at Facebook.
Next page: Server-side JavaScript with Node.js
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Current page: Functional programming
Prev Page The latest features Next Page Server-side JavaScript with Node.js