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...

[@gibblesham373]

This guy is the type of guy that can make everyone in the room feel happy even if you're sad that day

[@taricov4662]

I did not think for once that I could enjoy watching JS tutorials!

[@copypaste_pro]

Most enjoyable JS tutorials ever, I don't even need coffee...

[@SakosTechSpot]

Are you saying you don't need... Java?

[@stpedro-ht9ng]

@@SakosTechSpot nah. just java.....script

[@lilyanezlibenmeradi7291]

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

[@soyitiel]

Dude, you get too excited, I love it!!

[@brunoribeiro1383]

He almost died at some point there, I did not know it was so dangerous to make a youtube video

[@ravalravi882]

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

[@alvarezskinner]

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!

[@ucielsola]

I can´t believe this content is free. I would hug you very strongly and then thank you for it.

[@SuperYara22]

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!!

[@zinsy23]

Love how you get excited about stuff no one really wants to talk about just for the sake of talking about it!

[@KillersAspect]

I genuinely have fun watching him while learning so much!

[@benjaminghys99]

did he just say "Welcome back bby" ? xD lmao

[@444whoislex]

benjamin ghys I think he said "maybe"... dunno 🤷🏼‍♂️

[@diamantisufi7938]

LMAO YES

[@bribes_for_nouns]

rofl that's what I heard

[@ga7853]

You are truly a great instructor, I love how you do things, you got me from the first video man.

[@tachmin4ever]

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

[@ramoswebdev4708]

Thanks for that! Very well explained! I saw the entire video, but just for recaps: 03:17 - map() 08:32 - fill()

[@aidanconnor4268]

thank you!

[@crazyratlady9355]

OMG YOU MAKE ME EXCITED TO CODE! Thanks so much. I'm so glad I found you!

[@juliodearaujo690]

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!

[@ianchui]

nothing like coding train in the morning :^

[@anirudhbhardwaj8373]

You have thought me so much. Thank you! Ur my favourite youtuber.

[@Rightlime7923]

He is the greatest programmer in history of mankind

[@shoebmoin10]

Flash Drive surely the most energetic one though !!

[@PreCodeCamp]

Love your teaching! You are so goofy and that is what makes it great!

[@rajaaekant]

More people need to see this guy, I wish your channel grows much bigger and everyone can benefit from your teaching. Thanks a lot.

[@Cornellie]

I fucking love the energy and passion of these tutorials

[@IRgEEK]

Loved the presentation and the delivery! Thanks so much!

[@frankie_goestohollywood]

Love your videos...especially when I'm feeling frustrated and need to revisit concepts...makes my learning enjoyable :-))))) thank you :-)))))))

[@binodkhatri7738]

loved it ,changed the ways to learn so nice the way he makes us understand while making fun around ..

[@jeremyrubio1531]

You're a smart teacher ! Thanks for sharing your knowledge with us

[@jenifer_jenno]

Each and every corner you are explained very clearly and understandable... thank you keep doing

[@pmwut5]

Enjoyed watching your video, great passion for explaining concepts clearly

[@somtovitus]

i get practical learning from this guy. lovely way to learn.

[@mu___se.rii_chanel]

really helpful, love for the excitement 😁

[@rahulmathew8713]

Simple and to the point

[@kantyDarius]

This guy is awesome

[@agata0214]

The way you said thank you for watching as you walked away cracked me up for some reason haha.

[@hcgreier6037]

Best JS guy on YT! Thanks! 👍

[@MrWrklez]

Trying to learn about arrays and this guy has me laughing my ass off! Thanks for the great content!

[@Fiona1Chan]

watching his video is much more better than reading my textbook

[@paxle]

Very clearly, thank you so much

[@mario1ua]

Some methods create new array, other change the existing array. For example sort() changes existing array. Great channel! Thanks

[@praff5308]

Love the energy, sir.

[@charlesbaldo]

Thank you, i am trying to get to expertise level ES6. Informative and entertaining

[@catination2426]

love the way you teach♥

[@dataacademy5870]

You are Awesome sir Its an honor to be your student. It was my first video lecture with you, sir.

[@farazqureshi3275]

I m literally laughing during watching this video awesome Tutorial!!!!

[@alanbm94]

You are such a great teacher 😁👌

[@dailylearning8386]

you are a legend, man

[@TheRegalboss]

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

[@pratikbankar4757]

You are Awesome. Thank You.

[@armandopenaleonett1258]

You are the best thank you !

[@wildpasco]

Saturday morning training for me :)

