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 ;)
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.
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
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).
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...
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?
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".
@2:07 You said the 4th element in the array is ignored "when it spreads it out" so you still get 3 in addThreeNumbers function. Is that true? I suspect is is more that all 4 elements are passed to the function, but since only the first 3 are named a parameters it is ignored within the function. In other words, the spread operator does not ignore it, but the function does, which is after is spreads it out.
Nope it doesn't work. Here test it yourself function add(x, y, z){ return console.log(x+y+z) }; var args = [6, 1, 2, 3]; add(...args); //Meanwhile this works function sum(...theArgs) { return theArgs.reduce( (previous, current) => { return previous + current; }); }; console.log(sum(1, 2, 3));
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
...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.
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.
...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.
"use your code for good" - loved it
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 ;)
Thank you. The FCC exercise had poor explanation and the concept here is well expanded and is clear. Thumbs up!
i find the real only curriculum is very confusing at times and speed up. This did also help me.
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.
Totally agree to you man :D..
Makes much more sense in the video
Same!
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
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 :)
Haha. Same
I love this.
Clear, not excessively long, right to the point.
Why is this video not embedded in the ES6 "rest" and "spread" pages!!??
Get a hint will get you here ;3
Love your voice and your straightforward explanations Beau. Very good tutorials.
Thanks for the explanation. The FCC exercise explanation sucked.
Harsh but accurate.
Legit the best Javascript teaching series in youtube!
Thanks for the clear and precise explanation of the 3 dots !
Straight forward and useful explanation. Pretty helpful.
Great - thanks for your help in understanding this. Useful to see the different use cases explained together.
Crystal clear, thank you Beau!
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".
Thank you! This is superb addition to the website tutorial!
so simple, so useful and so badly explained. this video made it much more clear for me, thanks!
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.
Thanks Beau. I was stuck on the FCC lesson about REST parameters and this really explained it well.
Beau, you are the best! Thank you!👍👍👍
thanks )) you are one of the best teaacher in js in the world
Thanks, man a quick and concise video. Now the concept was clear. Kudos to you. :)
This is extremely helpful and well explained. Thank you, Beau!
this is the best explain for those methods. many thanks.
Concise and to the poin! Thanks a ton
Concise and informative. Much appreciated.
So good. Highly recommended!
It was an awesome explanation for rest of my life
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
}
```
I still haven't finished JS yet so, maybe I'll get it later. thx tho ;3
Awesome! Exactly what I was looking for. Clear explanation. Thanks
Wow! You made this so simple. THANK YOU!!!
Thank you, Very good explanation. Understood clearly about Spread and rest Operator
Now I know how to spread... Woo!
Thank you. Very useful explanation. Great job Beau!
Thank you so much for this video. Short and well explained
Awesome. Simple and meaningful.
GREAT VIDEO FOR ROOKIE CODERS 🙏
Very simple explanation, thank you very much
Beau is awesome teacher !!! But I couldn't find any video tutorials regarding to ES6 on freeCodeCamp ! But finally found 'em on UA-cam ! :)
Genial , super bien explicado!! ..
Great! You explained this well and made it easy to understand. I loved all the examples--really nailed it down for me. Thanks~
so easily explained, thank you
Thank you for this video!!!
Thank you for doing these videos! Really helped me !
Well Explained. I did not have to watch the video twice to understand
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).
Thanks for such a great explanation. Helped me make some sense of it.
Best video i have ever watched ❤
clear as crystal, thanks
explained beautifully!
Beau is my hero!
Again, thanks for the succinct explanation
Great, clear explanation. Well done. 🙏 thnaks a lot
Thank you, very helpful!
Excellent presentation.
Just excellent explanation.Thank you
Thank you, your explanation is very clear and to the point!
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...
u are a great teacher
Very interesting! Can't wait to use it. Thank you!
Great explanation thanks so much
Thanks Beau! This I understand.
Simple yet powerful.
the best tutorials
Thank you for this Bo
Thank you for the clear explanation
Really nice. I'll be using your videos as a reference point.
clear and simple and to the point amazing
Thanks! ES6 course is so badly made, so this helps.
Thank you much, super clear
Excellent video
Don't forget to subscribe and remember, USE YOUR CODE FOR GOOD!
Thanks for the great explanation.
amazing tut! appreciate a bunch!
Nice explanation
Thank you for this video. I spent way too long trying to decipher the documentation at MDN.
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?
VERY fluid explanation thanks FCC! Btw the excersizes' explanation needs a change!
beau, you're awesome.
Thanks, really helpful
Great explanation, thanks!
I am on my 3rd year of IT degree . I got to know this today
Omg.This is awesome!
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".
great explanation thank you! although the last one about the rest operator is still confusing
Great tutorial thank you!
@2:07 You said the 4th element in the array is ignored "when it spreads it out" so you still get 3 in addThreeNumbers function. Is that true? I suspect is is more that all 4 elements are passed to the function, but since only the first 3 are named a parameters it is ignored within the function. In other words, the spread operator does not ignore it, but the function does, which is after is spreads it out.
Nope it doesn't work. Here test it yourself
function add(x, y, z){
return console.log(x+y+z)
};
var args = [6, 1, 2, 3];
add(...args);
//Meanwhile this works
function sum(...theArgs) {
return theArgs.reduce( (previous, current) => {
return previous + current;
});
};
console.log(sum(1, 2, 3));
const sum = (x, y, z) => {
const args = [x, y, z];
return args.reduce((a, b) => a + b, 0);
}
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
You are too good.
well thank you so much , I was earlier just so confused now I am clear
OH great, it's so useful!
What will happen if you have nested arrays? For example, [[1,2], ["three", "four"]]
//return []
try yourself in dev tools JS console
var multiply = (multiplier, ...args) => args.map( (element) => multiplier * element );
console.log(multiply([[1,2], ["three", "four"]]));
This is super cool.
Excellent, ty
thanks for explanation! btw, what about the rest - rest? )
thank you so much! :)
spread operator also prevents state mutation
...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.
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.
...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.
makes a little more sense but I'm still on shaky legs here. will keep working with these operators until the lightbulb goes off.
Respeact very very clear is unsdrenstand