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

The spread operator (...) spreads out the elements of an array (or iterable object). The rest operator condenses elements. The spread and rest operators are great additions to ES6!
🔗 Code: codepen.io/beaucarnes/pen/EWab...
🔗 More info: developer.mozilla.org/en-US/d...
Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Playlists⭐
▶JavaScript Basics: • JavaScript Basics Course
▶Data Structures and Algorithms: • Data Structures and Al...
▶Design Patterns: • Design Patterns - Beau...
▶ES6: • ES6 - Beau teaches Jav...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Read great tech articles at medium.freecodecamp.com

[@abraaoazevedo5077]

"use your code for good" - loved it

[@milleniummoses]

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]

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

[@SanthanamSridharan]

Same!

[@azizmejri4850]

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]

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]

Haha. Same

[@andreagirardi833]

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

[@justaprogrammer3764]

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

[@panthonyy]

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

[@Makebuildmodify]

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

[@oufcena5092]

Get a hint will get you here ;3

[@EminoMeneko]

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

[@sourandbitter3062]

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

[@pavXX]

Thanks for the explanation. The FCC exercise explanation sucked.

[@Nyah420]

Harsh but accurate.

[@richardl802]

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

[@amwostan6505]

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

[@deepeshsingh923]

Straight forward and useful explanation. Pretty helpful.

[@rnmatsuda]

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

[@SanthanamSridharan]

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

[@milanm9907]

Crystal clear, thank you Beau!

[@Amine-wp6de]

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

[@phillipscards]

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

[@bran8370]

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

[@vijaykumarreddyalavala3713]

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

[@bk-entertainz7081]

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

[@girlandhercomputer7204]

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

[@mohd0606]

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

[@lackadaisicallass9041]

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

[@d0m2288]

Concise and informative. Much appreciated.

[@ahmad-ali14]

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

[@khajahussainpathan1064]

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

[@asfandiyar5829]

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

[@aceborja1656]

Thank you. Very useful explanation. Great job Beau!

[@vladislavbarbarii2089]

Just excellent explanation.Thank you

[@Ninethepoet]

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.

[@MrWardo2009]

Thank you for doing these videos! Really helped me !

[@atifworld]

so easily explained, thank you

[@DelicatelyStunning]

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

[@daniamsalem]

Very simple explanation, thank you very much

[@Zakyrie]

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

[@deaddoomed2380]

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

[@adarshtiwari7395]

Concise and to the poin! Thanks a ton

[@GeorgeEmad]

clear and simple and to the point amazing

[@santhoshnatarajan5271]

Thank you for the clear explanation

[@herolivesnu]

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

[@yufeizhan726]

So good. Highly recommended!

[@00733adnan]

Awesome. Simple and meaningful.

[@hyejungk.6234]

amazing tut! appreciate a bunch!

[@kodave]

Again, thanks for the succinct explanation

[@Akephalos204]

clear as crystal, thanks

[@Shmack_]

Great tutorial thank you!

[@alexlions8633]

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

[@stackdevlopr]

explained beautifully!

[@grandpowr]

Legit the best Javascript teaching series in youtube!

[@grantlineful]

Great explanation! Thank you.

[@diegoavendanohernandez9908]

Thank you much, super clear

[@andrewtcoder]

Thank you for this video!!!

[@eminm6383]

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

[@devjeff3192]

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

[@pepsivanilla93]

Great explanation thanks so much

[@BlueIceAce2015]

Great explanation, thanks!

[@iVuDang]

Thank you, very helpful!

[@buddha0004]

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

[@lalaithan]

Excellent presentation.

[@nebojsapavlovic8031]

Thanks Beau! This I understand.

[@ih4722]

Simple yet powerful.

[@zeroxcrusher]

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

[@soygeekgirl]

Genial , super bien explicado!! ..

[@user-kn4oi9oh4i]

Thank you for this Bo

[@akagragupta9968]

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

[@LuisMorales-yx8di]

Thanks, really helpful

[@miaprivate9742]

It was an awesome explanation for rest of my life

[@igudy]

Thank you!

[@teenytinytoons]

Beau is my hero!

[@stavroskefaleas6320]

Omg.This is awesome!

[@ohiwantyoutobelieve]

Excellent, ty

[@CameronPak]

Now I know how to spread... Woo!

[@israeli_soldier]

Excellent video

[@canerates6180]

thank you so much! :)

[@braulioandre2918]

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

[@deathknell1970]

u are a great teacher

[@kenbinta2246]

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

[@CHAZZA2010XP]

perfectly explained

[@solaraproject3614]

Thank you

[@eledorusso]

the best tutorials

[@MatthewChenIsAwesome]

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]

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

[@mackynyxz]

Nice explanation

[@mmbower1]

THANK YOU

[@KhaledElkhawaga]

This is super cool.

[@lecanhduong7646]

so good !

[@MohsinKhan-wv3ep]

Best video i have ever watched ❤

[@DColls2488]

GREAT VIDEO FOR ROOKIE CODERS 🙏

[@RobsonAlvesJJ]

thank you.!

[@Eriksonmagno]

Awesome!

[@irvingdelgado6426]

OH great, it's so useful!

[@Moorcheh]

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

[@ememmenor689]

thank you so much... :)

[@jt.633]

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

[@ahmed_raaphat]

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

[@harryhoudini9292]

muchas gracias

[@ankitasingh2563]

Thanks

[@oryaahmad2408]

thank you.

[@Sergeodessa]

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

[@justincook8473]

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

[@oufcena5092]

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

[@brunofernandes4120]

Whats is this IDE that you are usina? How do you have the console on the IDE?

[@davidgillis950]

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?