I love how you (despite having been coding complex stuff for so many years) are able to explain things in such simple terms! Your videos are also lessons in (educational) story telling. You have my respect! I had taken up the task of teaching JS for a year, a year ago... and I thought I was fair at it.. but I see that I was far!!!! **bows down**
Hi! Thanks for this video, it helped me a lot! I found another way for those default options. You can use the spread operator (I think it's called), "...": var = defaultOptions = {species: "animal"} var {species, sound} = {...defaultOptions, ...options} Note that the order of defaults and options matters! If you're wondering why you may want to do it in this way, is because like so you can have some other parameters in the function arguments, for example: function circle(cx, cy, radius, options, ...) { ... }
This video was really nice. I had no idea about this. It would be nice to see some practical examples of destructuring + high order functions + function composition in order to create some robust functionality on top of a collection. Regardless of what you do next, thank you very much for taking the time to explain all of this to all of us, for free, for ever!
It's been quite interesting and fun watching this videos, I feel that Mathias makes it very simple to understand the basic concepts behind all the different features and programming paradigms he tries to explain, whether that is functional programming or ES6. Coming from the world of PHP, is a little bit tricky to move into JS for the whole stack, and being a junior doesn't make it that much better either, but I know is worth it! Thanks for the help and for the time you put into making these videos +mpjme
Thank you for making these videos, I am really enjoying them. As for ideas I would love to see an explanation of prototype and also one on what functional programming means.
David Schenk The prototype is oft-requested already - adding to the suggestion box. Can you explain a bit more what you mean by "what functional programming means". :) What kind of video are you envisioning there?
mpjme Most Other programming languages I've seen don't return a function inside a function. Like in jQuery they do this : jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); } I guess I really don't know what I'm asking lol. Maybe this was a bad request, but I figured you would know since you obviously know JavaScript so well. As with the prototype question I understand that .fn.init is part of the prototype chain I still can quite grasp how it all comes together.
I'm really enjoying all your videos, thanks very much! I'd love to see something on generators and iterators - and possibly how to use them with map()/reduce().
I was expecting a part 2 of the reduce basics so this was a bit surprising to see. Cool stuff nonetheless. What are your plans moving forward with these different series' ? Will they be taking turns weekly, or are you just gonna be going with the flow?
robscom I'm still working this out. :) Buuuuut, my thinking is this - I'm probably going to keep a few series going simultaneously. While I aim to have a regular release schedule of videos on the channel as a whole, the series themselves are most likely *not* going to have that. The idea is to have a few options open every week so that I can pick the one that I'm most excited about doing, because if I'm excited that reflects on the quality of the video. Also constantly doing what I'm excited about makes it easier to release videos on a regular basis. But, as I said, that might change. It's all about balancing my own need to novelty and inspiration with the needs of the audience, so it's just as much depends on how you people react. :)
As a viewer I'm not too sure if I like this kind of uncertainty when it comes to following a series. I mean just comparing it to a regular tv-series, I know to expect a new episode of Mr. Robot (great show btw) every thursday morning here in Europe, so that'll make me all the more excited for it when that day of the week is approaching. So what I guess I'm trying to say is that from a viewer's stand point I don't really see the point of a series being called a series if it doesn't have a sense of consistency. Would it be too odd to keep the videos as separate entities? Do they have to be a part of a series if that particular series won't be returning on a specific schedule? That's my two cents for now I suppose. Obviously you as the content creator should have the privilege of choosing the material you decide to share with us, but it's something to take into consideration. :)
When you destructure the object in the function signature, is there a way to access the other properties of the object? Like, the animal object has a weight property that hasn't been destructured(?), so how do I get this value in the function? This would be useful in case there are a lot of properties and you want to destructure only some. Say, error statuses, and use the other properties as obj.prop.
Rohith PR In that case, I'd simply not destructure in the method signature. I would keep the destructuing on the next line, just like I have it before I move it to the signature at 9:09. That way, you can both destructure and have access to the original object.
Thanks a lot for this video ! I'm still wandering how will it work "in the future" with minification. I guess in the future, we won't use babel to compile ES6 into ES5 code and when we will minify 'species' or 'sound' into 'a' and 'b', how can the right variables (in 'options') be assigned to the right variables (destructured ) ? I hope it's kinda clear ^^ Edit: Wow, I didn't realize this video was published almost a year ago
MPJ, can you please make a video on symbols? I can't find a good "why" for that, and I really need it to make it stick in my head. Everyone seems obsessed with how to do it, but it is pretty simple and straight forward. I guess my experience as a professional developer has not given me many problems mistakingly setting object properties that shouldn't be set, or maybe I just haven't done something so big that would require that. For now, it seems just some workaround for a poorly designed code.
Great video. The background music is gives a good mode to your video but keep its volume down please. For a next video, I would like to learn about es6 classes. What do they add to the prototype system of JS? When is it better to use them?
Arman Mottaghi Yeah, the volume is a bit too loud, tricky to find a balance. About classes and prototypes, I have not yet decided what kind of video I'm going to make there. The reason is that I'm of the same position as Douglas Crockford - I think classes as a concept is a bad idea and I think that using them should be a avoided, and I very seldomly use prototypes either. Crockford talks about this in his recent talk "JavaScript: The Better Parts (th-cam.com/video/bo36MrBfTk4/w-d-xo.html#t=28m51s) The classless programming bit is between 28:50 and 38:00, but you should watch the whole talk, because it's awesome. At some point, I will probably make some videos on my own about this, but for now I refer tot that part of the talk because he creates objects the exact same way I do.
mpjme Thanks for the answer. I know it has taken a lot of your time, I appreciate it. Frankly, classes are not what I also see as something necessary and I believe a lot of developers are thinking like me and you. The main motive of having classes in es6 is giving coders more freedom on how they want to code, since Js is the only scripting language of front-end development. Imagine you've been given a source code of a native app and you don't want to revolutionize the whole structure. That's the reason I am curious about the classes even though I'm happy with the way I code. Anyway, the videos are awesome. Keep up the great work ;)
+Anish Bhut Its a tool for transpiling ES6 code to ES5. It is, however, no longer needed as node has excellent support for ES6 nowadays (this video is pretty old)
Ah, De-structuring. So, if putting a collection of variables in a structure is "Structuring", then De-structuring is making variables in a structure available on their own .. would it be correct to say - outside the structure "closure"?
Great video man very helpful. I hear constant digital clipping though. Bringing down the pre-amp on your microphone would make this video much more enjoyable.
Generators, man. Generators! A fun example is www.mongorito.com which is using generators in combination with asynchronous mongo find queries and cleaning up code with yield. example: var posts = yield Post.limit(5).find() As opposed to the familiar callback or promise patterns. In fact, I think the only real way to store something like that in a variable for later use as (somewhat) simply as this would be by currying the function and withholding the callback until some later invocation. I could be wrong on that, but I think this is essentially what futures/fibers does? Anyway, generators!
Every time you show an ES6 feature. It reminds me that we already do somewhat the same in ruby. It feels like ruby already had those neat tricks which will be in the future JS versions. Will they be building a new rails in JavaScript with those flexible power in hands? What would you like to say?
karan valecha I think Ruby stole it from Python, which probably stole it from Lisp. :) There are plenty of Rails-inspired frameworks written in JavaScript, but I don't think emulating what was done before in new technologies is the way we make progress. I like when people instead completely re-think things based on what we've learned the last years, and makes use of potential that we simply did not have before, such as how radically different Meteor and React are from what has been done before.
Excellent video until I saw this I assumed Destructuring in JS was just going to be like using list() in PHP. The video showed me some interesting additional use case. Now the only problem is I want to use them *everywhere*. ;-)
Sweet! I start every working day by watching a 10 minute episode from you, just to get into the "flow" and the right mindset.
Hi, Mattias. Why don't you make other videos about ES6 features? Please, give us more!
Hello I'm from Brazil. And I am really enjoying their videos
. Continue passing knowledge. This is brilliant.
Renato Silva isso aí, Brasil na área o/
Alan Michel Willms Quinot Yeah, Brazil here!
I thought Mpj was from Brasil, turned out he's from Swedent.
hue
Thanks for making this otherwise complex concept for newbies easy to understand. Keep them coming!
I really couldn't wrap my head around destructuring until this video. Thank you for the clear example!
+Aaron B Glad to be of service!
this is a great channel, really enjoy watching these. i've started from the beginning
Dude, all these videos are super clear to understand and enjoyable.
+Rick Medina Thanks a lot, that's exactly what I'm going for!
I love it when you say "I want to talk about WHY you want to use this"! :)
+Igor Yentaltsev (igoryen) thanks! I try to talk about the what why and how of things.
I love how you (despite having been coding complex stuff for so many years) are able to explain things in such simple terms! Your videos are also lessons in (educational) story telling. You have my respect! I had taken up the task of teaching JS for a year, a year ago... and I thought I was fair at it.. but I see that I was far!!!! **bows down**
Another great video! Will definitely be tuning in for the whole series.
You blew my mind with destructuring in the function signature. God!!! You're good...
⚡️ the definition of an energetic instructor ⚡️
Please come up with more videos on ES6. I love watching them and learn a lot of things. Thanks.
Great video. The power of destructuring can be captured in 2:30 seconds, and thats with the intro. Thank
Man, You make learning so much Fun Fun Function!
I'm glad i found this channel, its fun learning js here.
Hi! Thanks for this video, it helped me a lot!
I found another way for those default options. You can use the spread operator (I think it's called), "...":
var = defaultOptions = {species: "animal"}
var {species, sound} = {...defaultOptions, ...options}
Note that the order of defaults and options matters!
If you're wondering why you may want to do it in this way, is because like so you can have some other parameters in the function arguments, for example:
function circle(cx, cy, radius, options, ...) {
...
}
Excellent video, got to learn destructing in new and easy way! Thnx keep it up
You could as well use template strings: `the ${animal} says ${sound}!`
*no u*
Please continue this series!
Dude. Very entertaining, and solid explanations on your videos! I'm subscribed.
This video was really nice. I had no idea about this.
It would be nice to see some practical examples of destructuring + high order functions + function composition in order to create some robust functionality on top of a collection.
Regardless of what you do next, thank you very much for taking the time to explain all of this to all of us, for free, for ever!
Manuel Åberg Cobo Oooh, combo videos, eh? That's a good idea. I'll see what I can do.
Another great video mpjme. Keep up the great work!
Excelente video! Thank you very much =)
I have just seen your Funcional Javascript tutorial, also very useful!
Keep the videos coming!
It's been quite interesting and fun watching this videos, I feel that Mathias makes it very simple to understand the basic concepts behind all the different features and programming paradigms he tries to explain, whether that is functional programming or ES6.
Coming from the world of PHP, is a little bit tricky to move into JS for the whole stack, and being a junior doesn't make it that much better either, but I know is worth it!
Thanks for the help and for the time you put into making these videos +mpjme
hope to see you back soon...love you man
Love the videos really does explain it well. Can see so many places to use it now.
Can't stop watching your videos! So good! And the background music is very nice - what is it playing?
never mind, it's Muito Bunito, Tempero :)
Thank you for making these videos, I am really enjoying them.
As for ideas I would love to see an explanation of prototype and also one on what functional programming means.
David Schenk The prototype is oft-requested already - adding to the suggestion box. Can you explain a bit more what you mean by "what functional programming means". :) What kind of video are you envisioning there?
mpjme Most Other programming languages I've seen don't return a function inside a function. Like in jQuery they do this :
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
I guess I really don't know what I'm asking lol. Maybe this was a bad request, but I figured you would know since you obviously know JavaScript so well. As with the prototype question I understand that .fn.init is part of the prototype chain I still can quite grasp how it all comes together.
mpjme I found this, it might help explain what I'm looking for. www.smashingmagazine.com/2014/07/02/dont-be-scared-of-functional-programming/
David Schenk Nice article! What do you want to see next in my functional programming in js series?
I'm really enjoying all your videos, thanks very much! I'd love to see something on generators and iterators - and possibly how to use them with map()/reduce().
A very good humor. I like it. Contents is good, too.
I really like the way to present the stuff.
Please also include links for the following videos in the series.
Such a good teacher You are! Your videos helped me a lot. Please keep teaching. If you can please make videos on APIs. Thank you so much :)
Do a video about Babel, setting the environment and that kind of stuff.
Understood finally. Thank you.
Hi, I have a question. Can we use template literals `` instead of '' quotation marks in our console.log()??
Awesome. I love ES6 already!
Äh, fy fan va bra du är! Här kommer man stanna ett tag. Tack!
+Jona Cwejman Hej Jona! KUL! Välkommen till kanalen :)
The background music kind of grows on you. Great video. Keep'em coming
I really really love your videos!! You are the best teacher ever. Thank you!!
Awesome!!! Looking forward to seeing more of these!!!
Best destructuring video by far lol. Long live 'the animal says woof!'
Omg! TIL that you can call an project by declaring it as a function and it carries over its properties. That blew my mind!
Hats down my friend, this is grate explanation!
I was expecting a part 2 of the reduce basics so this was a bit surprising to see. Cool stuff nonetheless. What are your plans moving forward with these different series' ? Will they be taking turns weekly, or are you just gonna be going with the flow?
robscom I'm still working this out. :) Buuuuut, my thinking is this - I'm probably going to keep a few series going simultaneously. While I aim to have a regular release schedule of videos on the channel as a whole, the series themselves are most likely *not* going to have that. The idea is to have a few options open every week so that I can pick the one that I'm most excited about doing, because if I'm excited that reflects on the quality of the video. Also constantly doing what I'm excited about makes it easier to release videos on a regular basis.
But, as I said, that might change. It's all about balancing my own need to novelty and inspiration with the needs of the audience, so it's just as much depends on how you people react. :)
As a viewer I'm not too sure if I like this kind of uncertainty when it comes to following a series. I mean just comparing it to a regular tv-series, I know to expect a new episode of Mr. Robot (great show btw) every thursday morning here in Europe, so that'll make me all the more excited for it when that day of the week is approaching.
So what I guess I'm trying to say is that from a viewer's stand point I don't really see the point of a series being called a series if it doesn't have a sense of consistency. Would it be too odd to keep the videos as separate entities? Do they have to be a part of a series if that particular series won't be returning on a specific schedule?
That's my two cents for now I suppose. Obviously you as the content creator should have the privilege of choosing the material you decide to share with us, but it's something to take into consideration. :)
robscom Yeah, I get what you mean. That is good feedback.
nice video, you make it very simple to understand.
Exceedingly useful video. Thanks a lot.
Great introduction to this feature!
Your videos are amazing dude, keep it up!
Good video. What is the name of the Atom theme you use in these videos? I like the color scheme.
If you finish ES6 i would love to hear about async/await in ES7 from you!
I almost choked on my coffee when you said "fuck yeah!". Great videos, sir.
when the next part of ES6 features :) ?
When you destructure the object in the function signature, is there a way to access the other properties of the object?
Like, the animal object has a weight property that hasn't been destructured(?), so how do I get this value in the function?
This would be useful in case there are a lot of properties and you want to destructure only some. Say, error statuses, and use the other properties as obj.prop.
Rohith PR In that case, I'd simply not destructure in the method signature. I would keep the destructuing on the next line, just like I have it before I move it to the signature at 9:09. That way, you can both destructure and have access to the original object.
What is yout Camera? Canon, Nikon, Sony, Fuji? Which is it?
i need more of this! thanks you.
Destructuring, spread operator and rest parameters are the best features of ES6 so far.
awesome video as always
Hello, mpj... I'm really enjoying your videos and was wondering if you have any videos on localStorage and sessionStorage. Thanks.
This is the first video of your's I've seen! Just subscribed 👍 You should have a video on Meteor.js
You're friggin' awesome mate!
Thanks a lot for this video !
I'm still wandering how will it work "in the future" with minification. I guess in the future, we won't use babel to compile ES6 into ES5 code and when we will minify 'species' or 'sound' into 'a' and 'b', how can the right variables (in 'options') be assigned to the right variables (destructured ) ?
I hope it's kinda clear ^^
Edit: Wow, I didn't realize this video was published almost a year ago
Great explanation Mattias, thanks!
Another great video!
Love this video , thanks @mpjme
MPJ, can you please make a video on symbols? I can't find a good "why" for that, and I really need it to make it stick in my head. Everyone seems obsessed with how to do it, but it is pretty simple and straight forward. I guess my experience as a professional developer has not given me many problems mistakingly setting object properties that shouldn't be set, or maybe I just haven't done something so big that would require that. For now, it seems just some workaround for a poorly designed code.
Great video. The background music is gives a good mode to your video but keep its volume down please.
For a next video, I would like to learn about es6 classes. What do they add to the prototype system of JS? When is it better to use them?
Arman Mottaghi Yeah, the volume is a bit too loud, tricky to find a balance.
About classes and prototypes, I have not yet decided what kind of video I'm going to make there. The reason is that I'm of the same position as Douglas Crockford - I think classes as a concept is a bad idea and I think that using them should be a avoided, and I very seldomly use prototypes either. Crockford talks about this in his recent talk "JavaScript: The Better Parts (th-cam.com/video/bo36MrBfTk4/w-d-xo.html#t=28m51s) The classless programming bit is between 28:50 and 38:00, but you should watch the whole talk, because it's awesome. At some point, I will probably make some videos on my own about this, but for now I refer tot that part of the talk because he creates objects the exact same way I do.
mpjme Thanks for the answer. I know it has taken a lot of your time, I appreciate it.
Frankly, classes are not what I also see as something necessary and I believe a lot of developers are thinking like me and you. The main motive of having classes in es6 is giving coders more freedom on how they want to code, since Js is the only scripting language of front-end development. Imagine you've been given a source code of a native app and you don't want to revolutionize the whole structure. That's the reason I am curious about the classes even though I'm happy with the way I code.
Anyway, the videos are awesome. Keep up the great work ;)
9:02 "fuck yeah," I feel that!
When is the next part
What is babel? which you write every time run code before file name?
+Anish Bhut Its a tool for transpiling ES6 code to ES5. It is, however, no longer needed as node has excellent support for ES6 nowadays (this video is pretty old)
Thank you, your all video are awesome, also background music
great video! Can you explain Map, WeakMap and Symbols next time?
Ah, De-structuring. So, if putting a collection of variables in a structure is "Structuring", then De-structuring is making variables in a structure available on their own .. would it be correct to say - outside the structure "closure"?
Thank you for sharing.
When every `animal says woof!` gives me the motivation. *relaxed*
Great video man very helpful. I hear constant digital clipping though. Bringing down the pre-amp on your microphone would make this video much more enjoyable.
Thanks! Youre commenting on a video from the late Jurassic period though. I've gone through three microphones since back then. :)
Just asking, have you ever thought about playing Steve Jobs in a biopic? :P
Can you please make a video about JavaScript closures and bind
Ajey C Both those subjects are good candidates for videos, adding to suggestion box.
thanks bro nice explanation and fun..
Generators, man. Generators!
A fun example is www.mongorito.com which is using generators in combination with asynchronous mongo find queries and cleaning up code with yield.
example:
var posts = yield Post.limit(5).find()
As opposed to the familiar callback or promise patterns.
In fact, I think the only real way to store something like that in a variable for later use as (somewhat) simply as this would be by currying the function and withholding the callback until some later invocation.
I could be wrong on that, but I think this is essentially what futures/fibers does?
Anyway, generators!
Amazing video! You are the PewDiePie of coding!
Rony Sheer Hahaha, thanks! I'm actually living in Gothenburg, where PewDiePie is from.
Loved this video
Talk about @decorators and Proxies on ES6
Great stuff!
cool note, using the latest node version (v6), we no longer need to use babel to run es6 javascript :)
does still animal says woof ? (01/08/21) ..
The music sounds like something you hear in Mario Party lol. Is it from the standard TH-cam library?
+Avindra Goolcharan It's from royalty-free.tv if I remember correctly. :)
Thumbs UP! I enjoyed your video, as usual :-)
He yelled "the UNDEFINED says woof!" at 5:20 LOL
Every time you show an ES6 feature. It reminds me that we already do somewhat the same in ruby.
It feels like ruby already had those neat tricks which will be in the future JS versions.
Will they be building a new rails in JavaScript with those flexible power in hands?
What would you like to say?
karan valecha I think Ruby stole it from Python, which probably stole it from Lisp. :)
There are plenty of Rails-inspired frameworks written in JavaScript, but I don't think emulating what was done before in new technologies is the way we make progress. I like when people instead completely re-think things based on what we've learned the last years, and makes use of potential that we simply did not have before, such as how radically different Meteor and React are from what has been done before.
Agreed and Appreciated 😊
This is probably the difference between Me & You, The Amateur and an Experienced mind's thinking.
I would like to see spreads!
It's fantastic!
Please make more videos about ES6...
Excellent video until I saw this I assumed Destructuring in JS was just going to be like using list() in PHP. The video showed me some interesting additional use case. Now the only problem is I want to use them *everywhere*. ;-)
Carl Parrish When you have a hammer, everything looks like a nail. :)
Where are other lessons about ES6 features? :(
Dude! You are cool! Thank you!!!!!
chatgpt sent me here when asking about destructuring
@8:57 ahah I almost died laughing :')
Really good stuff
Great video
I like very much the idea of the object.observe() feature from es7 but its more usefull for library builders I guess.
Odrin White What makes you say that Object.observe is only for library builders?