Impress Front-End Interviewer — Closure
Why do we need Closure and how to use Closure properly. More importantly, how to impress your interviewer.
Table Of Content
1. What is Closure:
1.1 Closure Definition:
Let’s look at some official definitions first:
From MDN:
A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
From Wikipedia:
In programming languages, a closure, also lexical closure or function closure, is a technique for implementing lexically scoped name binding in a language with first-class functions
From Professional JavaScript:
A Closures is the function that has access to variables from another function’s scope
From You Don’t Know JS Yet:
Closure is observed when a function uses variables from outer scope(s) even while running in a scope where those variables wouldn't be accessible.
From My Understanding:
Closure is used to describe a function behavior. The inner function holds the references of outer scope variables to stop garbage collection even if the outer function finishes execution.
Now you should have some understanding of what closure is. let’s move on.
1.2 Where does Closure Comes From
Please remember the goal of this article is to impress your interviewer so that we not only need to understand what is Closure also we need to understand where it comes from:
Here are the milestones of Closure.
We can clearly see that the history of Closure is longer than JavaScript it is not only important for front-end developers but also for all software engineers. To understand what closure is created for we need to go back to 1960.
Closure is an important concept, especially in functional programming. If we take look at the trend in react community we can see functional programming is becoming more and more popular these days.
Actually, even if you are using Java or C++, which does not support closure you can achieve the same purpose but not that straightforward.
2. Closure Common Scenarios:
2.1 Nested Function
The most common scenario for closure is the nested function in JavaScript.
As you can see in this example the inner function has access to the variable outside function nestedFunction.
2.2 Private Member Accessibility
There is still no syntax for private properties in ES6 classes until I write this article(but in the tc39 proposal already). For private member accessibility, we still need to rely on the following method by making use of closure.
If you would like more examples about the private member implementation I will list two more readings in the last second(further reading)
Actually, the private member is already in the tc39 Proposal. Later we can use it without relying on the closure to implement it.
2.3 IIFE（mock block scope）
This is a very popular interview question. Here we can use IIFE + Closure to resolve it.
Definitely, we can use block scope to fix it
But it is still good to know that we can use IIFE and closure to resolve it.
2.4 Callback
Please note that not all callback functions are using closures. Only the callback function relies on the variable from the outer scope we can say it is closure.
Let’s check this Ajax example from you don’t know js yet.
From this example, we can clearly see that the studentID is still accessible after the lookUpStudentRecord function is completed through closure.
2.5 Event Handler
The example on top of my mind is the addEventListener. Let’s look at the following example:
This might not be a perfect example as we can get the key code from the event itself. But the purpose of this example is to illustrate how closure looks like in the event handler.
Definitely, the usage of closure is not restricted to the above scenarios. We will not list them all.
3. Closure Interview Questions
Question 1: Closure pros and cons：
Pros:
- closure can have variables that are available even after a function task is finished.
- you can make use of closure to control the scope of your data access.
Cons:
The disadvantages are all about memory and performance.
- As long as closures are active(hold reference to outer scope), the memory will not be garbage collected. This will lead to run-away memory usage.
- nested function lead to duplication in memory.
We can expect the interviewer to ask the follow-up question regarding how to avoid this memory issue.
You may need to mention. Given Closure will prevent garbage collection to collect the variable, we need to discard the function references when they are not needed anymore(e.g. assign null value to it)
Question 2: Is the following code example using Closure or not?
example 1:
example 2:
The above examples are from You Don’t Know JS Yet — scope & closure Chapter 7. (highly recommend you to read the whole series)
The answer to Question 2 is: both of them are not Closure. They are just lexical scope.
4. Conclusion:
Congratulation you finish reading it. Some take-away:
- differences between closure and lexical scope,
- some interview tips regarding answering closure-related questions.
- history of Closure
There are some topics I didn’t cover in this post like Higher-order function + closure and closure in Functional Programming I will cover that in my future post. If you find anything wrong with this article please let me know. If you like this article don’t forget to click the LIKE button. Let’s ace the front-end interview together.
5. Reference:
6. Further Reading:
- High-quality article regarding Execution Context, Closure, and so on.
- Regarding private member implementation in JavaScript
- TC39 Proposal:
- You don’t know js Yet — Scope & Closure
