...spread operator and rest operator - Beau teaches JavaScript

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 171

  • @abraaoazevedo5077
    @abraaoazevedo5077 5 лет назад +34

    "use your code for good" - loved it

  • @milleniummoses
    @milleniummoses 6 лет назад +169

    Thank you. These aren't well explained as I was going through the exercises on the website. I came here looking for better understanding.I get them now. Very useful.

    • @pra__bhu
      @pra__bhu 5 лет назад +2

      Totally agree to you man :D..
      Makes much more sense in the video

    • @SanthanamSridharan
      @SanthanamSridharan 5 лет назад

      Same!

    • @azizmejri4850
      @azizmejri4850 5 лет назад

      totally agree ! they didn'te xplain how to copy the array, they just said "const spreaded = ...arr; // will throw a syntax error" which confuse the hell out of u

    • @leeallen2521
      @leeallen2521 5 лет назад

      Yep, they said they would go through spread & rest operators in detail later (under basic JS) but they didnt. So glad Im not the only one :)

    • @kelvinmwendwa
      @kelvinmwendwa 2 года назад

      Haha. Same

  • @andreagirardi833
    @andreagirardi833 6 лет назад +79

    Thank you. The FCC exercise had poor explanation and the concept here is well expanded and is clear. Thumbs up!

    • @justaprogrammer3764
      @justaprogrammer3764 5 лет назад +2

      i find the real only curriculum is very confusing at times and speed up. This did also help me.

  • @panthonyy
    @panthonyy 2 года назад +8

    I just found the series "Beau teaches JavaScript," and boy, this is the best JavaScript tutorial series (at least about the topics covered). He is straight to the point, has a clear and clean voice that is easy to understand, and uses a good speech pace. Well, anyway, You got a new sub with notifications on ;)

  • @EminoMeneko
    @EminoMeneko 3 года назад +2

    I love this.
    Clear, not excessively long, right to the point.

  • @Makebuildmodify
    @Makebuildmodify 5 лет назад +48

    Why is this video not embedded in the ES6 "rest" and "spread" pages!!??

    • @oufcena5092
      @oufcena5092 5 лет назад +10

      Get a hint will get you here ;3

  • @sourandbitter3062
    @sourandbitter3062 6 лет назад +2

    Love your voice and your straightforward explanations Beau. Very good tutorials.

  • @richardl802
    @richardl802 4 года назад +3

    Great - thanks for your help in understanding this. Useful to see the different use cases explained together.

  • @pavXX
    @pavXX 5 лет назад +45

    Thanks for the explanation. The FCC exercise explanation sucked.

    • @Nyah420
      @Nyah420 5 лет назад +10

      Harsh but accurate.

  • @herolivesnu
    @herolivesnu 3 года назад +7

    Wow! You did a great job here in your explanations. I can't just pass without saying "God will continue to bless you with more knowledge".

  • @deepeshsingh923
    @deepeshsingh923 3 года назад +1

    Straight forward and useful explanation. Pretty helpful.

  • @amwostan6505
    @amwostan6505 2 года назад

    Thanks Beau. I was stuck on the FCC lesson about REST parameters and this really explained it well.

  • @Ninethepoet
    @Ninethepoet 3 года назад +1

    Thank you thanks you thank you. I was stuck after getting about 50% progress and I needed to redo the whole course because my fundamentals were wrong.

  • @Dandy-94
    @Dandy-94 2 года назад

    Thanks for the clear and precise explanation of the 3 dots !

  • @rnmatsuda
    @rnmatsuda 3 года назад +3

    This is extremely helpful and well explained. Thank you, Beau!

  • @SanthanamSridharan
    @SanthanamSridharan 5 лет назад +2

    Thank you! This is superb addition to the website tutorial!

  • @MatthewChenIsAwesome
    @MatthewChenIsAwesome 5 лет назад +1

    also a nice tip with spread operator: if you're using react, instead of passing props like:
    ```
    render() {
    const {key, title, summary, imageURL} = this.state;
    return (
    //some stuff
    //other stuff
    }
    ```
    you can do:
    ```
    render() {
    const {...myComponentProps} = this.state;
    return (
    //some stuff
    //other stuff
    }
    ```

    • @oufcena5092
      @oufcena5092 5 лет назад

      I still haven't finished JS yet so, maybe I'll get it later. thx tho ;3

  • @milanm9907
    @milanm9907 6 лет назад +3

    Crystal clear, thank you Beau!

  • @mohd0606
    @mohd0606 3 года назад +1

    Thanks, man a quick and concise video. Now the concept was clear. Kudos to you. :)

  • @bran8370
    @bran8370 5 лет назад +2

    Great! You explained this well and made it easy to understand. I loved all the examples--really nailed it down for me. Thanks~

  • @deaddoomed2380
    @deaddoomed2380 11 месяцев назад

    so simple, so useful and so badly explained. this video made it much more clear for me, thanks!

  • @grandpowr
    @grandpowr 7 лет назад +2

    Legit the best Javascript teaching series in youtube!

  • @d0m2288
    @d0m2288 5 лет назад +1

    Concise and informative. Much appreciated.

  • @ahmad-ali14
    @ahmad-ali14 5 лет назад +2

    this is the best explain for those methods. many thanks.

  • @vijaykumarreddyalavala3713
    @vijaykumarreddyalavala3713 5 лет назад +1

    Thank you so much for this video. Short and well explained

  • @braulioandre2918
    @braulioandre2918 4 года назад

    When passing elements of an array as arguments to a function, we can also use destructuring assignment:
    function ( [x, y, z] ). In this case when we call the function we don't need to use the spread operator...

  • @bk-entertainz7081
    @bk-entertainz7081 3 года назад

    Wow! You made this so simple. THANK YOU!!!

  • @khajahussainpathan1064
    @khajahussainpathan1064 4 года назад

    Thank you, Very good explanation. Understood clearly about Spread and rest Operator

  • @buddha0004
    @buddha0004 5 лет назад +3

    Thanks...I'm in the middle of these exercises for the FCC javascript cert now; Sometimes the directions aren't clear to me or confusing...(visual learner, I guess).

  • @phillipscards
    @phillipscards 7 лет назад +2

    Thanks for such a great explanation. Helped me make some sense of it.

  • @CameronPak
    @CameronPak 6 лет назад +10

    Now I know how to spread... Woo!

  • @devjeff3192
    @devjeff3192 4 года назад +1

    Beau is awesome teacher !!! But I couldn't find any video tutorials regarding to ES6 on freeCodeCamp ! But finally found 'em on RUclips ! :)

  • @asfandiyar5829
    @asfandiyar5829 Год назад

    Awesome! Exactly what I was looking for. Clear explanation. Thanks

  • @alexlions8633
    @alexlions8633 3 года назад

    thanks )) you are one of the best teaacher in js in the world

  • @daniamsalem
    @daniamsalem 5 лет назад

    Very simple explanation, thank you very much

  • @aceborja1656
    @aceborja1656 2 года назад

    Thank you. Very useful explanation. Great job Beau!

  • @adarshtiwari7395
    @adarshtiwari7395 3 года назад

    Concise and to the poin! Thanks a ton

  • @girlandhercomputer7204
    @girlandhercomputer7204 5 лет назад

    Thank you, your explanation is very clear and to the point!

  • @ahmed_raaphat
    @ahmed_raaphat 2 года назад

    Don't forget to subscribe and remember, USE YOUR CODE FOR GOOD!
    Thanks for the great explanation.

  • @user-cool839
    @user-cool839 3 месяца назад

    Beau, you are the best! Thank you!👍👍👍

  • @DelicatelyStunning
    @DelicatelyStunning 6 лет назад

    Thank you for this video. I spent way too long trying to decipher the documentation at MDN.

  • @rahulgupta6892
    @rahulgupta6892 5 лет назад

    Actually if we pass the extra arguments to the function it is not ignored by the function, rather it will accept those arguments as additional arguments, such function with additional arguments are known as "Varargs".

  • @kenbinta2246
    @kenbinta2246 4 года назад

    Well Explained. I did not have to watch the video twice to understand

  • @00733adnan
    @00733adnan 4 года назад

    Awesome. Simple and meaningful.

  • @kodave
    @kodave 7 лет назад +1

    Again, thanks for the succinct explanation

  • @zeroxcrusher
    @zeroxcrusher 5 лет назад

    Thanks! ES6 course is so badly made, so this helps.

  • @miaprivate9742
    @miaprivate9742 3 года назад

    It was an awesome explanation for rest of my life

  • @MrWardo2009
    @MrWardo2009 3 года назад

    Thank you for doing these videos! Really helped me !

  • @vladislavbarbarii2089
    @vladislavbarbarii2089 6 лет назад +1

    Just excellent explanation.Thank you

  • @DerekPK
    @DerekPK 4 года назад

    const sum = (x, y, z) => {
    const args = [x, y, z];
    return args.reduce((a, b) => a + b, 0);
    }

  • @atifworld
    @atifworld 2 года назад

    so easily explained, thank you

  • @lackadaisicallass9041
    @lackadaisicallass9041 7 лет назад

    Very interesting! Can't wait to use it. Thank you!

  • @yufeizhan726
    @yufeizhan726 3 года назад

    So good. Highly recommended!

  • @Zakyrie
    @Zakyrie 7 лет назад

    Really nice. I'll be using your videos as a reference point.

  • @Moorcheh
    @Moorcheh 5 лет назад

    VERY fluid explanation thanks FCC! Btw the excersizes' explanation needs a change!

  • @FilipPandrc
    @FilipPandrc 3 года назад +1

    I remember being here, watching this video, doing some exercises. But here I am again, not having a slight idea what spread and rest operators are. fml

  • @ih4722
    @ih4722 5 лет назад

    Simple yet powerful.

  • @iVuDang
    @iVuDang 4 года назад +1

    Thank you, very helpful!

  • @jt.633
    @jt.633 3 года назад

    great explanation thank you! although the last one about the rest operator is still confusing

  • @oufcena5092
    @oufcena5092 5 лет назад

    ...Spread operator allows an array to get more elements.
    arr1.concat(arr2) == [...arr1, ...arr2]; //you can add more elements unlike .concat() function
    ...Rest operator allows a function to get more arguments.
    var multiply = (multiplier, ...args) => args.map( (element) => multiplier * element );
    console.log(multiply(2, 1, 2, 3));
    () means function
    => means return
    map() method creates a new array with the results of calling a function for every array element.

  • @WeirdStuffaaaa
    @WeirdStuffaaaa 2 года назад

    I am on my 3rd year of IT degree . I got to know this today

  • @soygeekgirl
    @soygeekgirl 4 года назад +1

    Genial , super bien explicado!! ..

  • @eminm6383
    @eminm6383 4 года назад

    Great, clear explanation. Well done. 🙏 thnaks a lot

  • @Akephalos204
    @Akephalos204 2 года назад

    clear as crystal, thanks

  • @DColls2488
    @DColls2488 4 года назад

    GREAT VIDEO FOR ROOKIE CODERS 🙏

  • @santhoshnatarajan5271
    @santhoshnatarajan5271 5 лет назад

    Thank you for the clear explanation

  • @GeorgeEmad
    @GeorgeEmad 6 лет назад

    clear and simple and to the point amazing

  • @stackdevlopr
    @stackdevlopr Год назад

    explained beautifully!

  • @lalaithan
    @lalaithan 5 лет назад

    Excellent presentation.

  • @teenytinytoons
    @teenytinytoons 3 года назад

    Beau is my hero!

  • @pepsivanilla93
    @pepsivanilla93 4 года назад

    Great explanation thanks so much

  • @andrewtcoder
    @andrewtcoder 2 года назад +1

    Thank you for this video!!!

  • @JamesFrederickstech
    @JamesFrederickstech 5 лет назад

    makes a little more sense but I'm still on shaky legs here. will keep working with these operators until the lightbulb goes off.

  • @BneiAnusim
    @BneiAnusim 2 года назад

    They should add this video to FreeCodeCamp because they have watered down the explanation on "Use the Rest Parameter with Function Parameters".

  • @akagragupta9968
    @akagragupta9968 6 лет назад

    well thank you so much , I was earlier just so confused now I am clear

  • @nebojsapavlovic8031
    @nebojsapavlovic8031 2 года назад

    Thanks Beau! This I understand.

  • @laser1915
    @laser1915 5 лет назад

    spread operator also prevents state mutation

  • @XodiyevAcademy
    @XodiyevAcademy 3 года назад

    Respeact very very clear is unsdrenstand

  • @chengjinfei8139
    @chengjinfei8139 3 года назад +1

    in this section we talked about spread out arrays. here's another helpful link for spread object. ruclips.net/video/MpnzQozwLGI/видео.html

  • @MohsinKhan-wv3ep
    @MohsinKhan-wv3ep Год назад

    Best video i have ever watched ❤

  • @brootalbap
    @brootalbap 5 лет назад +4

    Man the ES6 lessons are all so awfully bad explained on fcc :( Thanks so much for the explanation that helped a bit :(

    • @whathefuckisthis
      @whathefuckisthis 4 года назад

      @@MasterofLightning totally, i thought i was going crazy. glad it's not just me

  • @eledorusso
    @eledorusso 3 года назад

    the best tutorials

  • @deathknell1970
    @deathknell1970 2 года назад

    u are a great teacher

  • @BigSmoke-r9w
    @BigSmoke-r9w 9 месяцев назад

    Thank you for this Bo

  • @diegoavendanohernandez9908
    @diegoavendanohernandez9908 Год назад

    Thank you much, super clear

  • @BlueIceAce2015
    @BlueIceAce2015 5 лет назад

    Great explanation, thanks!

  • @hyejungk.6234
    @hyejungk.6234 5 лет назад

    amazing tut! appreciate a bunch!

  • @Shmack_
    @Shmack_ 7 лет назад +1

    Great tutorial thank you!

  • @justincook8473
    @justincook8473 6 лет назад +4

    What will happen if you have nested arrays? For example, [[1,2], ["three", "four"]]

    • @oufcena5092
      @oufcena5092 5 лет назад

      //return []
      try yourself in dev tools JS console
      var multiply = (multiplier, ...args) => args.map( (element) => multiplier * element );
      console.log(multiply([[1,2], ["three", "four"]]));

  • @israeli_soldier
    @israeli_soldier 3 года назад

    Excellent video

  • @mackynyxz
    @mackynyxz 3 года назад

    Nice explanation

  • @LuisMorales-yx8di
    @LuisMorales-yx8di 4 года назад

    Thanks, really helpful

  • @BioxyTube
    @BioxyTube 5 лет назад

    good is something very subjective

  • @kevanhaggins6699
    @kevanhaggins6699 3 года назад

    beau, you're awesome.

  • @JavedBaloch786
    @JavedBaloch786 2 года назад

    To convert string to array
    let str = "Hello";
    let x = [...str];

  • @Sergeodessa
    @Sergeodessa 4 года назад

    thanks for explanation! btw, what about the rest - rest? )

  • @davidgillis950
    @davidgillis950 2 года назад

    I don't understand the statment at 5:18 where you explain how you know the difference between the spred opperator and the rest opperator. They look the same to me and seem to be used the same. Perhaps I do not undersatnd what is means to be "passed into an argument as a function." Could someone elaborate?

  • @thetravelreels1
    @thetravelreels1 5 лет назад

    Could you explain how spread operator is helpful in the second scenario. I was't expecting this half explanation. What's the use of spread operator in the second example. Why we use it then.

    • @oufcena5092
      @oufcena5092 5 лет назад

      ...Spread operator allows an array to get more elements.
      arr1.concat(arr2) == [...arr1, ...arr2]; //you can add more elements unlike .concat() function
      ...Rest operator allows a function to get more arguments.
      var multiply = (multiplier, ...args) => args.map( (element) => multiplier * element );
      console.log(multiply(2, 1, 2, 3));
      () means function
      => means return
      map() method creates a new array with the results of calling a function for every array element.

  • @sanjeevsjk
    @sanjeevsjk Год назад

    So spread operator can add as 3 individual values(from array) without iteration?

  • @stavroskefaleas6320
    @stavroskefaleas6320 2 года назад

    Omg.This is awesome!