Explaining Closure To A Child

Playing with marbles

The placement of things

Imagine you have some cloth bags and some marbles. One bag is red and another is blue and both are very dark. You put some marbles in each bag and leave some of the marbles on the ground. Finally you put the blue bag into the red bag.

Now let's examine what we have. On the ground there are some marbles and a red bag. Inside the red bag are some marbles and a blue bag. Additional marbles are sitting inside the blue bag.

The relationship of things

The marbles sitting directly on the ground do not see the marbles in the red bag or the marbles in the blue bag. The contents of each bag are only immediately aware of what is in their immediate bag. This means the marbles in the red bag are aware they are in a bag and aware of their neighbor, the blue bag. The marbles in the blue bag are aware they are in the blue bag, which is then in another ( red) bag.

Let's review the status of things so far. The blue bag is placed inside the red bag. The marbles are aware of their immediate container, if their container contains a bag, or if they have no container at all.

The visibility of things

The marbles outside the red bag are pretty helpless on their own. They know there is a red bag but cannot see inside the darkness of the bag. The marbles in the red bag cannot immediately see outside to the marbles on the ground unless they try really hard. The marbles in the red bag cannot see into the darkness of inside the blue bag.

The marbles in the blue bag can only immediately see the marbles in the blue bag, but if they try really hard they can see the marbles in the red bag. If these marbles in the blue bag try harder still they can even see the marbles sitting directly on the ground outside of any bags.

Interacting with the marbles

You are a child who wishes to play with the marbles, but there are only a few marbles on the ground. The rest of the marbles are in the cloth bags. All that can be moved around are the marbles on the ground and the red bag. If you wish to move the marbles in the red bag you would have to reach into the red bag and pull those marbles out.

Relating marbles to JavaScript

Defining the terms

Functions are like bags. They store instructions and provide scope. The scope they provide is called function scope. The scope outside of any function is called global scope.

Data and containers, such as functions and objects, can be declared with the var keyword. The scope where they are declared determines where they live and what can see them.

Local references are immediately known. References that are declared in higher scopes must be identified. The scope chain is the progression and order of scopes that must be traveled to determine where a reference is defined.

Relating the concepts

Let's go back to the marbles and bags. The marbles and bags each represent references. The bags are functions and the marbles are data, objects, or arrays. The red bag is a function declared in the global scope. The blue bag is a function declared in the red bag.

The marbles in the red bag can see the marbles in the global scope, the marbles on the ground, but it takes some effort. This effort is progressing the scope chain. The marbles declared in the blue bag require additional effort to see the marbles in the global scope. This because they have an extra step in the scope chain to travel.

Wrapping it up

Since a lower scope can see variables living, or declared, in a higher scope those variables can be used in lower scopes. Crossing scope boundaries like this is called closure.

Variables in a higher scope are widely available to lower scopes. These variables can be changed from lower scopes, and this is sometimes referred to as a side effect.

Higher scopes cannot see into lower scopes, but lower scopes can see into higher scopes. A closure can be used to provide a reference in a high scope to access of all references in a lower scope.

A small code example

A simple code example demonstrating scope with similar colors to the marble analogy.

  1. 1
  2. 2
  3. - 3
  4. 4
  5. - 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  1. var globalNumber = 10,
  2. otherNumber = 0,
  3. outer = function () {
  4. var a = 20,
  5. inner = function () {
  6. var b = 30;
  7. otherNumber = b; //global accessing a reference in a lower scope
  8. return a + b + globalNumber;
  9. };
  10. return inner();
  11. };
  12. return outer(); //returns 60