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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.6 Closures

Closures are seen by some as a complex and difficult concept to learn. We'll blast that myth away in this lesson and learn how easy they are to use.

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.6 Closures

Hi folks, in this lesson we're going to take a look at one of JavaScript's most misunderstood and feared features, the Closure. But don't worry, we have nothing to fear from the Closure. Although they are seen as an advanced feature of the language, the premise behind them is actually quite straightforward. Earlier in the course, we looked at scope in JavaScript. And we learned that it refer to the pose of our code in which variables are visible and accessible. As we know, variables declare outside of any function have global scope, which means that they can be used or accessed anywhere in our own scripts, or anywhere in other scripts attached to the page. Variables defined inside functions, on the other hand, are only visible within that function, including within other functions inside that function. The ability to create closures is simply a result of the fact that we can create functions inside of other functions. These functions are known as inner functions. A closure is just an inner function that remembers all of the variables in the scope of the outer function that it's within. This may not seem like a big deal when explained in such times. But recall that once a function returns, it's scope is usually destroyed. This is where the term closure comes from. The inner function closes over the scope that it is contained within, preventing that scope from being destroyed. Let's look at an example to illustrate how closures are formed, and how they behave. First of all let's create a new constructor function that represents an order in a store. At this point it's just a regular constructor, there's nothing special about it at all, there's no closure. But now let's have the constructor return a function. We return a function called addProduct, although the name of the function is only useful for debugging purposes. This function accepts a single parameter called price. Inside of the function then, let's compute a sales tax and a fee, and then add these to the price to create a total. So inside the addProduct function, we calculate a sales tax and a fee, which are both based on the price. We then add the price, the sales tax, and the fee to the total, which was specified as a variable inside of the outer order function. So the order function is the outer function in this case, and the addProduct function is the inner function. So now we can create the closure. So in this statement, we simply invoke the constructor, and store the return value in a variable. Remember that the return value of the constructor is the function addProduct. So the outer function at this point has returned. By all reasonable assumption, it's scope should have been destroyed, including the total variable which exists within it's scope. But because the constructor returns a function, something special happens, as we can see if we invoke the function that got returned. Let's now check the output in our browser. We don't see any errors, we see some values. And those values are the results of evoking the addProduct function, which got returned from the constructor. The inner function, addProduct, created a closure, and that closure protected the total variable, which was in the order constructor's scope. So even after the order constructor had returned, The inner function addProduct protected the total variable. And each time we invoke the addProduct method, the total variable is accessible through this closure. With closures, what's important isn't the environment when the function is invoked, but the environment that existed when the function was created. So in this lesson we looked at closures in JavaScript, and we saw that despite being considered an advanced feature of the language, they are nothing more than information about a scope, and a function that remembers that scope. We learned that when a function returns or creates another function, the inner function remembers all of the variables in scope when the function was defined. In the next lesson we're going to move on and look at prototypes again, this time in a bit more detail. Thanks for watching.

Back to the top