Before beginning Phase 2 I would go around the school asking the students in the phases above how I should prepare for phase 2, they all replied the same, “study .map and filter”. Did I do as they suggested? NOPE. Should I have done as they suggested? YES! During Phase 1 I did use .map once in my project(with the aid of a student in the upper class) but that was it, I didn’t have a clear idea of what its functionality was, therefore I came into the second phase pretty much clueless.
I knew React was based on Javascript and that was about it. Learning React was tough… very tough. After learning vanilla Javascript for 3 weeks I was finally getting to a point where I was comfortable using it but that moment didn’t last very long, phase 2 came around and I was back to the beginning. All the syntax I learned in Phase 1 wasn’t relevant anymore and I had to start over from scratch.
So what is .map?
Here is Geekforgeeks.com’s definition of .map(),
“Map is a collection of elements where each element is stored as a Key, value pair. Map objects can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.”
.map takes the original array and returns a new array with items added to it. When mapping we need to give each element its own unique key which helps identify it. Before we get to the more complex stuff, let’s get a basic idea of what .map is.
Here is an example
//the array
const array1 = [1, 4, 9, 16]; =>
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
As we can see we have an array, passed through .map which takes the original array, multiplies it by 2 and returns a new array with a new value.
Here is another example.
Const numbers = [10, 20, 30, 40 , 50 ]
Const addTwo = numbers.map((number)=> (
number + 2 ))
What would the function return?? Take a guess.
A)12, 22, 32, 42, 52
B)8, 18, 28, 38, 48
C)20, 40, 60, 80, 100
To get the value of the variable addTwo we will have to console.log it.
console.log(addTwo)
12, 22, 32, 42, 52.
The answer was A! What exactly did the code above do? First we have an array called numbers with the values of 10, 20, 30, 40 and 50. We made a new variable called addTwo where we applied .map on the numbers variable and got a return value of 12, 22, 32, 42, 52. To put it simply, .map is a function. It takes an array, applies a function to each value in the array and returns a new value. In our case we are passing numbers as the value and telling .map the function to add 2 to each of the values.
Another way to look at it is the image below. We start off with four cups of coffee but after applying the .map function to all four of the coffee we get a latte. In this example the coffee is the array, the barista pouring in the milk acts as the .map function and latte is the result of the coffee and the barista.
If we were to turn this into code, it would be something like this.
//array
Const cafes =[coffee, coffee, coffee, coffee]
We pass the coffee(the array) to the barista(the function) who will then pour milk into each cup of coffee.
Const addMilk = cafes.map((coffee)=> ( //THIS IS NOT A VALID FUNCTION
Coffee + milk ))
The final product is a latte!
console.log(addMilk)
Latte
Another example would be decorating cupcakes. Let's say we start off with five plain cupcakes but we want them to all have chocolate icing. A simple to do list would be this-
How to “make” five iced chocolate cupcakes.
Ingredients -
Five plain cupcakes,
Chocolate icing,
Human,
Spatula
Step 1 - Get five plain cupcakes.
Step 2- The human needs to get a dollop of chocolate icing using the spatula.
Step 3- Apply the chocolate icing on the cupcakes using the spatula.
Step 4- finish!
In this example the 5 plain cupcakes represent the array. The function is the person and the chocolate icing is the expression we’re applying to each cupcake. The final result is a chocolate iced cupcake.
At first I was confused on what .map’s purpose was but after practicing and practicing I am finally comfortable using it. My definition of .map is that we use when we want to add more information to every object in an array. Instead of hard coding and manually typing a new array we can just call a function that will iterate through each value for us.
Top comments (0)