JavaScript Map() - Explained!

Hey guys, what's up everyone? Welcome to a new video. In today's video I'm going to tell you more about the JavaScript map function

As you guys know, we always provide a written tutorial that goes along with our videos

I will leave the link to that written tutorial in the video description below. Alternatively, you can just go to seosec.com, click on learn and then on JavaScript tutorials

And in there you will find all of our JavaScript tutorials. And the one we are going to look at today is

JavaScript map and if you open up that article which we highly recommend

because that makes it much easier for you to follow along then you can see

that there is a replit repository attached to this article that you can

open by clicking on fork repl and this opens up the code that we are going to

write during this video which makes it very easy for you guys to follow along

and play around with so we highly recommend you guys pulling up that article while we are going through the video also guys if you haven't subscribed yet to this channel

please do so this is a brand new channel we created this channel to make learning more interactive for

you so that we can link together all of the videos that we provide to our blog articles which

hopefully results in a better learning experience for you guys let us know what you think about this

approach in the comments of this video below with that being said guys let's jump right into

JavaScript map now the JavaScript map function in JavaScript is a method that

allows you to transform every element in an array into a new element based on a

provided function this is a useful tool for creating a new array from an existing

one and can be used to perform a variety of operations on the data contained

within an array now let's look at some examples to demonstrate you how the

the JavaScript map function works let's look at a simple example here in this

example this map function is used to square each element in an array so let's

say we have an array with const numbers and we have to make the screen a lot

bigger for you guys to see that properly and again this is replit if you want to

check that out you can click on the link and we always like to keep our exercises

interactive and this allows you to code along right with us without setting up

any development environment or such. Okay, so this numbers array, we just say it's a couple of numbers in there one two three

four five and Then when we go ahead and create the map function the default or the syntax for this map function is const

Then you do a function name So let's say squared numbers or this actually the variable where we are going to store the output of our map function in

So we say const squared numbers equals numbers and now we call the map function which is numbers

So you call the map function on the numbers array? So it's numbers dot map then you open up some parentheses and inside of that

We just say n for the number that it's looping over so this n represents each element of this array

We can also call this item or whatever we want. It doesn't matter. It's just a placeholder name and

and then we do a arrow function here, and then we do n times n, so number times number

And once we have that set up, we can then go ahead and just console.log the output of this function

and we want to get the squared numbers, because that's where our numbers are stored in

Now, if we run that, that should give us the square of each element

Let's check it, if it's actually working. Might take a couple of seconds here because I'm running this first time

Okay, there we go. So we see 1 of course is still 1 and then 4 is doubled and we have the square of 3 which is 9 and 4 is 16 and 5 is 25 and so on So you can see the syntax of the map function is pretty pretty easy and this is just to show you how the syntax looks like Now in this code the map function is called on the numbers array as we seen here and

is provided with a callback function that squares each element in the array. The resulting array squared numbers contains the squared

values of each element in the numbers array just to summarize that again

Now we can also use the JavaScript map function on an array of objects

This is what a lot of you guys always ask us Can you also use that on an array of objects and the answer is yes, you can

So the map function is a powerful tool for transforming arrays and it can be used in a variety of different ways

For example, you can use it to create a new array of objects based on the elements of an existing array

Now what does that mean? Let's look at it. Let's say we have an array of objects

We say users equals to an array of objects, so we open that up and let's just say it's an ID here, ID1 and a name

Say John. Okay, so we have an array of objects. Now we have just one object

Let's make it a bunch more so I'm gonna just copy and paste that copy

Next one say we make Four of them, so we're gonna change the IDs respectively three four and we also change the names up a bit

John Jane Bob Sally Or Sully however where you're located that might your mileage may vary. Okay

So now we have an array of objects here And if we now go ahead and again do create a variable let's say names and equal that to

Now users dot map again We call the map function on the users array of objects this time and we say you for user arrow function user dot name

Now what we are going to do here. Let's see. Let's just console dot lock that

Let's console unlock the names The names variable and see what it says what do you expect it will say

So as you can see it basically pulls out all of the names that are present in the users

Array of objects and it puts it in a completely new array called names

So you might now get an idea of why this is useful when you are writing JavaScript code now again

Let's summarize in this code the map function is used to create a new array called names. It's this one here

Containing the name property of each object in the users array. So it's looping over the users

array of objects here and on each of those objects this is the u represents one of each of those and then we say we want

the u.name property here so we accessing this and then it's going to push it

basically into a new brand new array for us where only the names of this you

array of objects is contained in okay so this is the next thing we can look at

