JavaScript Array Map

another very useful and powerful method we have in modern JavaScript is the map meta with this method we can map each item in an array to something else so falling from the example in the last lecture we have an array of positive numbers let's say you want to construct some HTML markup using the elements in this array so recall filtered that map and once again we need to pass a callback function here this function just like the function that we passed to the filter method can have three parameters value index and array so in this case again we're gonna work only with the value so we can pass a function or an error function so we get a number and then we're gonna map this to some HTML markup so we can add a string in an opening list item element then we add the number and finally the closing list item element so with this markup we can display each number using a bullet point of course we need to put these inside of a UL element and I'm gonna show you that in a second so let's see the result of the map method I'm gonna store the result in a constant called items and now let's display this on the console so you can see each number is now mapped to a string that's our list item so now we have an array of strings we can use the join method that you learn about earlier to join the elements of this array and create your string so constant H HTML we studied two items to join and then display this on the console now instead of an array we have a string note that by default comma is used as the separator we don't want to have comma in our HTML markup we just want to combine these using an empty character like this save the changes now comma is gone the only bit that is remaining is the UL element so a very simple implementation would be like this we add QL then concatenated with all these items and finally another you I'll save the changes and here's our HTML markup to display all these numbers using bullet points now later in the course I will show you a more elegant way to implement the same thing all I want you to take away from this lecture is that we can use the map method to map each element in an array into something else now in this example we are mapping these numbers to strings but you can also map them to objects let me show you another example so I'm going to delete this HTML let's expand this a little bit more so instead of mapping a number to your string let's say we want to map them to an object so here I'm gonna define an object in this object we're gonna have a value property and you want to set that to this number and finally we want to return this object let's look at the result oops I made a mistake I deleted the HTML constant and that's why we get this error HTML is not defined so let's display the items constant now here is the result of our map we mapped each number to an object with a value property okay it's very useful when building real-world applications now let me show you something tricky here there are a callback function we are declaring this constant and then returning it technically we don't need to declare this as a separate constant we can simply put the return keyword here and return this object because we're not working with that constant with an object constant okay so save the changes we still get the same result now earlier I told you that in your arrow function if you have a single line of code and you're returning a value you can exclude the return keyword as well as the curly braces so let's do that and see what happens so remove the return keyword and the curly braces then put everything on one line like this now if we save the changes we don't get the same result we get an array of three undefined elements the reason for this is that by default these curly braces in an error function represent a code block so when the JavaScript engine tries to parse this error function it thinks here we're defining a code block as opposed to an object to return so if you're returning an object you need to put that object in parentheses like this so we put this object in parentheses and with this our JavaScript engine will not look at this as a code block now save the changes now once again we get three objects and one last thing before we finish this lecture so you have noticed that both the filter and the map method return and neo array they don't modify the original array okay now these methods are chainable which means we can call them one after another in a chain so in this case this filtered constant is only used here we haven't used this anywhere else in the code so we don't have to explicitly store the result of this statement inside a separate constant we can get rid of this we call the filter method now we don't want to have a semicolon here because we are not going to terminate this statement instead we're going to immediately call the map method on the result that is returned from this statement okay so I'm gonna copy our map method here this is what we call chaining so we're calling one method that method returns some result now we're immediately calling the map method on that result now in chaining multiple methods by convention we put each method call on a separate line and this makes our code cleaner have a look so numbers that filter and then that map and so on and finally we store the result in the items that's a better and cleaner code save the changes we still get the same result right now note that here because the map method is returning a new array again we can call the filter or the map method on that array so here we can call the filter one more time we get an object and maybe we want to get objects with value greater than one see what happens now in the result we have only two objects in our array objects with value two and three and again we can call the map method and maybe map each object to a number so we read the value property and return it save the changes now we have an array of two numbers so this is the power of chaining these methods hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 183,243

Rating: 4.8463688 out of 5

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, array, map, programming with mosh, code with mosh

Id: G3BS3sh3D8Q

Length: 8min 46sec (526 seconds)

Published: Tue May 15 2018