JavaScript in 1 minute: Master the Higher-Order function map()
Higher-Order function is a function that takes a function as a parameter or returns a function. If you want a quick repeat of that topic, take a look at my article Higher order functions and the beauty of functional programming. In this article I talk about the map method and we will rebuild this function. That could be a question/taks in your next job interview. So do not skip this article.
What is the map method?
The map method is one of JavaScripts built-in Higher-Order-Functions. We use the map function if we want to transform an array. Transform means, that we want to do some operation with each and every value of an array and return that new value. Let’s look at an easy example:
const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];
const kvadrat = (x) => x * x;
const siffror_kvadrat = siffror.map(kvadrat);
console.log(siffror_kvadrat);
// Expected Output: (10) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]In the example above we have the array siffror. Then we have the function kvadrat, which returns the square of a given value. Last but not least we call the map function on the array siffror and pass the function kvadrat as argument to it. What happens is, that the map function goes through every value of the array siffror and passed the value of the current iteration to the function kvadrat. Then it returns the new value to siffror_kvadrat. As we can see by the output, we end up with an array that hold he square of each value of the array siffror.
So, the basic concepts is clear, isn’t it? We call the map method on an array and pass another function as argument to it and have as result a new array with the transformed values of the old original array.
It is also totally valid to write the function directly in the map function, instead of passing it.
const siffror_kvadrat = siffror.map((item) => item * item);If you work with React, you will use the map method a lot to map through data and print them.
Rebuild the map method
If we did understand what the map function does, we should be able to recreate it, shouldn’t we? Ok, let’s give it a try.
So first of all we need a function that takes an array as argument, does something with it, and returns an array again.
const arrTransform = (customArr) => {
const modifiedArr = [];
for (let i = 0; i < customArr.length; i++) {
modifiedArr.push(customArr[i] * 10);
}
return modifiedArr;
}Looks ok to me. Let’s test it with data:
const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];
const arrTransform = (customArr) => {
const modifiedArr = [];
for (let i = 0; i < customArr.length; i++) {
modifiedArr.push(customArr[i] * 10);
}
return modifiedArr;
}
const siffrorTimes10 = arrTransform(siffror);
console.log(siffrorTimes10);
// Expected Output: (10) [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]Ok. Works as expected. But we want to pass a function as argument so that the function arrTransform is able to perform different transformations with the array. Let’s make that happen.
const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];
const numTimes10 = (value) => value * 10;
const arrTransform = (customFN, customArr) => {
const modifiedArr = [];
for (let i = 0; i < customArr.length; i++) {
modifiedArr.push(customFN(customArr[i]))
}
return modifiedArr;
}
const siffrorTimes10 = arrTransform(numTimes10, siffror);
console.log(siffrorTimes10);
// Expected Output: (10) [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]Ok. We’re halfway there. It is possible now to pass different functions as argument. But how can we make it happen, that the function can be called from an array? That is were Array.Prototype comes in.
const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];
const numTimes10 = (value) => value * 10;
Array.prototype.arrTransform = function (customFN) {
const modifiedArr = [];
for (let i = 0; i < this.length; i++) {
modifiedArr.push(customFN(this[i]))
}
return modifiedArr;
};
const siffrorTimes10 = siffror.arrTransform(numTimes10);
console.log(siffrorTimes10);
// Expected Output: (10) [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]Array.Prototype makes the function available for all arrays. Since the function is now available for all arrays and can be called from them, we don’t need to pass the array. Instead we can use the this keyword to access the data of the array.
Now our map prototype should also work, if we pass another function to it. Let’s give it a try.
const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];
const convertSEKtoEUR = (value) => value * 0.88;
Array.prototype.arrTransform = function(customFN) {
const modifiedArr = [];
for (let i = 0; i < this.length; i++) {
modifiedArr.push(customFN(this[i]))
}
return modifiedArr;
};
console.log(siffror.arrTransform(convertSEKtoEUR));
// Expected Output:
// (10) [0, 0.88, 1.76, 2.64, 3.52, 4.4, 5.28, 6.16, 7.04, 7.92]How cool is that? 🤩 Now you can not only explain what the map method does. You can easily recreate it!
If you learned something from this article, leave me clap, a comment or share this article to support me. I welcome you to follow me here or on LinkedIn.
