Map function in Javascript

Hello world,

Today I want to share my knowledge about map which is a higher order function in javascript. After this blog post I will make another blog post about creating our custom map function to understand subject deeper. From now on I will call higher order function as HOC and Javascript as JS in the article. So first thing first what is HOC?. HOC is a regular function which takes or returns another function(map, filter, reduce, forEach, flatMap etc...).

Higher Order Functions are regular functions that take or return another functions

As you will see functions are first class citizens in JS. That means you can treat functions as same as numbers, strings etc... . You can assign a function to a variable, pass a function to another function, return a function from another function.

Functions are first class citizens in JS

Credit

As it's name implies that map function will map every item(with the function you provided as parameter. Remember map is HOC.) in your data source/array. It will not mutate/change your original array instead it will return brand new array with the same length. Map will provide 3 arguments to your callback function which are element, index, array. Index and array are optional that means you do not have to define parameters for them.

Enough talk(Salute to an old friend), let's see the action.

const numbers = [1,2,3,4,5];
const squares = numbers.map((number,index,array) => {
    console.log(`Number: ${number}, Index: ${index}`)
    console.log("Original Array: ",array);
    return number * number;
})
//-> output
/*
Number: 1, Index: 0
Original Array:  (5) [1, 2, 3, 4, 5]

Number: 2, Index: 1
Original Array:  (5) [1, 2, 3, 4, 5]

Number: 3, Index: 2
Original Array:  (5) [1, 2, 3, 4, 5]

Number: 4, Index: 3
Original Array:  (5) [1, 2, 3, 4, 5]

Number: 5, Index: 4
Original Array:  (5) [1, 2, 3, 4, 5]
*/

console.log(numbers); // -> [1, 2, 3, 4, 5]
console.log(squares);  // -> [1, 4, 9, 16, 25]

As you see we can access index and original array in our callback function. Map returned a brand new array and didn't mutate/change our original array.

Lets see another program and then finish our blog post.

const person1 = {
    name: "Chety",
    age: 25,
    languages: ["C#","Javascript"]
}

const person2 = {
    name: "Mirko",
    age: 1,
    languages: ["Kotlin","Julia"]
}

const person3 = {
    name: "Rodik",
    age: 9,
    languages: ["Golang","Typescript"]
}

const people = [person1,person2,person3];

We can call map function on our people array. As first option we can provide anonymous function(function that does not have a name) to map

people.map((person) => `${person.name} is ${person.age} years old and can code in ${person.languages}`);

// ->  ["Chety is 25 years old and can code in C#,Javascript", "Mirko is 1 years old and can code in Kotlin,Julia", "Rodik is 9 years old and can code in Golang,Typescript"]

But for readability purposes we can define our callback function separately and then pass as a parameter to Map function.

function personDescription1(person){
    return person.name + " is " + person.age + " years old and can code in " + person.languages;
}

function personDescription2(person){
    return `${person.name} is ${person.age} years old and can code in  ${person.languages}`;
}

function personDescription3({name,age,languages}){
    return `${name} is ${age} years old and can code in  ${languages}`;
}

const personDescriptionLatest = ({name,age,languages}) => `${name} is ${age} years old and can code in  ${languages}`;

//Below calls produce same results :)
//people.map(personDescription1);
//people.map(personDescription2);
//people.map(personDescription3);
people.map(personDescriptionLatest); 
//output: ["Chety is 25 years old and can code in  C#,Javascript", "Mirko is 1 years old and can code in  Kotlin,Julia", "Rodik is 9 years old and can code in  Golang,Typescript"]

As you see we wrote an anonymous function and 4 different callbacks that return same output with map function. In these functions we use string interpolation with ${} and object destructing via {}. I will also add blog posts about these concepts

Social Message

There is always more than one way to achieve same result in JS.

In the next blog post we will write our custom map function. Stay tuned :).

Please do not hesitate to share, comment, criticize.

Have a nice day with JS :)