Scopes and closures, one of the most iconic duos of JavaScript are vital to implementing your code in both functional and object-oriented programming styles. But what exactly do scopes and closures have to do with each other? Let’s start simple with scopes. The scope tells you what is visible and where in your code. We start with the two most basic scopes: global and local. The global scope refers to anything outside of the Function, and local scopes refer to the scope that is local to a function.

Example

The variable firstName is in the global scope, whereas the variable a is local to the function addStuff and is therefore in the local scope.

Local Scope

The local scope refers to variables that are declared within the body of a Function. Variables declared in the local scope are only available within the Function itself and any other functions declared within it.

Nested Scope

Functions can be declared or defined within other Functions, which creates nested scopes. In the below example feeling is declared within happyDays(), but is accessible within the child scope of sadDays().

Example

But if I try to invoke happyDays(), we will get a ReferenceError because parent scopes do not have access to variables defined within children scopes.

Nesting functions inside of other functions allows us to create privacy, meaning we will have variables declared that are not accessible in other parts of the application.

What is a closure?

According to MDN web docs, “a closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)” (MDN, ‘Closures’). To put it simply, a closure occurs when a Function definition contains references to variables in its parent scope. In ‘lexical scoping’, an inner function has access to the outer function’s scope. Lexical scoping refers to where variables can be accessed. This accessibility is determined by the position of the variables in the source code. Closures are created every time a function is created in JavaScript. Review the following example:

The function healthyPerson creates a local variable named healthyFoods and a function healthy. The healthy function is an inner function that is defined inside of healthyPerson and is only available within the body of healthyPerson function. Because inner functions have access to variables of outer functions, healthy() can access the variable fullName declared in the parent function, healthyPerson(). The function healthy(), maintains a reference to its lexical environment, which is where the variable fullName exists. So when healthyDude() is invoked, the variable fullName is still available for use.

So, why should you use closures?

Closures are vital to computer programming because they allow us to create private data. When using closures for data privacy, variables within the closures (inner functions) are only in scope within the outer function. So if you have some form of private user data located within an inner function, you cannot access 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” (Elliott, 2020).

I hope you enjoyed my introduction to scopes and closures!

References
Elliott, E. (2020, August 26). Master the JavaScript Interview: What is a Closure? Retrieved November 17, 2020, from https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
MDN. (2020). Closures. Retrieved November 17, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures