ES6 Tutorial: forEach versus map

Hey so last video we did for each faces a follow and from what you can see here let me clear this for a second make it a little bigger from like so from from what you can see here this is the court this is where I left off from the last video where I showed you the difference between using a for loop and using for each to print out each elements inside this array and I told you that for each has an iterator over here we had the iterator accepts the each element of the array and does some things away so let me show you how this one don't show you the result of this actually it looks like I have more than one okay okay as you can see red blue green yellow so it prints it out and then you can see the four loop above so they both do the same thing but again the for each is easier it's cleaner and it's quicker now what I want to go to is I want to explain the difference between using a for each and a map what's the biggest difference between using for each and a map so if I get started let's you know what before just give you the definition play now let me show you what for each cannot do and what a map can do and you can eat and you by yourself will see the the main difference so let's say we have an array of numbers or one two three this number so my goal is the goal is to double is to square actually you notice the double is to double each element each element and and instead of each element in the array in the array let's go and return the array actually no let's not see you like that look just a double each element in the array okay so now my goal now is this let's let's let's start with a for each statement to do this with the for loop it's pretty simple it's probably it's it's probably not worth it it might be a little messy but let's see numbers that for each now I'm gonna call it number single pass the iterator function again my goal is to is to double each element in the array so let me think about how I want to do this how do I wanna do it well I can say this you know what let's say I can say Const let's call this double let's see return return number two let's see this now let's see what's gonna happen here I'm sure this is not going to work but let's see why that's to go let's play this note map nothing obviously nothing cuz I haven't I I did not call it let's see console.log doubled let's see undefined I got undefined okay so that's interesting obviously I'm doing something to each element the iterator is multiplying each number right soup but it's being undefined why is that let's think whatever a little bit you know what what about if let's change things around a little bit what about if we just did what about if we did we take this let's try something you know unique we take this the fine edge here let's use and let's use let because we end up changing our goal is to change the value of numbers so it's not constants and I'm gonna erase this it looks a little messy in my apologies for that and now let's say double equals that now what do you think things that happen here let's think about it we're taking each element we're multiplying it by two so double is gonna equal one first then it's gonna equal one times two is gonna be to do something for me so it's actually gonna return six just six that's not what I want what I want is this if you can choose a system I go this is my goal I want to see something like this one for one oh I'm sorry so I say double for six that's what I want to see and I don't think this right here is gonna give it to us let's see no safety Allah gives this is the last element so obviously this is wrong so I mean one way to actually do this this is not I mean you can you know let's try something else let's try this now I know I'm intentionally going this route by the way so just to prove a point so let's see let's see what happens this is this is nice thing this is no I got two four six but that's not really what I want yes I get the element individually but I want it in an array I want to just like this I want it with the brackets that are left the brackets at the right so obviously that's you know that's in the the the values are correct but this the format is wrong so now the reason why I keep saying that is that for for each does is this you can I mean it's pretty obvious now that for each takes each element one by one and it does something to it so it takes that one and multiplies it by two and prints it out right away it takes the two multiplies it by two and then prints it out right away it takes two three and one supplies about two and then it prints it out right away so that's exactly what is happening it doesn't store it anywhere now let's use something else that's his map and let's duel you know let's let's do return number times two and then let's let's save it on to actually see I'm not changing this this is actually staying constants I'm sorry I thought I was gonna change it so that's cons constant means you don't you do not change it all right so let's see let's see the difference okay nothing that's because I have not caught it silly bingo beautiful you know even let's say we don't want all that fancy writing let's just pick the word I just do that beautiful you see that brackets two four six now we can see the difference in map and in for each map returns an array an array with the result inside the array whereas for each takes each element and operates on each element I hope that clarifies I have more examples of using map this is a very trivial my next examples would be a little more challenging thank you

Channel: BabAcademy

Views: 4,180

Rating: 3.7865169 out of 5

Keywords: forEach vs map, forEach, map, difference between forEach and map

Id: t3oGBOBHnrA

Length: 8min 42sec (522 seconds)

Published: Wed Jan 30 2019