On map method in Javascript
If you want to create a new variable by making adjustments to an initial variable, you can use the map method to do so
The map method can be used in an array of just strings, or even array of objects
So this is how it works -
Let's say you have an array (of numbers) saved into a variable called "wholeNums"
const wholeNums = [1,2,3,4,5];
And you want to return each of the elements, but multiplied into 3
This is how the map method works with it -
Step 1
You create a new variable for it and call the map method to the initial variable
const newWholeNums = wholeNums.map( )
Step 2
Inside the map, you have to add a callback function. Basically, add argument that you want to run inside the map method.
So it becomes this -
const newWholeNums = wholeNums.map(function ( ) {
})
Step 3
Now, this function is supposed to have an argument to represent each of the elements in the wholeNums array
const newWholeNums = wholeNums.map(function (nums ) {
})
Step 4
This is where we add the "return" logic, whether it's multiplication, if statement, or any other command we want to run.
Let's return "multiplication of each element by 3"
const newWholeNums = wholeNums.map(function (nums ) {
return nums * 3
})
If we console.log, each element in the newWholeNums will become multiplied by 3
const newWholeNums = [3,6,9,12,15]
Now, it doesn't change the initial variable (wholeNums) because the map method is saved onto a new variable (newWholeNums)
We can also use map in an object
Let's say the object variable is
const meal = [
{Breakfast: Bread, Tea: Night},
{Breakfast: Egg, Tea: Night},
]
And we want to map and get the value of each of the objects. Let's take breakfast for instance
Same method as above
const morningMeal = meal.map(function (food ) {
return food.breakfast
})
The result will be
morningMeal = [Bread, Egg]
The "food" argument in the callback function means each of the object literals as a whole
Therefore, adding the "property" value (.breakfast), thus indicates that we want to return just the value of the key
Comments
Post a Comment