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

  • @gibblesham373
    @gibblesham3732 жыл бұрын

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

  • @taricov4662
    @taricov46624 жыл бұрын

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

  • @copypaste_pro
    @copypaste_pro5 жыл бұрын

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

  • @SakosTechSpot

    @SakosTechSpot

    4 жыл бұрын

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

  • @stpedro-ht9ng

    @stpedro-ht9ng

    2 жыл бұрын

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

  • @lilyanezlibenmeradi7291
    @lilyanezlibenmeradi72915 жыл бұрын

    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

    @pinkleprechaun52

    Жыл бұрын

    oh my god same. he is so adorable

  • @soyitiel
    @soyitiel6 жыл бұрын

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

  • @brunoribeiro1383

    @brunoribeiro1383

    5 жыл бұрын

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

  • @ravalravi882

    @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

  • @alvarezskinner
    @alvarezskinner6 жыл бұрын

    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!

  • @benjaminghys99
    @benjaminghys996 жыл бұрын

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

  • @444whoislex

    @444whoislex

    4 жыл бұрын

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

  • @diamantisufi7938

    @diamantisufi7938

    4 жыл бұрын

    LMAO YES

  • @bribes_for_nouns

    @bribes_for_nouns

    4 жыл бұрын

    rofl that's what I heard

  • @SuperYara22
    @SuperYara225 жыл бұрын

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

  • @KillersAspect
    @KillersAspect5 жыл бұрын

    I genuinely have fun watching him while learning so much!

  • @ramoswebdev4708
    @ramoswebdev47085 жыл бұрын

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

  • @aidanconnor4268

    @aidanconnor4268

    5 жыл бұрын

    thank you!

  • @zinsy23
    @zinsy234 жыл бұрын

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

  • @ucielsola
    @ucielsola3 жыл бұрын

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

  • @ga7853
    @ga78535 жыл бұрын

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

  • @anirudhbhardwaj8373
    @anirudhbhardwaj83736 жыл бұрын

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

  • @Rightlime7923

    @Rightlime7923

    6 жыл бұрын

    He is the greatest programmer in history of mankind

  • @shoebmoin10

    @shoebmoin10

    6 жыл бұрын

    Flash Drive surely the most energetic one though !!

  • @juliodearaujo690
    @juliodearaujo6904 жыл бұрын

    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!

  • @rajaaekant
    @rajaaekant4 жыл бұрын

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

  • @ianchui
    @ianchui6 жыл бұрын

    nothing like coding train in the morning :^

  • @PreCodeCamp
    @PreCodeCampАй бұрын

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

  • @Cornellie
    @Cornellie3 ай бұрын

    I fucking love the energy and passion of these tutorials

  • @agata0214
    @agata02144 жыл бұрын

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

  • @tachmin4ever
    @tachmin4ever3 жыл бұрын

    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

  • @MrWrklez
    @MrWrklez3 жыл бұрын

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

  • @crazyratlady9355
    @crazyratlady93553 жыл бұрын

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

  • @jl-dq5ch
    @jl-dq5ch5 жыл бұрын

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

  • @frankie_goestohollywood
    @frankie_goestohollywood4 жыл бұрын

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

  • @IRgEEK
    @IRgEEK4 жыл бұрын

    Loved the presentation and the delivery! Thanks so much!

  • @kantyDarius
    @kantyDarius6 жыл бұрын

    This guy is awesome

  • @mario1ua
    @mario1ua6 жыл бұрын

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

  • @mu___se.rii_chanel
    @mu___se.rii_chanel5 жыл бұрын

    really helpful, love for the excitement 😁

  • @jeremyrubio1531
    @jeremyrubio15312 жыл бұрын

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

  • @somtovitus
    @somtovitus3 жыл бұрын

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

  • @dataacademy5870
    @dataacademy58703 жыл бұрын

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

  • @binodkhatri7738
    @binodkhatri77382 жыл бұрын

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

  • @hcgreier6037
    @hcgreier6037 Жыл бұрын

    Best JS guy on YT! Thanks! 👍

  • @amarmohammed5644
    @amarmohammed56443 жыл бұрын

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

  • @Fiona1Chan
    @Fiona1Chan5 жыл бұрын

    watching his video is much more better than reading my textbook

  • @pmwut5
    @pmwut5 Жыл бұрын

    Enjoyed watching your video, great passion for explaining concepts clearly

  • @erving_lanc324
    @erving_lanc3244 жыл бұрын

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

  • @charlesbaldo
    @charlesbaldo4 жыл бұрын

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

  • @matthiasgohla7886
    @matthiasgohla78866 жыл бұрын

    Best channel besides fun fun function

  • @mario1ua

    @mario1ua

    6 жыл бұрын

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

  • @khoanguyen3044
    @khoanguyen30445 жыл бұрын

    love your energy

  • @farazqureshi3275
    @farazqureshi32753 жыл бұрын

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

  • @jenifer_jenno
    @jenifer_jenno Жыл бұрын

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

  • @alanbm94
    @alanbm945 жыл бұрын

    You are such a great teacher 😁👌

  • @TheRegalboss
    @TheRegalboss6 жыл бұрын

    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

  • @SATPlay4Fun
    @SATPlay4Fun6 жыл бұрын

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

  • @wildpasco
    @wildpasco5 жыл бұрын

    Saturday morning training for me :)

  • @praff5308
    @praff53083 жыл бұрын

    Love the energy, sir.

  • @yousufkhalid8844
    @yousufkhalid88445 жыл бұрын

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

  • @PraiseTheLord95
    @PraiseTheLord954 жыл бұрын

    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

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

  • @mustafawael8617
    @mustafawael86175 жыл бұрын

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

  • @dailylearning8386
    @dailylearning83862 жыл бұрын

    you are a legend, man

  • @paxle
    @paxle4 жыл бұрын

    Very clearly, thank you so much

  • @hilkokriel5659
    @hilkokriel56595 жыл бұрын

    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

    @dansxmods

    4 жыл бұрын

    x = 42;

  • @haylamditmemay

    @haylamditmemay

    5 ай бұрын

    @@dansxmodsdditj me may

  • @rahulmathew8713
    @rahulmathew87133 жыл бұрын

    Simple and to the point

  • @HeyDan1983
    @HeyDan19834 жыл бұрын

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

  • @catination2426
    @catination24262 жыл бұрын

    love the way you teach♥

  • @adigunolamide3230
    @adigunolamide32304 жыл бұрын

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

  • @florentinflo1727
    @florentinflo17274 жыл бұрын

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

  • @olivaironkar
    @olivaironkar6 жыл бұрын

    You are a genius!!!!

  • @ninjarogue
    @ninjarogue3 жыл бұрын

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

  • @priyanshusaini8251
    @priyanshusaini82513 жыл бұрын

    Love From India ❤️

  • @gulonamikaze3137
    @gulonamikaze31373 жыл бұрын

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

  • @BrettCooper4702
    @BrettCooper47025 жыл бұрын

    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

    @danielberinger5770

    5 жыл бұрын

    good tip

  • @dansxmods

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

  • @Mercio2
    @Mercio26 жыл бұрын

    Thank you!

  • @avi12
    @avi126 жыл бұрын

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

  • @olatrials

    @olatrials

    6 жыл бұрын

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

  • @He4vyD

    @He4vyD

    6 жыл бұрын

    What about vals.fill(Math.random) ?

  • @olatrials

    @olatrials

    6 жыл бұрын

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

  • @kecajable
    @kecajable6 жыл бұрын

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

  • @pratikbankar4757
    @pratikbankar47573 жыл бұрын

    You are Awesome. Thank You.

  • @knightfallgame
    @knightfallgame3 жыл бұрын

    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

  • @TheAwesomeTati
    @TheAwesomeTati3 жыл бұрын

    I LOVE THE POWER *_* thaaaanks!

  • @mtnman-cb5rw
    @mtnman-cb5rw2 жыл бұрын

    Dude you are my hero

  • @armandopenaleonett1258
    @armandopenaleonett12582 жыл бұрын

    You are the best thank you !

  • @grahamvp
    @grahamvp Жыл бұрын

    Just fabulous

  • @igorcweb
    @igorcweb5 жыл бұрын

    Good video!

  • @lyawileh.a8741
    @lyawileh.a87413 жыл бұрын

    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.

  • @wiksta4316
    @wiksta43163 жыл бұрын

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

  • @chrisryan2765
    @chrisryan27652 жыл бұрын

    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

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

  • @Burbon211
    @Burbon2114 жыл бұрын

    Such a nice person :)

  • @MrMaxtermax
    @MrMaxtermax6 жыл бұрын

    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

    @TheCodingTrain

    6 жыл бұрын

    Thanks for this tip!

  • @sabuein
    @sabuein Жыл бұрын

    Thank you.

  • @BaronVonTacocat
    @BaronVonTacocat6 жыл бұрын

    Sweet!

  • @bohdanbaranov9730
    @bohdanbaranov97306 жыл бұрын

    is there any playlist with all your js lessons?

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

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

  • @jeffmoppi
    @jeffmoppi Жыл бұрын

    Instant sub.

  • @francescoscollo2275
    @francescoscollo22754 жыл бұрын

    What's the difference between array.map and array.filter? Thanks. Your videos are very helpful.

  • @zero11010

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

  • @okoiful
    @okoiful6 жыл бұрын

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

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    I can try!

  • @chunckyfreshnut
    @chunckyfreshnut2 жыл бұрын

    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

  • @marinalucas5288
    @marinalucas52882 жыл бұрын

    Awesome :D

  • @SumitSingh-rw2vl
    @SumitSingh-rw2vl Жыл бұрын

    sir what's difference between map and filter method

  • @fluffybunny510
    @fluffybunny5102 жыл бұрын

    Map creates new glasses

  • @bittubhardwaj685
    @bittubhardwaj6856 жыл бұрын

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

  • @TheCodingTrain

    @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

  • @PreetiGupta-jj6qg
    @PreetiGupta-jj6qg4 жыл бұрын

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

  • @aresxena6632
    @aresxena66325 жыл бұрын

    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.

  • @prateekbhardwaj9943
    @prateekbhardwaj99434 жыл бұрын

    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

  • @TikTokGold-HotBoyChina
    @TikTokGold-HotBoyChina2 жыл бұрын

    omg. so easy @@ thank you so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  • @rdbstrd1216
    @rdbstrd12163 жыл бұрын

    thanks!)

  • @turkenits
    @turkenits6 жыл бұрын

    I have a quastion: how do you fill an arrey with the numbers 0 to 100?

  • @rokzabukovec4685

    @rokzabukovec4685

    6 жыл бұрын

    עידן טורקניץ use for loop

  • @wahhajs
    @wahhajs6 жыл бұрын

    You are better than elon musk

  • @Wastefuldragon
    @Wastefuldragon4 жыл бұрын

    Why does it only choose random numbers less than 1??

  • @user-mn3iq2cs9n
    @user-mn3iq2cs9n3 жыл бұрын

    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.

  • @4rled
    @4rled4 жыл бұрын

    how is this guy so cool?