JavaScript Array Map Method Practice in 5 Minutes

so you want to get better at javascript well arrays are an essential part of javascript so in this video let's look at the array map method in about five minutes so first off if you're new to the channel welcome i do weekly videos on web development topics so if you're interested in more of that content make sure to subscribe so you can see it when it comes out all of that said let's dive into arrays all right so this is a series on javascript arrays and i've got a github repository here that inside of this github repository has a readme on what we'll work on and then a worksheet that you will check out to be able to use below so inside of that worksheet you'll have some sample star wars character data that we're going to work with and we're going to walk through in these different videos mapreduce filter sort every sum and then maybe we'll add some no pun intended extra videos to this on the end if you're interested so let's go ahead and dive in all right so we've got the array functions worksheet checked out from the repository and we've got our sample data here which is characters from star wars so this is an array of characters with the following properties name height mass eye color and gender and so we're going to have that for luke skywalker darth vader leia and anakin skywalker so we've got those characters and now we're going to work with the map function in javascript so array.map and what map will do is it will iterate through each item in the array of each one of these characters and it will allow us to transform each item in some way so the result will be another array with a transformed item from each one of the original items in the array so what if we wanted to get an array of all the names so if we just wanted an array of names for these characters well we can use array.map for just that so we can take our characters array and we can call map and we can say for each character what we're going to do is we're going to return the character dot name so what this means is the map function will take a callback function and in that callback function we've defined our parameter as character and basically in that callback function that we define we show how to transform that individual item to the new one that we want in the resulting array so let's do a console log of names let's see if this works and let's run a nodemon and then on our worksheet js file nodemon will do a live reloading server so anytime we save this file it will rerun it like so so you see this is printing out the names just like we want now i want to show you uh the real beauty of this is combining these arrow functions with implicit return so if we're returning something in one line we can actually get rid of the brackets as well as the return in the semicolon and do this so now we can basically just have a one-liner to say hey we're going to map over each character and convert it to just the name so each each full object now is just going to become a name and you can see that in the resulting array down there so what if we wanted to do the same thing for heights we could take our characters dot map we can type in a character and then from our character we want to return character dot height so then we'll log out heights as well and we should see we have those down here so that works well and then we'll move down to step three and in this case we want to get an array of objects with just the name and height property so basically what we're doing is stripping out some of these properties actually the last three properties so we only want the name and height so we can do i always call this like a minified records type thing and we can take our characters.map so for each character what do we want to return well we want to return an object so in this object we want to have a name property which is set to character.name and then we'll have a height property which is set to character dot height but we'll have a little bit of an issue here where the syntax here is a little bit off so actually what we need to do is wrap this return value since that's an object we need to wrap it in parentheses to show that this is not this is an implicit return we just happen to be returning an object so then let's log out the minified records and just make sure those look good there we go so we have each object has two properties the name and the height and then last on here is to get an array of all of the first names so if you look at the names these are first names separated by a space so let's do a first names and we'll say characters and we'll map over each character and then we're not going to do any extra checking in here we're just going to kind of assume that these all match the same format so what we're going to do is we're going to say character dot name dot split so we're gonna split it based on that space and then we're gonna get the uh zeroth index inside of the resulting array so split will give you an array of things that are separated by spaces then we'll get the first one which should be the first name and let's log out the first names as well so now we should see luke darth leia and anakin alright i hope you enjoyed that video and you feel like you're getting better at javascript arrays if you're interested in learning more about arrays make sure to check out one of the other videos in the playlist and if you have any additional questions or topics in javascript you'd like to see covered feel free to leave a comment below or check out the link to join the learn build teach discord server and you can ask and share there as well thanks again for watching the video and i'll catch you in the next one

Channel: James Q Quick

Views: 12,800

Rating: 4.994832 out of 5

Keywords: javascript array map, array map, javascript map function, javascript arrays, javascript array functions, javascript array methods, web development, vanilla js, js, learn javascript, learn javascript arrays, become a web developer, js arrays in 5 minutes, arrays explained, javascript tutorial for beginners, web development tutorial for beginners, javascript tutorial, web development 2021, array map explained, javascript array practice, web developer, javascript programming

Id: G6J2kl1aVao

Length: 5min 29sec (329 seconds)

Published: Tue Jan 05 2021