pretty pretty interesting you can use that for many many different use cases

Now can you map an object in a JavaScript is another question we get a lot

The answer to that is yes You can map an object in JavaScript by using the object dot entries method to convert the object into an array of key value pairs first

And then using the map function to transform the array There is no built map function to use with JavaScript object So this is kind of a workaround now Let demonstrate What I mean by that Let create an object We call it const user obj just like this user object short for or object short for object

Then we do ID one Let's give it a name say Jane. Okay

Just to represent the object here and let's say age 30 So we have two numbers here in one string

now we are going to apply some logic to this that you can actually see that we

can do something with the result of that so I'm going to just write a function

that basically doubles the the numbers in this object so we say we double this

number and we double this number of course we cannot double the name it's just a mere demonstration of how this function works now let's write our

function let's say const update user in case we want to modify the data right so

So we do object entries and then we open that up and then we do pass in the user object

that we have up there and then we do dot map and now it gets a little bit dicey here

If you are new to all of this or if you're new to programming, this can look quite a bit confusing

So we pass in some logic here and that is, we need to first create a key value pair

I'm going to go in detail over this function what it does after we wrote it out

So we enter a key and a value then we do an arrow function and then we say

Let's do something with that. So we say key and value times two and

Then we need to chain the reduce function on it and again

I explained to you what that does in a second and we say the object and and the

key and value Another arrow function here and then we say Dot dot dot. It's the three dots method. Now. Don't worry about this is just to put again together this object and we do object

comma and then the pass in the key and Then a colon and then value

We have to close that off and then we need to add a comma on the right spot and pass in an empty

object again very Not easy to understand. I get it but I just want you guys to know that it's possible to actually

kind of use the map function on an object and Let's just console.log the resultant. It's already written here because I just tried it out

So we do console.log and we do update user So let's run this and you already were able to see the output anyway

Nevertheless, let's run it. So as you can see it actually doubled the user ID

It couldn't double the name because it's a string and not a number and it's at the age also to double value

Which is 60 in this case now how all of that actually works

So in this code the object entries method, which is this one

Is used to convert the user object, which is this one into an array of key value pairs, which is this key and value

Now, this array is then passed to the map function, that's what we do here

which doubles each value in the array, which we do here. And then finally, the reduce method is used to convert the resulting array back into an object

So with this reduce function we convert the result back into an object which is represented here So we basically did a two conversion first we put the object into a iterable array and then we put this array back into a object now keep in

mind that this approach will only work for objects that have simple data types like numbers and strings as values if the object contains nested object the

objects or arrays you will need to use a more complex approach to the map to map

the object now there is also a little bit of an easier way to write this in a

one-liner so we can do the same thing let's say let's leave that at user

object and remove this logic here and then you can just do let new object

equals object dot from entry so we use the from entries method here we say

object dot entries then we pass in the user object and then we do a map

Now this gets even this is probably more hard to understand than the previous one the previous one is the broken down function

This is the one-liner that we can use to do the same thing

So we do map and then we shorten things a little bit

So instead of key and value we just do K and V for key and value and we basically do the same thing

We do an error function and then we say K comma V key and value times V and

And then we close that off. I think That should do We are missing something somewhere as always

Let's see this looks pretty good. Okay, this should work and Let's see console lock new object

New object, let's see if it actually works. I think I missed something somewhere

So as if you write too many parentheses parentheses, yep type error there we go

I knew it so I'm gonna just copy and paste that from the article. There we go. Yeah, I missed one

One parentheses now. Let's run it. Oh We have the wrong object in here probably I call it different in the article. Yep, there is user object

Sorry for that now if we run it, it should work There we go. Now it returns again the ID and the age is times 900 because now we are multiplying

it by the value itself and not just times 2. I think before we did times 2. Let's see if we

change that to times 2 and there we go. We have ID 2 and age 60. So this is basically the same

thing just in a one-liner and a little bit shorter. I know this is a pretty complicated

topic to wrap your head around if you're new to JavaScript but the JavaScript map function is a

and versatile tool for transforming arrays in JavaScript. It allows you to easily create new arrays based on the elements of existing arrays

and can be used to perform a wide variety of operations on array data

And, yeah, I guess practice a little bit with it. Definitely open up the Repl.it repository and play around with it yourself

You get the hang of it once you work more with arrays. You definitely need the map function all the time if you work in a programming gig

And I hope this video helps if it did guys please make sure to subscribe to the channel once again

We need to get subscribers up on this channel and also check out the blog for regular updates. Thanks for watching

I hope to see you back in the next one until then