Take a good look at the code snippet below, and make sure you understand it:

function outerFunction(){ var message = 'howdy'; function greet() {

console.log(message);

} return greet; }

If we now try to console.log the message variable below this code, we’ll get undefined, as message is a private variable of the outerFunction ’s scope, so you can not access it outside it scope.

console.log(message);

=> 'undefined'

However, we can call outerFunction() , which will return the greet function, and then store the result in the outerGreet variable.

var outerGreet = outerFunction();

When we then call outerGreet() , we magically get access to the message variable again, as we can see it being logged into the console.

outerGreet();

=> 'hodwy'

This is possible thanks to a closure, as the greet function remembered the surroundings it was created in. If the greet function was a person, it would think the following when it was created:

Hm…. My job is to log out the message variable. However, this variable isn’t defined within myself, but outside of myself. So I better remember it, so that I can use it later on, when I’m no longer in the same surroundings as I’m right now.

Peaking at the closure

The above concept might seem a bit abstract. However, it’s actually very concrete. Let’s peak into our greet function and have a look at the closure.

In the image below, I’ve pasted the code above into the console of a web page, and then accessed the outerGreet.prototype .

We’ll find the closure within a key called [[Scopes]] .

The Scopes key is wrapped in double square brackets because it’s an internal property. This means you can’t access it from the outside. Only internal methods can access this data.

The first scope is called Closures . It also mentions in parenthesis which scope it remembers the variables from: the outerFunction . And as you can see: it remembers a variable message which has the value howdy.

There are of course more things to learn about closures, but this is the core idea.