🏘 Array.map() in Javascript

Published on 2020-01-02

If you're getting started with Javascript, or haven't worked a lot with arrays in Javascript, the Array.map() might be a new concept to you. By the end of this brief article, you will (at the very least) have an understanding of what the .map() operator does and how you can use it to perform god-level ⚡️ operations in your Javascript applications.

🎲 The concept of mapping

Javascript's Array prototype provides us with a few methods one of which is the .map() method. The term .map comes from the mathematical concept of mapping in set theory. A map is a function applied to a domain of values to create a unique set of values called a range.

Fig.1 - Illustration of mapping in set theory

In the above illustration, Set A is our domain and Set B is our range. By comparing the values in both sets, we can determine that the values in our range are double value the corresponding domain entry. Therefore, Set B is produced by mapping over each of the values Set A with the function y = 2x.

You can read more about mapping here.

Array.map()

The Array.map() method creates a new array with the returned value from our mapper function for each of our array entries. This means that for each entry, the .map() method will be called once sequentially.

Now that we know what mapping is, let's see how we can use this in our apps. In Javascript, an array is simply a set of values. Similar to our concept illustration, let's use Array.map to create a new array of doubled values.

// Initial Array Aconst arrayA = [1, 2, 3]// Mapper functionfunction double(value) {  return value * 2}// Invoke .map() function with our double function// as the callback functionconst arrayB = arrayA.map(double)console.log(B)  // => [2, 4, 6]

🎉 Hooray! Now we have a new array created by mapping over our first array of values. This is a simple example of what the Array.map() function can do.

.map() callback arguments

Array.map() allows us to easily create new arrays from already existing ones. The callback passed into the .map() is invoked with three arguments: the value of the current element, the index of the element, and the Array object being traversed.

const newArray = array.map((currentValue, currentIndex, originalArray) => {  /* ... */})

Conclusion

Apart from the .map() method, Javascript's Array.prototype gives some other powerful higher order functions that we can use to manipulate and transform arrays in javascript. These include:

• Array.filter()
• Array.reduce()
• Array.flatMap()
• Array.every()
• And more

These are but a few essential array higher order functions that you will fnd useful for making your code more simpler and more maintainable.

Say Hello to me on Twitter if you have any questions. Cheers! ⚡️