16.6: Array Functions: map() and fill() - Topics of JavaScript/ES6
In this video, I discuss two array functions in JavaScript: map() and fill().
🎥 Next Video: • 16.7: Array Functions:...
🔗 MDN's Array Documentation: developer.mozilla.org/en-US/d...
🎥 Prototypes in JavaScript: • 9.19: Prototypes in Ja...
🚂 The Coding Train website: thecodingtrain.com/
💖 Support this channel on Patreon: / codingtrain
🛒 To buy Coding Train merchandise: www.designbyhumans.com/shop/c...
📚 Book recommendations: www.amazon.com/shop/thecoding...
💻 github.com/CodingTrain/Rainbo...
🎥 For an Introduction to Programming: • Start learning here!
🎥 For More Coding Challenges: • Coding Challenges
🔗 p5js.org/
🔗 processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
Пікірлер: 184
This guy is the type of guy that can make everyone in the room feel happy even if you're sad that day
I did not think for once that I could enjoy watching JS tutorials!
Most enjoyable JS tutorials ever, I don't even need coffee...
@SakosTechSpot
4 жыл бұрын
Are you saying you don't need... Java?
@stpedro-ht9ng
2 жыл бұрын
@@SakosTechSpot nah. just java.....script
Every time I watch a coding train video I'm happy. (plus, I can't help myself thinking "This guy is the cutest thing on Earth" lol).
@pinkleprechaun52
Жыл бұрын
oh my god same. he is so adorable
Dude, you get too excited, I love it!!
@brunoribeiro1383
5 жыл бұрын
He almost died at some point there, I did not know it was so dangerous to make a youtube video
@ravalravi882
3 жыл бұрын
What is The problem with that ??? I think Its relly help us to stick to the video and entertant us while learning . what You say dude
Man I wish I had a teacher like you in the past, like your teaching style, the way you make it look fun, and also have a good time and laughs watching your videos! Thanks!
did he just say "Welcome back bby" ? xD lmao
@444whoislex
4 жыл бұрын
benjamin ghys I think he said "maybe"... dunno 🤷🏼♂️
@diamantisufi7938
4 жыл бұрын
LMAO YES
@bribes_for_nouns
4 жыл бұрын
rofl that's what I heard
I really appreciate the work you put into creating these videos. You are my to go guy if when I can't understand a concept. THANK YOU!!
I genuinely have fun watching him while learning so much!
Thanks for that! Very well explained! I saw the entire video, but just for recaps: 03:17 - map() 08:32 - fill()
@aidanconnor4268
5 жыл бұрын
thank you!
Love how you get excited about stuff no one really wants to talk about just for the sake of talking about it!
I can´t believe this content is free. I would hug you very strongly and then thank you for it.
You are truly a great instructor, I love how you do things, you got me from the first video man.
You have thought me so much. Thank you! Ur my favourite youtuber.
@Rightlime7923
6 жыл бұрын
He is the greatest programmer in history of mankind
@shoebmoin10
6 жыл бұрын
Flash Drive surely the most energetic one though !!
I don't know how I came here. BUT THANKS GOD! You are amazing! Even your pronuntiaton makes easy to understand to non english speakers. Thanks a lot!
More people need to see this guy, I wish your channel grows much bigger and everyone can benefit from your teaching. Thanks a lot.
nothing like coding train in the morning :^
Love your teaching! You are so goofy and that is what makes it great!
I fucking love the energy and passion of these tutorials
The way you said thank you for watching as you walked away cracked me up for some reason haha.
Maaaaan! I found this and I loved this tutorial jajajajaja The part of the glasses you made me laugh 😂 I love your energy and the way you explain
Trying to learn about arrays and this guy has me laughing my ass off! Thanks for the great content!
OMG YOU MAKE ME EXCITED TO CODE! Thanks so much. I'm so glad I found you!
I love how weird this guy is. 10:32 i died XD Lol
Love your videos...especially when I'm feeling frustrated and need to revisit concepts...makes my learning enjoyable :-))))) thank you :-)))))))
Loved the presentation and the delivery! Thanks so much!
This guy is awesome
Some methods create new array, other change the existing array. For example sort() changes existing array. Great channel! Thanks
really helpful, love for the excitement 😁
You're a smart teacher ! Thanks for sharing your knowledge with us
i get practical learning from this guy. lovely way to learn.
You are Awesome sir Its an honor to be your student. It was my first video lecture with you, sir.
loved it ,changed the ways to learn so nice the way he makes us understand while making fun around ..
Best JS guy on YT! Thanks! 👍
Normally don't like your style as you are a little to energetic but you this was perfect, thank you!
watching his video is much more better than reading my textbook
Enjoyed watching your video, great passion for explaining concepts clearly
Would you say arrowhead functions are only particularly used for anonymous or call back functions rather than regular long functions with lots of syntax?
Thank you, i am trying to get to expertise level ES6. Informative and entertaining
Best channel besides fun fun function
@mario1ua
6 жыл бұрын
There's third one for me, that's learncode.academy
love your energy
I m literally laughing during watching this video awesome Tutorial!!!!
Each and every corner you are explained very clearly and understandable... thank you keep doing
You are such a great teacher 😁👌
I really love the way you explain things these things. I understand it so much better now! You are a great teacher! And you are funny! :D I laughed so hard when you hit your glasses to the floor. :D I hope they are okey though. :) Keep this great tutorials coming! / Best regards from a Swedish JS noob :P
To create an array with 100 random elements you can also do : Array.from({length: 100}, () => Math.random());
Saturday morning training for me :)
Love the energy, sir.
Hahahahha You are a great instructor finally clear my concept about map ... XD
I really appreciate taking the time to explain these complicated ES6 Functions. I have one question ... How would I modify the fill syntax to produce an integer vs these tiny numbers that was the result in the video.? I tried using math.floor and * 10 but was unable to get the syntax to work. Appreciate all that you do!!!
@zero11010
Жыл бұрын
Can’t imagine you still need an answer to this. I can’t begin to understand your question. Modify fill syntax … fill isn’t a higher order function. It takes a value (a function can be run to get that value, as with his Math.random() example). You want to produce an integer not a tiny number. Do you just want to round the number? You can do that similar to what he was doing. It will still all be the same one number. You would have to use map or forEach or some other method that is a higher order function to iterate over your array and apply a function to each element. This is basically what he was trying to say at 10:50 but he wasn’t very clear. Look at the docs. The fill method wants a value. You can use additional arguments. But, it wants a static value. Internally, it loops over the array and replaces all elements with the same value (unless you used the arguments to tell fill at which index to start or end your fill as per the docs ie - I have 100 elements. Fill, but start at index 20 and stop at index 35).
Wow, You are awesome teacher 😍😍 keep going 🏋️
you are a legend, man
Very clearly, thank you so much
At the rate code is being shortened, by 2020 you’ll type x and your code will intuitively return the meaning of life. Btw, the map function is super handy when manipulating arrays for Google Charts.
@dansxmods
4 жыл бұрын
x = 42;
@haylamditmemay
5 ай бұрын
@@dansxmodsdditj me may
Simple and to the point
Would be great to have a coworker with your personality, thanks for the great videos!
love the way you teach♥
The Albert Einstein I never got to see I and my buddy laughed and learned same time
Thank you for your funny way of teaching, very clear explications, i wish i discover your your channel earlier.
You are a genius!!!!
lol i like how you kept going with it.. i actually do the same thing too i get caught up in these rabbit holes..
Love From India ❤️
man, u da best in explaining, thank u :dddddd
Thanks for doing these array tutorials, they really help. btw glasses being expensive, did you know, if you know your prescription you can order quality glasses from aliexpress. My latest pair cost $30us delivered, with a titanium frame and polarized lenses. So cheap that they can be more like a fashioned item than a specialty medical device.
@danielberinger5770
5 жыл бұрын
good tip
@dansxmods
4 жыл бұрын
Spending $30 on multiple pairs of glasses because they don't fit your face properly then buying different ones from aliexpress is a false economy :(
Thank you!
10:50 You could also do: vals.fill((() => Math.random())()); And I'm pretty sure it'd work the same
@olatrials
6 жыл бұрын
No, that does precisely the same as vals.fill(Math.random());
@He4vyD
6 жыл бұрын
What about vals.fill(Math.random) ?
@olatrials
6 жыл бұрын
That would set all elements to be the function Math.random, which is probably not at all what you want.
what about vals=Array.from({length:100},Math.random) :D
You are Awesome. Thank You.
hi, cant find the video but in one of your vids a made a statement about the volume of your outro... please dismiss that, i discovered it was actually an issue with my sound equalizer haha. i fixed the issue now the volumes are synced well. thank you for your help with learning more about programming with javascript, it is a huge help
I LOVE THE POWER *_* thaaaanks!
Dude you are my hero
You are the best thank you !
Just fabulous
Good video!
The man knows Javascript for sure. We really benefit from you. Do you have paid courses on Udemy? If yes, please share the link to your courses.
Some people enjoy when others fail... they could have moments of happiness watching this video ;-) Even it was success to make mistakes and find solution some people would enjoy that process as their ilussion to be generally better...
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!!
@zero11010
Жыл бұрын
Great question! Check the docs. The map method creates a new array. It does not mutate there original array. Sometimes that’s wonderful. Sometimes it’s wasteful to take the time and space to create a new array.
Such a nice person :)
Other way to mutate the items of the array is by using the "entire" argument in map: a.map((x,index, entire) => entire[index] = Math.random()); que
@TheCodingTrain
6 жыл бұрын
Thanks for this tip!
Thank you.
Sweet!
is there any playlist with all your js lessons?
@TheCodingTrain
6 жыл бұрын
Try these! kzread.infoplaylists?view=50&shelf_id=14&sort=dd
Instant sub.
What's the difference between array.map and array.filter? Thanks. Your videos are very helpful.
@zero11010
Жыл бұрын
Start with the docs. Always start there. Map is designed to return the same number of elements. Filter is designed to return fewer elements. Map loops over the array. It performs some action on the array. As with doubler in his example. Filter loops over the array. It does a Boolean check to see if something is true. If it’s true, that will go into the new array it produces and be returned. So, if you have numbers and filter for X => X % 2 === 0 then the result array would only be even numbers. If you have an array and need to modify each element. Then filter based on the new results you can chain this. myArray.map(function1).filter(function2) That will iterate over each thing, create a new array and for every element in the first array perform actions on it, then place it into the new array. THEN the new array would be filtered. It will make another new array and then iterate over each element in the array map returned and if each element in the array map returns does return true from your filter logic now filter returns that element in the new array. [2, 3.5, 5, 6.5].map(doubler).filter(isEven) Assuming you have doubler and isEven as functions this would start by making an array that doubles each original element. [4, 7, 10, 13] Then check each element with isEven and if that is true it goes into a new array then it returns the new array [4, 10] This is inefficient code. It’s brief, but it is wasteful and slow when working with large amounts of data. This is because it creates 2 new arrays in the process. At most you need one new array. It also loops over the contents twice. You only need to loop over the contents once. Front end engineers are infamous for writing code that performs badly. With a large amount of data you wouldn’t want to write this way. You would realistically want a single forEach that looked at each element once, and if it was even when doubled placed it into a new array then returned the new array. At scale this is marginally better. And at scale you need all the “better” you can find.
can u talk more about function composition and factory functions? thx!
@TheCodingTrain
6 жыл бұрын
I can try!
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
Awesome :D
sir what's difference between map and filter method
Map creates new glasses
hey shiffman which code block used for javascript plzz help i am big fan of u man....keep going man u are increadble
@TheCodingTrain
6 жыл бұрын
This workflow video might help: kzread.info/dash/bejne/eo5oppWwdLXHlcY.html Also: sublime text: kzread.info/dash/bejne/h3d83M6OmaeqYZM.html atom editor: kzread.info/dash/bejne/lmeDxaieqMifec4.html brackets: kzread.info/dash/bejne/oKGOxMqGkdG8k7w.html codepen: kzread.info/dash/bejne/Z5uat8mHoLacm7w.html
Hi . You are awesome. can u plz explain exports and module.exports difference ?
By default my localhost files open in Edge. Couldn't get the results, and began to question whether I'm reading the code in this tutorial correctly. Suddenly noticed he's using Chrome. Guess what happened? The code worked. What lesson did we learn today? Screw Edge for all its purposes.
what an energy ... good animating way of teaching... in less time teach more stuff without letting us sleep and bored..u looks more funny on 1.5X speed :p
omg. so easy @@ thank you so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
thanks!)
I have a quastion: how do you fill an arrey with the numbers 0 to 100?
@rokzabukovec4685
6 жыл бұрын
עידן טורקניץ use for loop
You are better than elon musk
Why does it only choose random numbers less than 1??
I'm replacing coffee with watching Coding Train every few hours. How are we not declaring vals at the very end? vals = Array(100)..... is it because we're creating a new array? I'm Java trained and just getting back into Javascript.
how is this guy so cool?