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

Popular posts from this blog

Passion

Notions (Wi-Fi)

Took so long