Arrow Functions - Beau teaches JavaScript

an arrow function has a shorter syntax than a standard function and does not bind its own this these function expressions are best suited for non-method functions so this is the arrow right here so here are a few examples of how you can write a an arrow function so in parentheses you can put parameters and you put the arrow function and in these curly braces you can put the statements or you can just put an expression without curly braces and when you just have this expression without curly braces it's going to return this so this next line here is equivalent to this line if you put the return it's going to return the value of this expression but if you don't put the return it's still going to return the value of this expression as long as there's no curly braces parentheses are optional when there's only one parameter these two are equivalent so there's no parentheses here if you ever have a function with no parameters it requires parentheses okay now here's what a arrow function would actually look like compared to a normal function so here's the normal function where you just have that the name and then function passing x and y and then here's the statement or expression that you're going to return x times y but you could write that as an arrow function it's going to be a lot shorter you either write it like this or like this these are equivalent because you don't necessarily need the curly braces and you don't need the return statement either so this would be the the pretty short way of doing it now arrow functions work really well with higher order functions such as map filter and reduce that take other functions as arguments for processing collections of data so here's an example so let's say we have this materials array and here are three ways to do the same thing we have material links one materials length two and materials link three so we're gonna do materials.map which you pass in a function and here's passing in a standard function where we're just going to return material.length but you could do it like this here we have the arrow function and we're going to do the same thing but then we can even shorten the arrow function to put all in one line and you can just do material arrow materials material that length so that's going to be a lot cleaner than doing than doing it like this until arrow functions every new function defined its own this value an arrow function does not create its own this context so this has its original meaning from the enclosing context so the following code is going to work as expected so we have this person function and down here we're going to create the a new person uh so we have this dot age equals zero and then we're going to do the set interval where we passed in a function and inside this function we're going to add one to the age in a normal function the word this here is going to refer to the global object but here with the arrow function it's going to refer to the person object so it's going to work as expected it's actually going to change the vista age here instead of the vista age that would be in the global object another thing you should know about this is whenever you're going to return an object you always have to put the object in parentheses so if you look at this line right here inside these curly braces could refer to the statements that you want the the function to run but it also could refer to an object so to make it clear you're going to have to put the object in parentheses if you want to return an object and the final thing i want to talk to you about for arrow functions today is that you're not allowed to have line breaks see how it breaks the next line now if you're using curly braces that would be okay but without curly braces you're just going to have to put it all on one line well thanks for watching my name is beau carnes don't forget to subscribe and remember use your code for good

Channel: freeCodeCamp.org

Views: 47,265

Keywords: arrow functions, es6, this, bind

Id: 22fyYvxz-do

Length: 3min 54sec (234 seconds)

Published: Wed Apr 05 2017