The Secret to Understanding Closures

Use console.dir() to view a closure

Understanding closures is an important advanced Javascript skill. Many resources have tried to explain it. Now, I will try to explain it, but this time we will understand it intrinsically, because I will literally show you what a closure is.

Be sure to understand execution contexts and scope chains before continuing.

Here is a quick synopsis of those concepts… When a function is called an execution context is created. Inside the execution context is the functions’ scope chain. A closure is part of the scope chain. A deep understanding of these topics is important to understanding closures so please click the links and understand them intrinsically. Then, let’s get started...

Closures

First, let’s try to understand closures in an abstract manner, using words.

If a function returns a function, or it returns an object with functions, those ‘inner functions’ that were returned have access to the variables of the ‘outer function,’ even after the outer function returns and is popped off the stack.

If you are in a job interview and and they ask you what a closure is, saying that it is when an inner function has access to the outer functions variables even after the outer function is popped off the stack — is the answer that will get you to the next level of the interview.

But what really is a closure?

Let’s try and define a closure more literally, again using words.

When an outer function is returned and popped off the stack, it puts all the variables of its own block scope into a closure and puts that closure in the scope chain of the inner function.

Here is an example…

const increaseNum = () => {
  let num = 0;
  let addOne = () => {
    num++;
    return num;
  }
return addOne;
}
const numCounter = increaseNum();
let one = numCounter();    // one now has a value of 1
let two = numCounter();    // two now has a value of 2
let three = numCounter();  // three now has a value of 3

Now, the Secret: console.dir()

Let’s break the above example down and literally look at its closure using Google Chrome’s console and the function console.dir().

const increaseNum = () => {
  let num = 0;
let addOne = () => {
    num++;
    return num;
  }
return addOne;
}
const numCounter = increaseNum();
console.dir(numCounter);

Copy the above code into your console and hit enter. You will see the numCounter is equal to the addOne function statement.

If you click the arrow to inspect what is in the addOne() function you will see an array like structure called ‘Scopes.’

When you click this arrow to inspect what is in it you will see all of the scopes in the ‘chain’ of the addOne function.

Notice that ‘Closure’ is an actual scope in this chain. It is not some theory or idea, it is a real thing that contains an object with key value pairs. If you then click the ‘Closure’ arrow to inspect you will see the key of ‘num’ set to ‘0.’

Now, if you do this after you set a variable to a call of the numCounter() function like below, and follow the above instructions to view the ‘Closure’ object again you will see how the value of ‘num’ has changed.

let one = numCounter();
console.dir(numCounter);

Notice the updated value of ‘num’ in the closure. Do it again…

let two = numCounter();
console.dir(numCounter);

Notice the updated value of ‘num’ again.

Here is another example with a returned object of functions. This is slightly more realistic example of what you might see in the real world. It is based off the example from the definitive guide to closures at JavascriptIsSexy.com.

const nameChanger = function(){
  let name = 'Joe Schmoe';
  return {
    getName : () => console.log(name),
    setName : newName => name = newName
  }
}
let name = nameChanger();

Copy and paste the above code into your console.

Now, on your own, run the function console.dir(name) after the last line of code above. Look at what it now shows in the directory and find the scopes and closures of both functions.

Then run name.setName(‘Jane Smith’), then console.dir(name) again, find the scope and the closures again and notice the updated values.

Using Closures in the Real World

Other tutorials will give you instructions on why we actually need closures (security, expediency, convenience, etc…), when they are useful (currying, in frameworks and libraries like jQuery, etc…), but for now, it is important to simply understand what a closure is.

It is important to know that it is a a real thing that you can view in the console. It important to understand how it gets created, and from where it gets its values. Because once you understand all this you will easily understand closures and recognize them when you see them in the real world.

And now that you know you can find closures with console.dir(), you can easily create your own examples for practice and look for them in other code examples.