[@gulonamikaze3137]

man, u da best in explaining, thank u :dddddd

[@khoanguyen3044]

love your energy

[@amarmohammed5644]

Normally don't like your style as you are a little to energetic but you this was perfect, thank you!

[@grahamvp]

Just fabulous

[@matthiasgohla7886]

Best channel besides fun fun function

[@mario1ua]

There's third one for me, that's learncode.academy

[@Mercio2]

Thank you!

[@TheAwesomeTati]

I LOVE THE POWER *_* thaaaanks!

[@mtnman-cb5rw]

Dude you are my hero

[@ninjarogue]

lol i like how you kept going with it.. i actually do the same thing too i get caught up in these rabbit holes..

[@yousufkhalid8844]

Hahahahha You are a great instructor finally clear my concept about map ... XD

[@HeyDan1983]

Would be great to have a coworker with your personality, thanks for the great videos!

[@sabuein]

Thank you.

[@igorcweb]

Good video!

[@olivaironkar]

You are a genius!!!!

[@mustafawael8617]

Wow, You are awesome teacher 😍😍 keep going 🏋️

[@florentinflo1727]

Thank you for your funny way of teaching, very clear explications, i wish i discover your your channel earlier.

[@SATPlay4Fun]

To create an array with 100 random elements you can also do : Array.from({length: 100}, () => Math.random());

[@Burbon211]

Such a nice person :)

[@erving_lanc324]

Would you say arrowhead functions are only particularly used for anonymous or call back functions rather than regular long functions with lots of syntax?

[@rdbstrd1216]

thanks!)

[@hilkokriel5659]

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]

x = 42;

[@haylamditmemay]

@@dansxmodsdditj me may

[@priyanshusaini8251]

Love From India ❤️

[@marinalucas5288]

Awesome :D

[@jeffmoppi]

Instant sub.

[@BaronVonTacocat]

Sweet!

[@user-mn3iq2cs9n]

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.

[@adigunolamide3230]

The Albert Einstein I never got to see I and my buddy laughed and learned same time

[@TikTokGold-HotBoyChina]

omg. so easy @@ thank you so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

[@knightfallgame]

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

[@PreetiGupta-jj6qg]

Hi . You are awesome. can u plz explain exports and module.exports difference ?

[@PraiseTheLord95]

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).

[@lyawileh.a8741]

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.

[@jl-dq5ch]

I love how weird this guy is. 10:32 i died XD Lol

[@wiksta4316]

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...

[@BrettCooper4702]

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]

good tip

[@dansxmods]

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 :(

[@avi12]

10:50 You could also do: vals.fill((() => Math.random())()); And I'm pretty sure it'd work the same

[@olatrials]

No, that does precisely the same as vals.fill(Math.random());

[@He4vyD]

What about vals.fill(Math.random) ?

[@olatrials]

That would set all elements to be the function Math.random, which is probably not at all what you want.

[@kecajable]

what about vals=Array.from({length:100},Math.random) :D

[@MrMaxtermax]

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]

Thanks for this tip!

[@okoiful]

can u talk more about function composition and factory functions? thx!

[@TheCodingTrain]

I can try!

[@chunckyfreshnut]

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

[@fluffybunny510]

Map creates new glasses

[@bobwilkinson8053]

To the novice Ruby developer, the “arrow function” shorthand makes a lot more sense when compared to the full syntax

[@francescoscollo2275]

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.

[@aresxena6632]

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.

[@chrisryan2765]

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.

[@bohdanbaranov9730]

is there any playlist with all your js lessons?

[@TheCodingTrain]

Try these! kzbin.infoplaylists?view=50&shelf_id=14&sort=dd

[@bittubhardwaj685]

hey shiffman which code block used for javascript plzz help i am big fan of u man....keep going man u are increadble

[@TheCodingTrain]

This workflow video might help: kzbin.info/www/bejne/fouXdWatebeUm8U Also: sublime text: kzbin.info/www/bejne/i3Srq5-Lnql3Z5I atom editor: kzbin.info/www/bejne/mmSylHmbrcpsf80 brackets: kzbin.info/www/bejne/pJ69k5uDltOJmbs codepen: kzbin.info/www/bejne/a5jJhpqEpbhpobs

[@prateekbhardwaj9943]

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

[@lorenzolopez5979]

Eres el puto amo!

[@SumitSingh-rw2vl]

sir what's difference between map and filter method

[@bulverismo]

its a genius s2

[@wahhajs]

You are better than elon musk