Impress Front-End Interviewer — Closure

Why do we need Closure and how to use Closure Properly. More importantly, how to impress your interviewer.

Let’s spend several minutes together to understand why closure is a popular interview question and why it is important for Front-end Developers.

1 What is Closure:

1.1 Closure Definition:

Let’s look at the two official definitions first:

From MDN:

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:

Closures are functions that have access to variables from another function’s scope

I believe you can have at least a basic understanding now. let us look at the following code to make sure we are on the same page.

As we can see here we have access to the outside variable. This is a typical closure. Easy to understand right? 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.

a brief history 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 mostly used in Functional Programming

For a software engineer, closure is an important concept, especially in functional programming. If we take look at the trend in react community we can find 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. When to use Closure:

2.1 Nested Function

The most common scenario for closure is the nested function in JavaScript.

nested function

As you can see in this example the inner function has access to the outVariable.

2.2 Object-Oriented Programming in JavaScript

TBC

2.3 IIFE

TBC

3. Closure Interview Questions

TBC

4. Conclusion:

Congratulation your understanding about the closure is better than 80% of Front-end developers. Hope you like this article. Don’t forget to practice if you want to fully understand closure.

5. Reference:

Closure (computer programming) - Wikipedia In programming languages, a closure, also lexical closure or function closure, is a technique for implementing…en.wikipedia.org Closures - JavaScript | MDN A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the…developer.mozilla.org