Summary

Understanding closures in JavaScript is crucial for mastering the language, as they enable data privacy, stateful functions, and are integral to functional programming patterns, with significant implications for job prospects and salary.

Abstract

The article "Master the JavaScript Interview: What is a Closure?" emphasizes the importance of understanding closures for candidates applying for mid to senior-level JavaScript positions. Closures are a fundamental concept that allows access to an outer function's scope from an inner function, created every time a function is defined in JavaScript. They are essential for managing variable scope, sharing variables between functions, and are critical in both functional and object-oriented programming paradigms. The article explains that a lack of understanding of closures can lead to being perceived as inexperienced and may result in a lower salary or job level. It also provides practical examples of closures for data privacy, stateful functions, partial application, and currying, illustrating their common uses and the potential cost of not grasping this concept.

Opinions

Misunderstanding closures is a clear red flag indicating a lack of deep experience in JavaScript and other languages that use closures extensively, such as Haskell, C#, and Python.
Closures are likened to grammar rules in English, suggesting that coding without understanding closures is akin to speaking English without understanding its grammar—possible but likely to be awkward and prone to misunderstandings.
The article asserts that closures are the primary mechanism for enabling data privacy in JavaScript, which is an essential property for building robust software by adhering to the principle of programming to an interface rather than an implementation.
The author stresses the importance of being able to identify and articulate common use cases for closures, such as in event handlers, callback functions, partial applications, and currying, which are frequently encountered in functional programming.
The article suggests that understanding closures is not just academically important but has tangible career implications, potentially affecting job eligibility and salary by as much as $40k/year USD.
It is implied that mastery of closures is a key differentiator between junior and more experienced software developers, regardless of the length of one's software development career.

Master the JavaScript Interview: What is a Closure?

“Master the JavaScript Interview” is a series of posts designed to prepare candidates for common questions they are likely to encounter when applying for a mid to senior-level JavaScript position. These are questions I frequently use in real interviews.

I’m launching the series with the $40k question. If you answer this question wrong, there’s a good chance you won’t get hired. If you do get hired, there’s a good chance you’ll be hired as a junior developer, regardless of how long you’ve been working as a software developer. On average, junior developers get paid $40k/year less USD than more experienced software engineers.

Closures are important because they control what is and isn’t in scope in a particular function, along with which variables are shared between sibling functions in the same containing scope. Understanding how variables and functions relate to each other is critical to understanding what’s going on in your code, in both functional and object oriented programming styles.

The reason that missing this question is so disadvantageous in an interview is that misunderstandings about how closures work are a pretty clear red flag that can reveal a lack of deep experience, not just in JavaScript, but in any language that relies a lot on closures (Haskell, C#, Python, etc…).

Coding in JavaScript without an understanding of closures is like trying to speak English without an understanding of grammar rules — you might be able to get your ideas across, but probably a bit awkwardly.

You’ll also be vulnerable to misunderstandings when you’re trying to understand what somebody else wrote.

Not only should you know what a closure is, you should know why it matters, and be able to easily answer several possible use-cases for closures.

Closures are frequently used in JavaScript for object data privacy, in event handlers and callback functions, and in partial applications, currying, and other functional programming patterns.

If you can’t answer this question, it could cost you the job, or ~$40k/year.

Be prepared for a quick follow-up: “Can you name two common uses for closures?”

What is a Closure?

A closure is the 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.

To use a closure, define a function inside another function and expose it. To expose a function, return it or pass it to another function.

The inner function will have access to the variables in the outer function scope, even after the outer function has returned.

Using Closures (Examples)

Among other things, closures are commonly used to give objects data privacy. Data privacy is an essential property that helps us program to an interface, not an implementation. This is an important concept that helps us build more robust software because implementation details are more likely to change in breaking ways than interface contracts.

“Program to an interface, not an implementation.” Design Patterns: Elements of Reusable Object Oriented Software

In JavaScript, closures are the primary mechanism used to enable data privacy. When you use closures for data privacy, the enclosed variables are only in scope within the containing (outer) function. You can’t get at the data from an outside scope except through the object’s privileged methods. In JavaScript, any exposed method defined within the closure scope is privileged. For example:

Play with this in JSBin. (Don’t see any output? Copy and paste this HTML into the HTML pane.)

In the example above, the `.get()` method is defined inside the scope of `getSecret()`, which gives it access to any variables from `getSecret()`, and makes it a privileged method. In this case, the parameter, `secret`.

Objects are not the only way to produce data privacy. Closures can also be used to create stateful functions whose return values may be influenced by their internal state, e.g.:

const secret = msg => () => msg;

Available on JSBin. (Don’t see any output? Copy and paste this HTML into the HTML pane.)

In functional programming, closures are frequently used for partial application & currying. This requires some definitions:

Application: The process of applying a function to its arguments in order to produce a return value.

Partial Application: The process of applying a function to some of its arguments. The partially applied function gets returned for later use. Partial application fixes (partially applies the function to) one or more arguments inside the returned function, and the returned function takes the remaining parameters as arguments in order to complete the function application.

Partial application takes advantage of closure scope in order to fix parameters. You can write a generic function that will partially apply arguments to the target function. It will have the following signature:

partialApply(targetFunction: Function, ...fixedArgs: Any[]) =>
  functionWithFewerParams(...remainingArgs: Any[])

If you need help reading the signature above, check out Rtype: Reading Function Signatures.

It will take a function that takes any number of arguments, followed by arguments we want to partially apply to the function, and returns a function that will take the remaining arguments.

An example will help. Say you have a function that adds two numbers:

const add = (a, b) => a + b;

Now you want a function that adds 10 to any number. We’ll call it `add10()`. The result of `add10(5)` should be `15`. Our `partialApply()` function can make that happen:

const add10 = partialApply(add, 10);
add10(5);

In this example, the argument, `10` becomes a fixed parameter remembered inside the `add10()` closure scope.

Let’s look at a possible `partialApply()` implementation:

Available on JSBin. (Don’t see any output? Copy and paste this HTML into the HTML pane.)

As you can see, it simply returns a function which retains access to the `fixedArgs` arguments that were passed into the `partialApply()` function.

Your Turn

This post has a companion video post and practice assignments for members of EricElliottJS.com. If you’re already a member, sign in and practice now.

If you’re not a member, sign up today.

Explore the Series

Updates: July 2019 — Clarified intro to explain why answering this question wrong could cost you a job or a lot of money in salary.

Start your free lesson on EricElliottJS.com

Eric Elliott is a tech product and platform advisor, author of “Composing Software”, cofounder of EricElliottJS.com and DevAnywhere.io, and dev team mentor. He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

He enjoys a remote lifestyle with the most beautiful woman in the world.