16.3: ES6 Arrow Function - Topics of JavaScript/ES6

[Music] hello welcome to a special spooky Cody train video about es6 the arrow function spooky arrow function hold on a sec [Music] recording this close to Halloween and when you're watching this in the future you won't care and that'll be ridiculous but that's what the video is storing with anyway what is this thing I have to say for a very long time I have seen this in code and I just kind of shrivel up and feel very worried because it's so we kind of don't understand and I think that I'm supposed to understand it and it's supposed to make things better but I I just don't understand so I've taken some time to attempt to understand it I've used it and I'm intending to use it in some future videos that I'm going to make possible even today so I feel it's time for me to attempt to talk about what this is to you the viewer the watching this video so there was a time in the past not too long ago when I made a video about yes 5 vs 6 I kind of talked about what those things were I messed up a lot of it if you read the comments you could see what I messed up but there was an aspect of it where I discussed this idea of var being the way to declare a variable in the previous version of JavaScript call TS 5 and now there is another way to declare a variable let which is part of es6 and then there is even another way to declare a variable known as Const which is also part of es6 and keys work in a slightly different way and they clean up some problems and they protect you against yourself than your own inevitable ability to make all sorts of strange errors and so that's a separate discussion now there is another change that can be looked at somewhat in the same way which is that there you I used to be able to say and I still can and I still will and I'll probably always will function don't go away from me I can declare a function like this with some amount of arguments there is a new way to do this exact same thing oh my goodness look I forgot to put a name I forgot to name this function and the reason why I forgot is because the thing that I'm talking about here with arrow functions that's what's gonna go over here this is es5 it's typically used I think actually it's the only way you could use it someone's gonna tell me then I'll correct myself later for anonymous functions anonymous functions unnamed functions inline functions will you'll see if that's not familiar to you I will explain that as well in the context of this video but what you can see here is I'm saying function with these arguments execute this code this function doesn't have a name it's not called unicorn fluffy x or whatever it's just called function so now instead I can say hey look at this these parenthesis here I can say hey let's instead of saying functions function let's say arrow which is an equals and a greater than arrow curly bracket close curly bracket so this is somewhat yes five yes six so one of the reasons to write functions like this two for this arrow syntax is simply beach conciseness less typing don't need function we just say equals greater than the interesting thing is this one of the reasons for doing this is this idea of conciseness this can become even more concise in fact these parentheses were going to see as I show you some examples are optional and in fact now in some cases this bracket is also optional oh and I'm totally writing somewhere you can't see but what I just wrote was optional and in fact let's say my function was gonna return something this return statement can in fact be optional or implicit it can be just sort of assumed that is that you're going to return something and eventually you can see I'm gonna give myself some more room here and not draw too high up there like I usually do but I might have just done and had to reach state what I'm staying we can eventually write things that look like this X arrow x times two what does this mean this means actually create a function that takes an argument X and returns x times two so one reason is a new syntax concise this common operations and actually one of the things I will show you is this this kind of writing can be really useful when I eventually make a video about some other array functions that I'm going to use for some other tutorials that I'm doing and if we look at the functions like map and reduce and filter these are array functions that you can perform operations like if I wanted to just double the element of every if I wanted to double the value of every element in an array I could say map and give it this and it's gonna just happen in a nice and concise way now there is another aspect of this that's key and someone crucial which is that there is a word a keyword in JavaScript called this and we've see you guys are familiar with it this is the word that I always forget especially when I'm doing object-oriented programming I need to save this dot X and this done why I'm always forgetting but this dot this can refer to different things in fact if I'm just in a JavaScript sketch and embed I've written a piece of code that's running in the browser if I just say this it refers to the window object a sort of global object this always refers to something it's the current context of where you are I may in this object I mean in the global scope and with this particular function syntax you might want to use it in a particular context where you want to keep a certain value of this and not lose track of it and in fact this old this old way of defining a function can forget about what this should be referring to and this way of doing it is a way where where JavaScript will not forget and so in previous versions of JavaScript you might have seen things like bind and apply you can use other functions to kind of bind and keep track of the this and with the arrow function but this will keep track of itself in a more elegant and hopefully way that you would have intended so I really think like out of context that probably makes absolutely no sense but I'm going to make a scenario in this video where I want this to equal something and writing it this way it fails and writing it this way it works I will say I erased my bar becomes let bar becomes bled is pretty friendly uh they're both three letter words bar needs variable let just kind of like let this equal something this transition smooth function means I'm defining a function era I guess we could make this sort of case that like these values these arguments become transformed or gets sent into here and do something X becomes x times two so there is some kind of meaning there but one one reason why I tend to avoid using arrow functions all the time is that it can make what make your code fewer characters which sometimes is valuable for making it readable it can be really hard for beginners and we're just starting out to be able to read and understand what the code is doing so this video is to explore you but you can't escape it I might like to run away and never look at an arrow function but I can't escape it so this video is an attempt to unpack this even more alright let's let's actually look at some code alright if you're still watching this video you're a very nice person and you really appreciate it I have a p5 sketch it's doing nothing it's just a blank canvas I want to add something to it I am going to say let button equal Create button press and then I'm going to say button dot mousepressed now whoops in an older life you know the goal in another time when I had less gray hair and was even a little bit more organized these video tutorials to be perfectly honest I would have done something like this change background and then I would have written a function down here function change background and I would have said this function is a callback to the mousepressed event on the button so button dot mousepressed that change background function run whatever code is in here whenever you press the mouse on the button and let's actually do that I'm going to say background you know random 255 so now if I go back to the browser and look at this code every time I press the button I get a new random greyscale background this is my way of writing this code when I want to work in a sort of the most easy-to-understand way in a beginner context very I'd really I have a function here I can see what its name is and see where it goes so one thing I could do in JavaScript which is it there's no reason why I have to name the function and then put it down here I could just take this whole function take this whole function and put it in between the parentheses and mousepressed so I'm gonna do that you just put it right there and I'm gonna just hit save it's gonna like auto format it and now that it's in there it doesn't need a name it sort of exists just just for the event right here I'm gonna put a function in there past the function in as the argument itself you know which do I like better one or the other who really knows I don't know but this is an anonymous function it has no name you could call it an inline function although it happens over multiple lines so that's step number one now if I hit refresh same exact thing is happening I could now be even more concise and I could get rid of the word function and I can say equal arrow and there we go hooray I've used an arrow function hit refresh and it's the same thing and I can I don't even I don't know do I need these could I even get away with something weird like this maybe oh that looks so strange is that could that possibly be right somehow I just find this hard to believe that that could possibly be right Oh what did I do wrong here maybe this see ah this yes maybe here yeah let's try this no okay I think I figured it out let's try this one more time what's optional oh yeah I could get rid of the curly brackets those are optional if I get rid of those curly brackets I also don't need this semicolon because it's one line and then I should be able to do this and now in theory this is also correct very spooky though and this works too is it have I helped anybody have I made the world a better place yes I can just wreck that in one line but I can and I sort of guess I understand what's going on but in the end I'm very happy with it there we go I'm very happy with it like this this is perfectly fine I feel like I could breathe I can relax I can name everything in my code and I can know what it's doing but there are some cases where the arrow function really does help and I forget to those eventually in these incredibly long-winded video tutorials that I'm making let's look at one such case so let's say that I'm going to create a class and I'm gonna call this class counter so this is a somewhat of a trivial example that doesn't have a lot of practical value although I would I think that I could expand it to start using like Dom element animations or API calls so let's begin with something though that's very very simple the idea of this class whenever I make a class I need a constructor I'm going to make a property called count and I'm going to set it equal to zero then I'm going to write a function called count it and I'm gonna say this dot count plus plus and I will just say oh yeah and let's do this let's also say this dot P equals create P so to make a paragraph element and then I'm gonna say this dot P dot html' this dot count what is going on my goodness so the idea here is that and I'm gonna get rid of all this stuff that I had from earlier in the video I'm gonna say no canvas and I'm gonna say let's counter 1 equal new counter and then I'm gonna say I guess I'm gonna I'm gonna do I'm gonna do I guess I'll use the draw you'll see I plan but for now I'm just gonna say function draw which is a little bit weird counter 1 dot count it am I ready so here we go what's gonna happen when I run this sketch it's gonna break because this needs to be a global variable and by the way this might be a time [Music] where I used Const I'm never going to read Eclair this object I don't know I'm just trying to use trying to get comfortable using Const when do I use Const if it's something that I want to not allow myself to reinitialize read Eclair in a different way and protecting myself from mistakes Hey Oh oh you've got to do it up there old boy well it can't you can't of course I can't do that I can't make the constant nothing and then read it that was a big failure for using constant house find yourself in fact ok never mind ok so let me just use let take it easy on me please I'm just gonna use that now let's run this and there it is look at that I've got my counter going like this here's the thing I didn't really want to use that draw loop I want each counter to count itself so what I want to do is when I make a counter I want to give it some things like I want to give it a starting value and I want to give it a wait a time so I'm gonna say what I want is this counter to start at 100 and I want it to count every 500 milliseconds so this dot count should start a start and I'm gonna have a new variable called this dot weight which will equal 500 now what am I gonna do I am going to use and I actually probably need to keep this dot wait we'll see in a second I could use this I'll call this wait you'll see in a second I'm going to use this function called set interval and what set interval does is it says here's a callback count it write that function down here and then do that every so often all right already so this is the idea I'm going to create a counter that is going to and I'm going to say like every 500 milliseconds count up from 100 and update that paragraph element let's see what happens ah counted is not defined oh yeah counted is not defined it's looked down in the scope here oh okay well I know I know I know I'm going to make this called a function counted so it's not really like a function that's part of the class anymore it's just like a function right so I'm gonna I'm gonna name it function and I'll I'll put it even here like this is how I did it with that Mouse pressed right count that function increase the count here we go here we go here we go now cannot read what it cannot do anything why why why so hold on a second let's just see something when I first run a sketch if I were to just do something like and say console dot log this what I get is this thing called a window object this refers to the global context the window object now if I'm in here if I'm in the constructor for example and I say console dot log this Oh I'm referring to the counter object because this JavaScript knows to repoint the keyword this to the current context which is the current counter object but why why why what is happening in here console dot log this this is inside the class it's a function inside the object can't I know that I'm talking about that object and so now I'm gonna refresh huh see it's what is it console logging the window object again spooky window up NAT sound like so so what do I do about this guess what this is where the arrow function comes in if I instead if I use an anonymous function right in here so I can take this whole thing and I can put it in here I can get rid of the name right so this is just me we creating this with an anonymous function I'm gonna hit refresh it's still referring to the window object because I've named this function but if I change this to the arrow syntax let's see what happens now there we go and now I have my counter that's working and here's the thing what's magical not really magical about this is that what I've done is because I made this object-oriented and actually to be honest this doesn't need to be because again let's make them constant there so constant it's I can't even begin to I can make a bunch of these starting at different values going in different with different speeds and we'll see here that there we go I've got a bunch of different counters each counting at their own rate each starting at a different value and this callback function remembers and you know I want to take this out just to see this callback function remembers the correct context and I can have callbacks now inside of my class a great point has been made in the chat actually when I was designing this scenario in my head to do this video this is actually not the way I wrote it in my head I meant to not get rid of the count it function so let me just put that back for a second so I'm gonna rewrite this a little bit which I think will be a little bit more clear and I'm gonna keep this in the counted function I actually am going to make a variable called this dot weight and have it equal to weight and then what I'm going to do is I'm going to write a new function and I'm gonna call it a start and there I'm gonna say this dot count so this is kind of what I meant count it this is I just rewrote this but another thing is slightly more clear way because now I have I'm creating a counter object it has a starting counter as an amount of time to wait and a Dom element associated with it it has a function which will always increase the count and put the count in the Dom element and then has the start function is what and this should say by the way I'm forgetting the this dot this dot weight but here this would break once again that's just put this back to function right this totally makes sense set interval this function count it with this amount of weight and I'm gonna say counter one dot start and counter to dot start by the way I could make an array of these all with random starts counter three-dot start now let me run this uncaught counting is not a function because it's forgotten function for is because it gets kind of globalized it forgot about the current actual context of this and it's just referring to window replace it with the arrow syntax and now but uh there we have our counter objects all counting separately so just to double back for a second on being completely totally what though that sort of like one-line way of writing this I could actually get rid of these brackets and this semicolon right because I can just now do this so in theory if you like to write code like this this should also work let's refresh yeah so this is now way to write this in one line I completely confused myself looking at this I kind of have no idea what's happening let me see if I can understand it I want to set an interval and what I want is for this dot count it to happen every this dot weight amount of time okay it kind of makes sense you know it's a little bit a little bit cryptic and weird because there's no arguments inside these parentheses but we'll see what happens we put arguments aside those parenthesis in another video thanks for watching I hope this context somewhat helps and I'll probably come back because here's the thing this is the first time I've ever taught about arrow functions and I only really learned about them a couple weeks ago so just you know be kind okay and not two but two everybody please in the world be kind alright talk to you soon goodbye [Music]

Channel: The Coding Train

Views: 226,825

Rating: 4.8399181 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, itp nyu, p5.js, javascript, p5.js tutorial, es6, ecmascript6, block scope, function scope, es6 variables, variables JS, variables JavaScript, Hoisting, es2015, es6 tutorial, ecmascript, arrow function, lambda function, es6 function, anonymous es6 function, JavaScript function, JavaScript arrow function

Id: mrYMzpbFz18

Length: 22min 31sec (1351 seconds)

Published: Mon Oct 30 2017