Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
nice explanation
nice
As you advanced further it got more spooky
Thank you.
I don't believe how easy it is. Now I don't even know, why did I had any problems with maps.
Motashakkeram, Mosh!
Good explained
Im am not understanding what is the n part of the .map function?
Can u tell me..I have an array.with repeated numbers..so I want those repeated numbers has to display..like (1,2,5,3,7,3,4,3,2,3)..here have to display the 3..how to solve it..
Thank you. I have been wracking my brain over all of javascript's goofiness while trying to learn React Native. This helped
هی سلام باورم نمیشد که اهل ایران باشید همدانی عزیز ممنون شما من اهل افغانستان هستم
You're amazing! Thank you!
oh god i will be homeless and die alone. plz help me jesus i need ur strength. life is too hard for me
2chains
Somehow this feels like an anti-pattern.
Thank you Mosh. You're simply the best. What a teacher! Can you use these JS methods during interview questions or is it not allowed? Also, where can I find a full list of all the JS methods out there?
Savage Video! That earned a like and subscribe!
i tried watching a video of todo list using react, i got so lost because of these two methods !!! thanks a lot
And now I know why I keep getting undefined😵💫
Title is Array Map, content itself is method chaining)
Excellent Tutorial on the map method of an array. Thanks, Mosh
{2021-08-14}
thank you mosh