JavaScript ES6 Arrow Functions Tutorial

Key Takeaways

hello everybody kyle here from webdev simplified in today's video I'm going to be going over at one of the most important and useful features that came with the es6 version of javascript and that is arrow functions i'm going to be comparing them and contrasting them with the normal function syntax that you all already know so without any further ado let's get started in this javascript file I have four examples of functions to help us understand the differences between the syntax for normal functions and arrow functions right now all these are normal functions and we're going to convert them to arrow functions so the different types of functions we have is a named function with multiple parameters in this case - we have the named function with one parameter a named function with no parameters and down here lastly we have an anonymous function so it's just a function with no name so to get started we're going to convert this sum function first to an arrow function because it is the easiest format and probably the most common you'll run into when converting an arrow function so I'm just going to copy this paste it down here so we can convert this and compare and contrast then when we're done the first thing we need to do to convert an arrow function is completely remove the function keyword because with an arrow function this function keyword is assumed and now we need to assign it this actual function here to a variable so we're just going to call that variable sum - in this case so we'll just say sum - as our variable name we're going to set that equal to what we have left over which is going to be the beginning of the syntax for our error function and the reason we have to do this assignment here to a variable is because normal functions already create a variable of the name sum in this case with the function keyword but since we no longer have the function keyword we now need to create our own variable to store this function and the only change that we need to make to convert this function syntax from here to an arrow function is to add in the arrow that denotes that these are our parameters on the left side here inside of the parentheses and then we have an arrow to denote that this is a function and then inside of the brackets we put the actual function syntax that we're going to be using and now our sum - and some are both the exact same function just one uses the arrow syntax and the other uses a normal function tax we can go even further to reduce this code slightly more since as you can see we just have one line of code and it returns something this arrow functions can be changed so that we can remove this return completely and we can remove these curly braces and put everything on one line so if you do this everything after the arrow is assumed to be returned so this a plus B is going to be returned because there's no brackets and there's no return statement so it just assumes that whatever comes after the arrow here is going to be returned from the function and this again is exactly the same as our normal function that we have defined at the top here but as you can see this is much more concise and easier to use so let's do the same thing tor is positive function we'll copy this paste it down and as you know we can get rid of this function keyword change is positive to a variable we'll call it is positive to and we just add in the arrow and there we go again we have an arrow function but we can reduce this further by getting rid of those curly braces and there we go we have that exact same arrow function is positive to is now exactly the same as is positive but when we only have one single parameter we can actually completely remove these parentheses around the parameter and just have the single name of the parameter number here and that will still work and you'll see this very often because there's tons of use cases for these single parameter functions to be arrow functions so it'll be very common for you to see syntax like this and all it is saying is this is the argument of your function this number and then the arrow says we're returning everything after it since there's no curly braces afterwards inside of a function argument and then lastly we have this random number function which we paste this down we can do the exact same thing we can remove function replace it with a variable assignment and then we put in our arrow and again this is the correct syntax for a function with zero arguments what we want to do is we want to put these brackets right here are these parentheses and inside of it we just put nothing to denote that this has no functions that go into it and again if we want to do that fancy thing with the return we could just remove the return and the curly braces put everything on one line so it's a lot cleaner and easier to read and you may be thinking that this really doesn't save you very much because you still have to say let and define variable and it seems kind of clunky and I have to agree arrow functions aren't that useful when it comes to narrowing down the amount of words that you have to write any amount of code you have to write when it creating functions like this but where the arrow functions really shine is when you're creating anonymous functions or functions that have no name such as in this case when we're passing a function to another function so this is the normal function syntax that we would use and if we want to change this to an arrow function we remove the keyword of function and then we add in our arrow and there we go now we have our arrow function and we don't actually have to sign it to a variable by saying but and a variable naming equals we just have this function now here that we can define without having to use the function keyword and again we can put this onto one line instead of having to do it on multiple lines so we can make it even more concise by putting it on one line and removing it curly braces and now this line right here 23 is exactly the same as this entire code block up here from lines 19 to 21 it's just a more concise and easier way of using arrow functions but that's really not what makes arrow functions so great it's nice that they have a more concise syntax but what really makes arrow functions important is the fact that they redefine the this keyword inside of them as opposed to normal functions they use this keyword much differently so let me show you an example of how that will work on the left of my screen I have a simple person class which all it does is it takes in a name in the constructor and it sets this name to that name and then it has two functions one is called print name arrow and this function uses an arrow function inside of a timeout to print out the name of the person after the word arrow after a 100 millisecond delay and then those print name function down here which is exactly the same as the print name arrow function except for it uses the standard function syntax instead of the arrow function syntax so we can look at how this dot name is going to be different inside of the normal function versus the arrow function so before I start explaining the differences let's just run this code to show the differences so we can create a person object here we're gonna set it to new person and we just need to give it a name in our case we'll just give it the name of Bob and then we want to call those two function so we'll say printname arrow as our first function and then we'll print name function down here so we're both calling the arrow function and the normal function and printing them out and if we save this you'll see that the arrow function prints out Bob but the normal function doesn't print out any name and you are wondering why is that and that is because this is different inside of a function and inside of an arrow function so normally these standard functions syntax is here that we've been using since JavaScript came out it defines this based on where the function is called so as you can see the function is called down here print name function so this has the same scope as it would out here inside of this so if we did console dot log this dot name here you'll see as soon as that loads that it's also blank right there because this dot name is not defined in the global scope and this is a global scope to this because it's defined from what a function is called and that's a bit confusing to wrap your head around but it's easier to see how the print name arrow works because this is just the same as that this inside of this print name arrow function this does not actually get redefined when you use an arrow function and that's why this dot name is Bob inside of this set timeout for print named arrow and really that's the big difference is a normal standard function for JavaScript redefines this keyword so you can't actually use this dot name or anything else you defined on your this object inside of a normal function because it redefines it with whatever scope you call the function in and in our case that is the global scope that we're calling this function in but when you use an arrow function this is not redefined so this is going to be the exact same as this in the scope where the function is defined which is how it is in most other programming languages and it's such a relief to have this feature in JavaScript after so many years in almost all cases going for it I use arrow functions because it's much more intuitive to have this be defined in the scope that you call or that the function is defined rather than where you call the function because that just confuses me and confuses many other people so that's really the big reason to use an arrow function in my opinion is this scoping of this more similarly to how other programming languages work so I would recommend going forward to always use arrow functions unless you have a specific reason that you need this to be Reese code inside of that function which usually you'll not run into I hope you guys were able to learn the differences between arrow functions and standard functions and why arrow functions are almost always better for making your code more concise and legible and because the this context is defined more properly in arrow functions as opposed to standard functions if you guys did enjoy this video please make sure to subscribe for more videos just like this and check out my other videos listed over here which are going to be more JavaScript related content thank you guys very much for watching and have a good day