Map()

INTRODUCTION

Have you ever eaten bean cake before (it is called akara in Nigeria)? do you know how it's prepared? let me teach you how!
you get your beans, soak it in water to remove the outer layer then take it to a grinding machine, grind it to paste and deep fry in vegetable oil. finish, food is ready!
But I do not intend to teach you how to cook, though I just did😂😂, but to draw a similarity with what map is all about. map() is an array method or function that creates a new array, it doesn't alter the original array.
Now, imagine that your beans are the original array, more like your raw material, you take it to the grinder which in this case is the map() function. for every grain of beans that passes through the grinder, it is changed to a paste form and released to you.

MAP()

The map method is an iterative method (meaning it goes through each member of an array one after the other) which creates a new array. A map function takes a call-back function which holds the instruction of what is to be done to the raw materials coming in.

Syntax

Array.map(callback function)
Array.map(callback function, Arg)

Mapping Array of Numbers

Const arr = [1, 2, 3, 4, 5]
Arr.map((x) => x + 2)

From the above code snippet, we see that the map method has a call back function which usually carries an instruction on what is to be done on each of the elements of the original array, arr to produce a modified element that makes up the new array. In this case, the map method is supposed to add 2 to each member of the original array. This modified element makes up the new member of the new array which is produced. If you look at the map method, you will see that the callback function first defined an argument, x which stands as a placeholder or represents each element of the array that is to be processed, in this case, arr array, returned the modified x with 2 added to it.

Mapping Array of Objects

We can map an array that contains several objects in it to get the individual objects and display them on the browser. For example, when handling data from a database, they usually come in the form of an array with an object of individual information in it. We can use map method to distil it and display the information. For example.

Const arr = [
              {id: 1, firstName: “Kenneth”, lastName: “Surrel”, age: 15, Nationality: “British”},
              {id: 2, firstName: “John”, lastName: “Gomez”, age: 54, Nationality: “Mexico”},
             {id: 3, firstName: “Ali”, lastName: “Mohammed”, age: 33, Nationality: “Morroco”},
             {id: 4, firstName: “Yu”, lastName: “Gong”, age: 44, Nationality: “China”} ]

This is the data we got from our database and we want to display it on the browser. We need to first map through it to grant us access to each of the objects before we can begin to work on the element of each object. This is what we will do

 Arr.map((item, index) => 
         return (  <div key=”index”>
                  <div>{item.firstName} {item.lastName}</div>
                  <div> {item.age}</div>
                 <div>{item.Nationality}</div>
         </div>))

We can see that the map method iterates through the array in order to have access to each object in the array before we can inject them into an HTML tag. For each iteration, it is expected that we put in a key using an index generated by the map method itself or we use the id of each of the objects as the value for the key. You will also notice that the map method returned an object and as such it becomes important that the returned item be wrapped in a parenthesis

Conclusion

We have been able to look at map method of an array, its behaviour, syntax, examples and most importantly the fact that a map method produces a new array which is different from the original array, that is, it does not mutate the original array.