16.6: Array Functions: map() and fill() – Topics of JavaScript/ES6
- January 10, 2024
- Posted by: MainInstructor
- Category: BASIC Go JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704926381_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: 16.6: Array Functions: map() and fill() – Topics of JavaScript/ES6
Welcome back baby or welcome for the first time who knows this video now I am going to talk about these higher-order functions it’s really just kind of me like trying to sound smart make it son fancy these are just functions that it can call on arrays in JavaScript so you
Might really think of an array as like oh alright it’s a list of stuff it’s an ordered list of things like it might be an ordered list of numbers like this and I can iterate with a for loop I can you know use I could that kind of thing I
Could iterate with for loop like how would I calculate the sum of everything in this array I would have a for loop and I’d start with the svet variable sum equals 0 and then I’d add the first element in the second element the third limb so what I’m saying is that these
Higher-order functions these array functions allow you to manipulate the array as a whole all in one fell swoop and you actually have seen this before if you watched it in my videos for example push this is not a higher-order function because it doesn’t receive a function as an argument but it does it
Does manipulate the array so if I say push and I pass in 7 then it will add an extra element to the end of the array now what it’s actually doing behind the scenes or all that that’s the topic of discussion for another time what I want
To look at is let’s look at these four so where do these come from and what do they do so over here this is the Mozilla Foundation web Docs there are lots of places to find resources about what the various things available in the browser and JavaScript are but this is the
JavaScript array object and so the array object this is how you might think of it usually it’s got two things like a string and you console.log the length and you get two but if i go over here to the left i’m gonna see oh look all these other functions for example and they’re
Listed here is array dot prototype push now I do have a video about what the prototype thing is luckily what I’m doing now is I’m living in this world of JavaScript es6 the version of javascript six and you don’t really have to mess with the prototype too much and that’s
The mode topic for another time but if but this is where I could find the list of the functions so if I click on push I would find like oh look this is what it does if I say animals dot push cows now I have another element in that array
Called cows a string called cow which is at the end so let’s let’s try to decide what should we do first let’s look at the map function okay so to demonstrate this I’m Jo and this is a little bit silly and I know those are you have more sophisticated workflows
Will complain but I’ve got my text editor here and the browser console up here so if I were to write something like an array I’m gonna call it let valve equal you know four eight one two nine and I were to say console.log valve hit save and go up here and hit refresh
I see it there okay so this is gonna be my workflow right now to demonstrate type some code down here refresh and see the output up here so what if what I want to do let’s see what do I want to talk about first let’s do we’re gonna do
The math function first and uh the chat reminded me that there’s also a function called fill which I could I mean there’s just so many more so you know the point of this is for me not to like teach you how every function works but to get the
Basic idea and then you can kind of learn to and go through and read the documentation to figure out what some of those other functions are but anyway back over here so what the map function does is it allows me to to pass a function that’s applied to every element
Of the array so for example if I were to write a function and call it doubler and it gets in x and i say return x times two then I should be able to say Val’s dot map doubler and then console dot log valves now I’m going to leave all this
Here so let’s look at what’s going on here I have the array I’m gonna look at it then I’m gonna define a function called doubler then I’m going to pass doubler via the map function to valves so I should see the array have eight 16
– 4 18 no it’s not going to do that that’s it because I’ve made a little mistake here but let’s take a look so now I’m gonna come up here it’s the same gonna come here hit refresh we’d say look why I got the same values both
Times how come it didn’t change well one of the things that’s important to note is that these functions they all behave differently but these functions return a new arrey so it doesn’t actually change the values in the original array it creates a new array and then puts all the double
Values in it are the new values that are applied from that function oh my god they just break my classes now you can leave it that’s good these are new too I really don’t want to break them those lenses are old but I broke my glasses so I popped the same frames
Again okay sorry there’s gonna be more ads you’re gonna see on the YouTube videos I broke my glasses after classes are expensive okay what was I talking about alright I’m gonna do array so let’s look at what am I gonna do so I could say something like let doubled equal valve a
Blur and now I could console.log look at doubled and let’s take a look at what that does Oh see now there we go I’ve got all the elements of the mouse’s in the way all the elements doubled and if I wanted to use the same variable you’ll
See this very commonly I could say Val’s equals Val’s dot map doubler so let’s look at that and now I’m gonna say console.log Val’s whoops and I got a cup here and there we go so this is now let me give myself a little bit more space here for the code
This is now every now everything I need right I have an array I have a function that does something to a number and then I can say take that function and apply it to every element of the array and give me a new array and overwrite the
Previous variable with that new array so here’s the thing this is great to learn it’s really it’s useful it allows you to write code kind of simplified but it’s simplify this really down by using the arrow function in a second but I should note that from what I understand this is
Not necessarily high performance so if you have super large arrays you can imagine like recreating a whole new array passing a function as opposed to just using a for loop using a for loop might actually run faster most of the stuff that I’m doing this doesn’t really matter you’re
Working with small arrays and software web projects you know these higher-order functions are gonna make your code nice and also here’s the thing this is one of the reasons why I’m covering this it’s like you think what were just me living my life I would just be using for loops
Never bother with any of this because that’s wrong I’m wrong I know I’m wrong but that’s some of them I’m sort of stuck in my ways but you you won’t be going to tutorials you will be going to open-source projects this is what people are doing now they’re using these
Higher-order functions and they’re using the arrow syntax so you want to get some facility with it so as you read other people’s code and you contribute to open source projects you can participate with this new stuff all right now let me do one more thing to this let’s get the
Arrow of syntax in there so first of all we know that I could improve not improve this but I could make this an anonymous function so I could put this in here so now this should be the same exact code I’m gonna refresh here still works but
Now it’s an arrow function so I don’t have to say I don’t think it’s a function I put the arrow it’s just one argument so I can get rid of that it’s just one line of code so I can get rid of that it’s just one line of code so I
Can assume the return statement and oh look at this now look at this oh so I have to admit I really do like this something lovely about it right I have my array and I said hey just double everything you know take X and arrow it
Over there two x times two so now if I save this here and hit refresh ah I made a mistake oh I have this extra this semicolon here is actually kind of unnecessary and I guess it caused a problem and there we go so look if it is
Even nicer that time I call it made it kind of blue so this is wonderful map X goes to x times two while we’re here let’s look at fill really quickly fill will take an array and fill it with values so I’m gonna comment this out what if I were to say
Val fill and zero console.log bells and let’s see let’s see what happens ooh oh that actually so interestingly this acts on the current array so the fill function does not create a new array in return but acts on the kernel right what if I were to say fill random 10 am I gonna
Fill this whoa yeah am I gonna fill this with a random values oops gotta come up here random is not defined because oh yeah I’m just to say math dot random I’m not in p5 world in this video it’ll say math dot random am I gonna get a new
Random value for every element of the array oops shoot no look at this point one four point one four I mean you’ll have to trust me point one four point one four those are all the same values because note I’m executing that random function and and picking a random number
And then filling it with that same random number but this fill is a higher order function I wasn’t actually using it as a higher-order function I was just giving it a number so I wasn’t passing in a function if I wanted to pass in a function
I don’t even I’m not I’m just gonna go straight for the arrow syntax here X and I’m gonna say math dot random times 10 and I’m gonna say math dot floor in here because I want to just see some integers right look at this ooh did I get this
Right so this is now an arrow function fill each value X by executing math dot random x 10 and then floor let’s go up here Oh what happened there okay there might have been a weird edit point there because I went off I kept going like in
This like magical thinking I was like making up features of JavaScript and I started trying to explain how this is not using fill as a higher-order function I’m just giving it a number but what if I gave it a function fill doesn’t work that way so this is where
Map does actually come in if I wanted to fill all of these with an individual random number I could do that by saying map X yes so this would give me map this function of returning a random number if I hit save here and hit refresh whoa-ohh and then of course I forgot
That I do need to return the new array and there we go now you can see they each have a different number now I should say there’s a little bit weird like if I wanted to create an array of random numbers I wouldn’t I wouldn’t like start with like a fixed array like
What if I want to have an array of a hundred numbers that are random well one thing I could do is I think I could just say new array 100 and then hit refresh here no it’s empty so this didn’t work right it’s just empty times 100 so this
Is unfortunate like even though I made a new array with a hundred spots because there’s nothing actually there I can’t start to process it this way so I actually need to use fill first so I can I can chain these so I could say let me
Fill the array with zeros and then map it now I’m gonna so this should work now and this is getting a little convoluted why do I care about doing this I don’t know you can determine you just go to the next video I’m gonna keep going with
This just for a little bit longer so now I’m hit refresh now I have an array with 100 random numbers but look at this you know it’s interesting about this I created a function and I think this also doesn’t really matter right I could just do this and it works right because I
Don’t need that I’m not basing it on X but incidentally what is this a function this is a function that returns math dot random well what is math not random it’s a function that returns a random number so I could actually do this just right math dot random right I could name
That’s a named function don’t execute it just pass it the name function so this is a way of creating an array with a hundred elements in it that are all random I think this is gonna work all right yay aha sound effect that doesn’t work right now
Okay there was a weird edit point there because the chat and live chat that’s going on while I’m recording this gave me some helpful tips here so a couple things number one is if I you know I’m kind of like the kind of person who wants to just write everything the thing
You could do in one line of code in 15 lines of code but if I wanted to keep going with this I could in fact I don’t need to have valves create a new array and then have it used here I can just put new array
Directly right here and in fact I don’t even need the new keyword I could just actually say array 100 and in fact because ultimately I’m going to fill it with random numbers this zero is totally irrelevant I could just fill it with undefined I just got to fill it with something
Map doesn’t work unless the array has filled with something even that something is undefined so this should actually work here’s an array with a hundred spots random numbers yeah okay so now what I’m going to do is I think this videos going to end I’ve talked
About fill and I’ve talked about map I think I’m going to reduce as a kind of complicated one so I’m gonna do that in the next video and I’ll start it with a I’ll reduce myself I don’t know if that’s worthwhile in the next video as
Well I think it’s sort and filter I’ll get to at some point as well look let’s look at reduce next thanks for watching You
-
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
Instant sub.
Thank you.
Enjoyed watching your video, great passion for explaining concepts clearly
Best JS guy on YT!
Thanks! 👍
Each and every corner you are explained very clearly and understandable… thank you keep doing
Just fabulous
sir what's difference between map and filter method
4:33
he must be italian
Jesus christ my brain doesn't like this. I much prefer just writing it like a normal person tbh.
love the way you teach♥
Glass are going expensive. There's gonna be more ads….5 seconds later… ad in 5,4,3,2,1.
A lot of methods in a short time! There is a method to the methods, apparently.
Dude you are my hero
Awesome 😀
You're a smart teacher ! Thanks for sharing your knowledge with us
Don't get to much excited while teaching . If u would get more excited u may break your whole setup
You are the best thank you !
Hi great video thanks for clearing up the map() method!!, just one question and forgive me if it comes across critical, it certainly isnt its just to clarify my understanding. When you compress the program down into the anonymous function within the map argument, I notice you do vals = vals.map(x => x*2); vals being the original array we are doubling. Wont this mutate the original array? sorry just going through freecodecamp which states mutating the global variables is against the concept of functional programming? im sure youre just proving a point I just wanted to check your views. thanks for the lessons though I have learnt a lot through you!!
4:55 Right after he said there are going to be more ads, I got an ad.
Map creates new glasses
stop calling me baby im starting to develop feelings for you
omg. so easy @@ thank you so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
My english words isn't full, but i understand lesson, because of teacher's emotions )))) sorry for english
if you use map on at object . It will change object, it act differently from a value. So you won't have to re assigned the value to itself
loved it ,changed the ways to learn so nice the way he makes us understand while making fun around ..