JS interview #1: Closure and its Application in the easiest way possible.

Closure in JavaScript
Share this:

+1 like for your willingness to learn closure. Closures can seem really daunting, to begin with, I know they were for me. Once you get the hang of them, you’ll instantly be a much better coder.

Every Interviewer’s favorite topic is Closure. Let’s dive here on What is Closure and why do we need it. Before Jumping into Closure, first, let’s find what is Lexical Scoping.

Lexical Scoping :

Lexical Scoping is the popular convention of Variable scoping in many programming languages. Another approach is dynamic scoping which we will not discuss here. Javascript follows the Lexical scoping approach. In Lexical Scoping, the scope of a variable is based on the block where the variable is defined. It can only be called from the block of code where it is defined. Lexical scope is also known as static scope because the scope of a variable is fixed in a block in which it is defined.

In order to resolve variables, javascript starts at the innermost scope and searches outward until it finds the variable it was looking for. So, the Inner function can access the variable on outer function and global variable whereas outer function can only access its own variable and Global variable.

Let’s try with an example:

The output of the above code is 3.Here outer() function contains inner function inner()and when outer() is called inner function is executed which can access variable a inside outer function i.e outside inner function block.

This is the output:

Closure in Javascript :

In the code above, outer() function return the inner() function without being executed. It is common to think that since the outer function is already executed the variable must have been dropped so, the inner function using variable a in the last line of code must bring error. But, javascript functions form closure. Closure basically means the combo of function and it’s Lexical environment when it was created. In the lexical environment, there are variables that were in scope of the function when the closure was created. So, though the function outer() is already called, the closure allows us to use variable a in inner().

Let’s see a more beautiful example by Mozilla

This is not only good code to demonstrate closure, but also a good example to depict one of the major applications of closure. In the code above, we have a function that takes an argument and returns an inner function which also takes an argument.

In the code,

This creates a closure add5 and add10 when the makeAdder(5) and makeAdder(10) function is called. This returns a function and the lexical environment where x is 5 and 10 respectively. What I am trying to advocate is that both closures have separate lexical environment. So, it is not necessary that multiple closures should share the same lexical environment.

So, if this is a cool thing in javascript, what might be the possible example or application where you can use closure though not limited.

Application 1: Emulate Private scope for variable and functions:

Valuable usage of closure is a hiding variable. Unlike other languages where we can declare private and public variables and function, there is nothing like that to hide function and variable in Javascript. We can hide variables and function in javascript with the help of Closure.

For example:

Here, in code above speed is only accessible by accelerate otherwise, it is hidden. It is only exposed to accelerate. In general, the closure has allowed using hidden variables internally.

Another powerful example that present us the way function can be emulated private with help of closure is again taken here from Mozilla

In the example code above, three functions counter.increment, counter.value, and counter.decrement share the same lexical environment. The lexical environment is created when the self-invoking function (anonymous function) is called or executed. There are many functions and variables in anonymous functions. privateCounter variable and changeBy() function are private whereas the object method returned by the anonymous function is public. You can’t access either of these private members from outside the anonymous function. You can only access the private function and variable inside it with public functions.

Those three public functions are closures that share the same lexical environment. Thanks to JavaScript’s lexical scoping, they each have access to the privateCounter variable and the changeBy function.

Here, in the code 

Another example is in the counter

Here, we can see a live demo of the above code in this pen.

[codepen_embed height=”466″ theme_id=”dark” slug_hash=”JjdxNxz” default_tab=”js,result” user=”pravin-poudel”]See the Pen Counter Demo by Pravin Poudel (@pravin-poudel) on CodePen.[/codepen_embed]

Here, in the code counter variable is inaccessible from outside i.e it is a private variable that can be accessed only by updateClickCount which is the reference of the function returned. Since it is a private variable we can stay assured that it cannot be tempered from other parts of code as it isn’t exposed globally and vulnerably.

Application number 2: Closures are very important in functional programming as they are used for two concepts — partial application and currying:

Providing less argument to a function than the function has expected is a partial application of a function.

We call a function with fewer arguments than it expects and it returns a function that takes the remaining arguments. This is called a partial application of functions.

There is always a topic of discussion on Partial function and currying. I wanna diminish this with one line definition of both:

# Partial Application :
A function is partially applied when it is given a fewer argument than it expects and returns a new function expecting the remaining arguments. Partial application fixes one or more arguments inside the returned function
# Currying :
A function is curried when it takes one argument at a time and returns a new function expecting the next argument.

let’s write a small code first and we will approach how closure is involved in this partial application of a function:

The block of code below is an example code to demonstrate currying to the very same function addFourNumber() from the above code. Let’s look through the code and try to understand how currying is basically closure.

Before jumping to code, let’s remember first that the function is gonna accept each argument one at a time and returning a function each time until it has all the arguments and then return the value of the function body.

If you are confused and can’t understand bind() and had a hard time understanding a chunk of code above currying’s section, have a look at the makeAdder() code we went through earlier. Our previous code of adder is :

This is also a partially applied function example code which is the same as binding in the above code. Here, the code itself has makeAdder() function which returns closure of inner function.

The main benefit to closures is you can “partially apply” a function using a closure, then pass the partially applied function around, instead of needing to pass the non-applied function, and any data you’ll need to call it (very useful, in many scenarios).

In Other Words:
Closures are really useful when we are dealing with higher-order functions especially when we want to communicate state.

That’s it so when the Interview presents the code with the structure like above, remember what we learned here.

It’s what I have right now in my mind. I will update this if anything new comes to my mind. Let me know if I missed something.
Thanks for reading.

Don’ forget to follow me on Twitter. I post interesting codes and articles there to keep you updated and rejuvenated.
That’s it.

Have a good day, Take Care and Cheers !!!!


Related posts

Leave a Reply