Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Ecma 1
  • Overview
  • Transcript

5.1 Arrow Functions

Arrow functions are a new type of function in ES6. Arrow functions give us a much shorter syntax for anonymous functions, as well as lexical binding of this. Let's take a closer look at how to use arrow functions and how the this keyword works with them in this lesson.

5.1 Arrow Functions

Hi, folks. In this lesson we're going to look at new 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 equivalent to a function expression but they do also make use of a lexical this which is very different from functions in ES5. Let's take a look, the syntax for a basic arrow is a parameter list enclosed in regular braces followed by a fat arrow, followed by a collection of statements within curly braces. We don't use the function key word or provide a name. But in this case, there's more we can do to show us in the function. If we aren't passing any argument to do, we still need to provide an empty set of parenthesis. If only a single parameter is used, however, like in this case, we don't need to provide any parenthesis at all. It works in the same way. If we just want to return the results of the single expression, like we are in this example, we can lose the curly braces and explicit return as well. And it still works in the same way. We still get the same value. Using curly braces to group the statements executed by the function means that we need to use a slightly different syntax if we want the function to return an object literal. To do this, we can enclose the objects that we want to return within regular parenthesis. As we've seen in this simple example, the shortened syntax can often bring simple functions down to one liners. Which means less code to write in the first place and less code to read, which is one of the main benefits of array functions. The other important feature of array functions is that they have a lexical this. They take their value of this from the surrounding code. Whatever this is in the nearest regular function, is what this is inside the arrow function according to the regular rules of this. So in this function's case that would be undefined. A consequence of the lexical this is the arrow functions cannot change their value of this. We can use arrow functions with bind, cool or apply, but regardless of what we specify as the this object It will always be the lexical this. So for example in ES 5 if we wanted a function to have a specific this value, we could use call and specify the this object as the first argument. In this case we see the value someone, as we'd expect. We can't do the same kind of thing with arrow functions either. So if we change get user name to an arrow function This time we see an error, because undefined does not have a name property. 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 the new keyword will also throw an arrow. One of the limitation is that arrow functions cannot be generators. We'll look at generators in the next lesson. So in this lesson we looked at the new arrow functions which have two main benefits. A much more concise syntax and a lexical this. We saw that there are several variations depending on how we want to use the function. We can pass zero or more than one parameter using parentheses but these can be omitted if we are passing exactly one parameter. We can also use curly braces to group the statements we would like executed or provide an implicit return by omitting the curly braces. Arrow functions can often be truncated down to one liners, which makes them really useful for callback functions but because of the lexical this, it means we cannot use them as constructors. Thanks for watching.

Back to the top