Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.4 Arrow Functions

Arrow functions give us a much more concise syntax for anonymous functions. this works a little differently in an arrow function: it is lexically bound. Let’s take a closer look at how to use arrow functions and how this works with them in this lesson.

Syntax

  • =>

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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.

Back to the top