6.4 Arrow Functions

Hi folks, in this lesson, we're going to look at an alternative syntax that we can use to define functions, arrow functions, or fat arrow functions as they're also known. Arrow functions are mostly a syntactic sugar for using a shorter syntax which is equivalent to a function expression. But they do also make use of a lexical this, which is very different from regular functions. Let's take a quick look. So a typical arrow function will look something like this. So let's just look at the output in our browser, and then we'll come back and talk about the syntax. So the square of 3 is 9, as you were probably expecting. Okay, so when we define an arrow function, we don't need to use the function keyword. The function keyword doesn't appear in this code at all, but as you can see, it's definitely a function because we are invoking it. What makes this an arrow function is the arrow function syntax. And really that’s this part of the code here, the equals and greater than sign. We also don’t provide a name for the function, so arrow functions are always anonymous functions. The body of the function in this case is contained within curly brackets, which is necessary because there are multiple expressions inside the function. Those expressions are where we create the square variable and where we return the square variable. So this should now work in the same way as before. And now actually because we're down to just the single expression inside our arrow function, we don't need to use the curly brackets. And now that we aren't using the curly brackets, we don't need to use the return statement. Let's just go back to the browser. And we can see that the function is still working in the same way that it did before, even though the syntax is now quite different than when we first started. So we've managed to condense our function down to the single line, and that really is the power and the beauty of arrow functions. Very often, they can be simple one-liners like this. So, this is now known as an implicit return because we don't explicitly use the return keyword. We only need to do that when we are using an arrow function that contains multiple expressions and thus requires the curly brackets. The parameter that gets passed into the function is specified before the fat arrow and in this case we're only using a single parameter. If we want to use multiple parameters however, we need to use a slightly different format once again. So because we're now passing multiple parameters into the arrow function, we need to surround these parameters with parentheses and separate them with a comma. This is the same even if the function didn't accept any parameters. So even though we aren't passing any parameters at all now, we need to use the parentheses. We can only get rid of the parentheses if we're passing a single argument into the arrow function. So we saw an example where we used curly brackets earlier. What happens if we want to return an object literal from an arrow function? So the function actually is returning undefined at this point. The reason why it's returning undefined is because, in this case, we want to return an object literal but when we use curly brackets, that tells JavaScript that we're using a multi-line function. Even though in this case it isn't actually a multi-line function, it still confuses the JavaScript engine. So when we're using an arrow function and we do want to return an object literal, we just need to wrap that object literal in parentheses. And now we see the object literal as we were expecting. So these are some of the variations in the formats of arrow functions. You might see any number or combination of those variations depending on how the arrow function is being used. So one other very important feature of arrow functions is that they have a lexical this. And what that means is tht they take their value of this from the surrounding code. Whatever is in the this context around the function is what will be the this context inside of the arrow function according to the regular rules of this. So in this function's case, that would be undefined because we are inside the function. That function is the outer containing iffy function. A consequence of the lexical this is that arrow functions can not change their value of this. We can use arrow functions with bind, call, or apply. But regardless of what we specify as the this object, when we're using those methods, inside an arrow function, this will always be the lexical this. A consequence of not being able to change the this value inside an arrow function is that we can't use arrow functions as constructors. Invoking an arrow function with a new keyword will throw an error. Another limitation is that arrow functions cannot be generator functions. We're gonna look at generator functions in the next lesson. So for now, just be aware that arrow functions cannot be generator functions. So in this lesson, we looked at arrow functions, which have two main benefits. The first benefit is a much more concise syntax than other functions. And the second benefit is the lexical this, which, in some situations, can be very useful. We saw that there are several different variations that the arrow function might take, depending on how we want to use the function. We saw that we can pass zero or more than one parameter using parentheses, but if we're just passing a single argument, we don't need to use parentheses. We also saw that we can use curly brackets if we want to use multiple expressions inside the arrow function. And that if we want to return an object literal, we need to wrap it in parentheses. In the next lesson, we can move on to look at generator functions. Thanks for watching.