Learn and Understand Javascript’s map function ()
Tags: Beginners Guide, JavaScript, Tutorial

Pssst! Hey, you. Yeah, you—over there. Do ya wanna understand the map function?

Well, do ya? Good. I can help.

You just need to learn the basics of it.

In this article, we’ll talk about how the map function works, the syntax and some examples to spice it up .

I am Agbejule Kehinde Favour.

And with that said, lets jump right into it!

LETS GO!

What does the map function work?

The Map function() is a higher order function.

A higher order function takes a function as argument and executes it.

The map function iterates through every item in an array and executes the task given to it.

You can say it acts like a for loop.

When using the map function, you always have to create a new variable to envelop the new array to be formed.

Its answer is given back as a new variable because you can not assign that new array to the old array variable.

The syntax

The map function primarily takes a callback (function) as an argument and other parameters which are the;

1. Current value

2 .index; index of the current element being processed in the array and

3. array.

The last 2 parameters are optional, meaning you don't have to put in values for those parameters if you don't have a need to do so.

Let me give some examples

Multiplication of the numbers in an array

const numbers = [60, 15, -17, 3, 0] const multiplied = numbers.map(function(num)){

return num*2

}

console. log(multiplied) // expected answer = [120, 30, -34, 6, 0]

The new array variable (const multiplied) takes former array , and maps through it

In the map function parenthesis, we have the callback (function) which take the current value (num).

‘num’ changes over time due to the fact that the map function iterate through the array.

Therefore, taking an item from the array, executing the function that is multiplying the item by 2 and getting a result.

This is done to the remaining items in the array

The code seems too long so I want to shorten it using the es6 syntax.

const multiplied = numbers.map(num =>num*2)

Sentence making

Below is an array of names

const Names = [Silvia, Chavez, zee, Alexis, Gerardo]

This block of code is the es6 format code for the new assigned variable

const sentence = names. map(name => name + ' is the best')



console.log(sentence)



This is the long code (normal format)

const sentence = names.map(function(name){

return name + ' is the best'

} )

The sentences made are;

// expected answer = [

Silvia is the best,

Chavez is the best,

Zee is the best,

Alexis is the best,

Gerado is the best.

]

It iterate through every name in the names variable, takes the name and shoves it into the sentence creating a new array of sentences.

Check out this article on the fill function

With that said, I hope this has been helpful to you.

SMASH that clap button if you got value from this and also to help this content spread out to more people would need this value.

Please make sure to follow me to get more of these value packed content if you want more value.

Thank you for your time!

As always I am Agbejule kehinde favour and I would see you in the next article.

You can check out more content using this

Peace y’all!