We will also have a brief discussion about how JavaScript compiles and executes programs.

Lastly, we will have a look at how you can use lexical scope to explain undeclared variable errors or reference errors.

Without further ado, let's get started.

Table of Contents

• How does JavaScript execute programs?
• How JavaScript Parses/Compiles and Executes Code
• Understanding Syntax Error
• Understanding Variable/Function Hoisting
• What is lexical scope?
• Understanding Lexical Scope
• Summary

How Does Javascript Execute Programs?

Before understanding how JavaScript executes a code/program, we will first explore the different steps that are involved in any compilation process from a compiler theory perspective.

For any language, the compiler performs the following operations:

Tokenizing/Lexing

In this process, the entire program is divided into keywords which are called tokens. For example, consider the following statement: let temp = 10 – once the tokenization is applied it will divide this statement into keywords as follows: let, temp, =, 10.

Lexing and tokenizing terms are used interchangeably, but there is a subtle difference between them. Lexing is a process of tokenization but it also checks if it needs to be considered as a distinct token. We can consider Lexing to be a smart version of tokenization.

Parsing

This is a process of collecting all the tokens generated in the previous step and turning them into a nested tree structure that grammatically represents the code.

This tree structure is called an abstract syntax tree (AST).

Code Generation

This process converts the AST into machine-readable code.

So this was a brief explanation of how the compiler works and generates a machine-readable code.

Of course there are more steps apart from the ones that are mentioned above. But explaining the other steps/phases of the compiler is out of scope for this article.

The most important observation that we can make about JS execution is that to execute code, it goes through two phases:

1. Parsing
2. Execution

Before we understand lexical scope, it is important to first understand how JavaScript executes a program. In the next sections, we will dive deeper into how these two phases work.

How JavaScript Parses/Compiles and Executes Code

Parsing phase

Let's first talk about the parsing phase. In this phase, the JavaScript engine goes through the entire program, assigns variables to their respective scopes, and also checks for any errors. If it finds an error then the execution of the program is stopped.

In the next phase, the actual execution of the code takes place.

To understand this in more detail we will look into the following two scenarios:

• Syntax Error
• Variable hoisting

Syntax Error

To show you how JS first parses the program and then executes it, the best and simplest way is to demonstrate the behavior of a syntax error.

Consider the following buggy code:

const token = "ABC";
console.log(token);

//Syntax error:
const newToken = %((token);

The above program will generate a syntax error at the last line. This is what the error will look like:

Uncaught SyntaxError: Unexpected token '%'

If you look at the error, the JavaScript engines did not execute the console.log statement. Instead, it went through the entire program in the following manner:

• Line 1, found that there was a variable declaration and definition. So it stored the reference of the token variable in the current scope, that is global scope.
• Line 2, JavaScript engine discovered that the token variable is being referenced. It first referred to the current scope to check if the token variable was present or not. If it’s present then it's referred to token variable’s declaration.
• Line 3, the engine discovered that newToken variable was being declared and defined. It checked if any variable with the name newToken was present in the current scope or not. If yes, then throws a reference error. If no, then stores the reference of this variable in the current scope.
• At the same line, the engine also discovered that it was trying to refer to a variable %((token). But it found that it started with % and variable names cannot start with reserved keywords, so it threw a syntax error.

Variable/Function Hoisting

Hoisting is a mechanism via which all the variables present in their respective scopes are hoisted, that is made available at the top.

Now let's take a look at the example below that will show you that hosting happens during the parsing phase and then execution happens:

doSomething();

function doSomething(){
    console.log("How you doing?");
}

In the above program, the engine goes through the program in the following manner:

• Line 1, JavaScript engine encountered a function called doSomething. It searched to see if doSomething was available in the current scope. If yes then it refers to the function or else it throws a reference error.
• It turned out that during the parsing phase, the engine found the function doSomething line to be present in the current scope. Therefore, it added this variable’s reference in the current scope and made it available throughout the entire program.
• Finally, the doSomething function printed out the string How you doing?.

As we can see from the above explanation, the code was first parsed so as to generate some intermediary code that makes sure the variable/function (that is doSomething) referenced in the current scope is made available.

In the next phase, JavaScript knows about the function and so starts to execute.

From the above examples, we can safely conclude that the JavaScript engine does the following things before executing the code:

1. Parses the code.
2. Generates the intermediary code that gives a description of the variables/functions that are available.
3. Using the above intermediary code, it then starts the execution of the program.

What is Lexical Scope?

The process of determining the scopes of the variables/functions during runtime is called lexical scoping. The word lexical comes from the lexical/tokenization phase of the JS compiler steps.

During runtime, JavaScript does these two things: parsing and execution. As you learned in the last section, during the parsing phase the scopes of the variables/functions are defined. That is why it was important to first understand the parsing phase of the code execution since it lays down the foundation for understanding lexical scope.

In laymen's terms, the parsing phase of the JavaScript engine is where lexical scoping takes place.

Now that we know the basics of it, let's go through some of the main characteristics of lexical scope:

First of all, during the parsing phase, a scope is assigned/referenced to a variable where it is declared.

For example, consider a scenario where a variable is referenced in the inner function and its declaration is present in the global scope. In this case the inner variable is assigned with the outer scope, that is the global scope.

Scope assigned illustration

Then, while assigning scope to a variable, the JavaScript engine checks its parent scopes for the availability of the variable.

If the variable is present then that parent scope is applied to the variable. If a variable is not found in any of the parent scopes then a reference error is thrown.

Take a look at the below illustration that demonstrates how a variable’s scope is searched.

JS engine successfully finding a variable by going through each scope

Here is an illustration that represents the JS engine trying to find a variable that does not exists in any scope:

JS engine throwing reference error

Understanding Lexical Scope

In the above section, we defined what lexical scope is. We also understood what characteristics it has.

In this section, we are going to understand lexical scope with the help of an example. As they say, it's always easier to understand difficult topics by looking at examples from real-life, day-to-day code. Let’s get started.

The example that we are going to use involves coloring areas of our code that have similar scopes. This may sound confusing, but let me demonstrate this with a simple illustration.

Understanding lexical scope with a coloring example

Let's take a step back and understand what is going on in this illustration.

We have the following things in our program:

• empData: Array of objects.
• allPositions: Array of strings that consists of all the employee positions.
• Lastly, we have a console statement that prints out allPositions variables.

Now let's take a look at what happens in the parsing phase of this program:

• The engine starts with the first line, and it encounters a variable declaration empData.
• The engine then checks if the empData is available in the current scope or not. Since there is no similar variable found, it checks the existence of this variable in its parent scope.
• The engine will stop its search over here since there is no scope available and also the current scope is the global scope.
• Next, the engine assigns an undefined value to the empData during the parsing phase so that once any nested scope tries to reference this variable, then it can be used.
• The right-hand side of this assignment operator is evaluated during the execution phase of the program.
• In a similar manner, the engine does the same for the allPositions variable and assigns it an undefined value.
• But on the right-hand side, we are also referencing the empData variable. At this stage, the engine checks if this variable is available in the current scope. Since it is available, it refers to the same (that is, present in the global scope).
• The engine is still on the right-hand side since it found out that there is an arrow function inside of the map function. Since the engine has encountered the function definition, it creates a new scope. In the gif, this is number 2.
• Since this is a new scope, we are going to color code it black.
• This arrow function has an argument of data and returns data.position. In the parsing phase, the engine hoists all the variables that are required by referencing the variables present in the current scope as well as in its parent scope.
• Inside this function, the data variable is referenced so the engine checks if the current scope has this variable. Since the variable is present in the current scope, it refers to the same.
• Once the engine encounters the } brace, it moves out of the functional scope.
• Finally, at the end of the program, we have a console statement that displays allPositions variables. Since it is referencing the allPositions variable, it searches in the current scope (that is global scope). Since it is found, it refers to the same in the console statement.

Summary

In this article, we learned about what lexical scope means, and learned how it works by looking at a simple coloring example.

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

So this article will explain lexical scope by first examining the meaning of “lexical” and “scope”.

So, let’s get it started by understanding the term “scope”.

What exactly is Scope?

Scope refers to the area where an item (such as a function or variable) is visible and accessible to other code.

Note:

• Scope means area, space, or region.
• Global scope means global space or a public space.
• Local scope means a local region or a restricted region.

Here's an example:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Try it on StackBlitz

In the snippet above, we defined the fullName variable in the global scope. This means that it is visible and accessible globally to all code within the script.

But we defined writeName() within the sayName() function, so it is locally scoped to sayName().

In other words, writeName() is locally visible and accessible only to code in the sayName() function.

Keep in mind that whenever the writeName() function gets invoked, the computer will not go straight to the global scope to call the fullName variable. Instead, it must sequentially go through the scope chain to look for fullName.

What is a Scope Chain?

A scope chain refers to the unique spaces that exist from the scope where a variable got called to the global scope.

Here's an example:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

In the snippet above, observe that the fullName variable got called from the writeName() function's scope.

Therefore, the scope chain that exists from the variable’s call to the global scope is:

writeName() scope ---> sayName() scope ---> profile() scope ---> global scope

In other words, there are four (4) spaces from fullName’s invocation scope to its lexical scope (the global scope in this instance).

Note: The global scope is the last link in JavaScript's scope chain.

How Does the Scope Chain Work?

JavaScript's scope chain determines the hierarchy of places the computer must go through — one after the other — to find the lexical scope (origin) of the specific variable that got called.

For instance, consider the code below:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

In the snippet above, whenever the profile() function gets invoked, the computer will first invoke the sayName() function (which is the only code in the profile() function).

Secondly, the computer will invoke the writeName() function (which is the only code in the sayName() function).

At this point, since the code in writeName() instructs the computer to call and return the fullName variable's content, the computer will call fullName. But it will not go directly to the global scope to call fullName.

Instead, the computer must go step-by-step through the scope chain to look for the lexical scope of fullName.

So, here are the sequential steps the computer must take to locate fullName's lexical scope:

1. Firstly, the computer will check if fullName got defined locally within the writeName() function. But it will find no fullName definition there, so it moves up to the next scope to continue its quest.
2. Secondly, the computer will search for fullName's definition in sayName() (the next space in the scope chain). Still, it doesn't find it there, so it climbs up the ladder to the next scope.
3. Thirdly, the computer will search for fullName's definition in the profile() function. Yet still, fullName is not found there. So the computer goes forward to seek fullName's lexical scope in the next region of the scope chain.
4. Fourthly, the computer goes to the global scope (the following scope after profile()). Fortunately, it finds fullName's definition there! Therefore, it gets its content ("Oluwatobi Sofela") and returns it.

Time to Practice with Scope 🤸‍♂️🏋️‍♀️🏊‍♀️

Consider the script below. Which of the three fullName variables will the computer call?

// First fullName variable defined in the global scope:
const fullName = "Oluwatobi Sofela";

// Nested functions containing two more fullName variables:
function profile() {
  const fullName = "Tobi Sho";
  function sayName() {
    const fullName = "Oluwa Sofe";
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Will the computer call the first, second, or third fullName variable?

Note: You will benefit much more from this tutorial if you attempt the exercise yourself.

If you get stuck, don’t be discouraged. Instead, review the lesson and give it another try.

Once you’ve given it your best shot (you’ll only cheat yourself if you don’t!), go ahead to see the correct answer below.

Did you get it right?

Out of the three fullName definitions present in the script above, the computer will call and return the one defined in the sayName() function.

sayName()’s fullName variable will get called because sayName() is the scope inside which the computer will first find a fullName definition.

Therefore, when profile() gets invoked, the returned value will be "Oluwa Sofe".

Try it on StackBlitz

Some things to keep in mind:

• Suppose the computer did not find fullName's definition in any of the scopes. In such a case, the computer will return Uncaught ReferenceError: fullName is not defined.
• The global scope is always the last scope of any JavaScript scope chain. In other words, the global scope is where all searches will end.
• An inner (child) scope has access to its parent (outer) scope, but an outer scope does not have access to its child scope.
  For instance, in the snippet above, writeName() can access codes inside any of its parent scope (sayName(), profile(), or the global scope).
  However, neither sayName(), profile(), nor the global scope can access any of writeName()'s codes.

Quick Review of Scope So Far

JavaScript scope is all about space.

So next time your partner calls you to their private scope, remember they are inviting you to their private space 😜!

When you get there, be sure to ask them about their best lexical game...

But what does lexical mean, I hear you ask? Let’s find out below.

What Does Lexical Mean?

Lexical refers to the definition of things.

Anything related to creating words, expressions, or variables is termed lexical.

For instance, a scrabble game is a lexical activity because it relates to the creation of words.

Also, someone whose job relates to linguistics (the study of languages) has a lexical career.

Note: Another name for a dictionary is a lexicon. In other words, a lexicon is a dictionary where words are listed and defined.

So now that we know what scope and lexical mean, we can talk about lexical scope.

What is Lexical Scope in JavaScript?

Lexical scope is the definition area of an expression.

In other words, an item's lexical scope is the place in which the item got created.

Note:

• Another name for lexical scope is static scope.
• The place an item got invoked (or called) is not necessarily the item's lexical scope. Instead, an item's definition space is its lexical scope.

Example of Lexical Scope

Consider the code below:

// Define a variable in the global scope:
const myName = "Oluwatobi";

// Call myName variable from a function:
function getName() {
  return myName;
}

In the snippet above, notice that we defined the myName variable in the global scope and called it in the getName() function.

Question: Which of the two spaces is myName’s lexical scope? Is it the global scope or the getName() function’s local scope?

Answer: Remember that lexical scope means definition space — not invocation space. Therefore, myName’s lexical scope is the global scope because we defined myName in the global environment.

Another example of lexical scope

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

Question: Where is myName’s lexical scope?

Answer: Notice that we created and called myName within getName(). Therefore, myName’s lexical scope is getName()’s local environment because getName() is myName’s definition space.

How Does Lexical Scope Work?

A JavaScript expression’s definition environment determines the code permitted to access it.

In other words, only code within an item's lexical scope can access it.

For instance, consider the code below:

// Define a function:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return:
Uncaught ReferenceError: lastName is not defined

Notice that the invocation of displayFullName() in the snippet above returned an Uncaught ReferenceError. The error returned because only code within an item's lexical scope can access the item.

Therefore, neither the displayFullName() function nor its internal code can access the lastName variable because lastName got defined in a different scope.

In other words, lastName’s lexical scope is different from that of displayFullName().

lastName’s definition space is showLastName() while displayFullName()’s lexical scope is the global environment.

Now, consider this other code below:

function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return:
"Oluwatobi Sofela"

In the snippet above, displayFullName() successfully returned "Oluwatobi Sofela" because displayFullName() and showLastName() are in the same lexical scope.

In other words, displayFullName() could invoke showLastName() because the two functions are both defined in the global scope.

Note:

• In example 2 above, displayFullName() did not gain access to showLastName()'s lastName variable.
  Instead, displayFullName() invoked showLastName() — which then returned the content of its lastName variable.
• An alternative to the lexical scope is the dynamic scope — but it rarely gets used in programming. Only a few languages, like bash, use dynamic scope.

Wrapping it up

Any time you hear lexical, think definition.

So, the lexical scope of a car, variable, phone, function, or swimsuit refers to its definition region.

Overview

This article discussed what lexical scope means in JavaScript. We also looked at why it is an important programming concept.

Thanks for reading!

In JavaScript, people often confuse closures with lexical scope.

Lexical scope is an important part of closures, but it is not a closure by itself.

Closures are an advanced concept that is also a frequent topic of technical interviews.

You should have a foundational understanding of functions before attempting to understand closures.

After reading this article, I hope I will have helped you learn the following:

• The difference between lexical scope and closures.
• Why closures require lexical scope.
• How to give an example of a closure during the interview process.

What is Lexical Scope in JavaScript?

Lexical scope describes how nested (also known as "child") functions have access to variables defined in parent scopes.

const myFunction = () => {
     let myValue = 2;
     console.log(myValue);

     const childFunction = () => {
          console.log(myValue += 1);
     }

     childFunction();
}

myFunction();

In this example, childFunction has access to the variable myValue which is defined in the parent scope of myFunction.

The lexical scope of childFunction allows access to the parent scope.

What is a Closure in JavaScript?

w3Schools.com offers a great definition of what a closure is:

A closure is a function having access to the parent scope, even after the parent function has closed.

Let's note the first part of the sentence before the comma:

...a function having access to the parent scope

That's describing lexical scope!

But we need the second part of the definition to give an example of a closure...

...even after the parent function has closed.

Let's look at an example of a closure:

const myFunction = () => {
     let myValue = 2;
     console.log(myValue);

     const childFunction = () => {
          console.log(myValue += 1);
     }

     return childFunction;
}

const result = myFunction();
console.log(result);
result();
result();
result();

Copy the example code above and try it out.

Let's break down what is happening...

In this revision, myFunction returns childFunction instead of calling it.

Therefore, when result is set equal to myFunction(), the console statement inside myFunction is logged, but not the statement inside childFunction.

childFunction is not called into action.

Instead, it is returned and held in result.

In addition, we need to realize that myFunction has closed after it was called.

The line with console.log(result) should show in the console that result now holds the anonymous function value that was childFunction.

Now, when we call result(), we are calling the anonymous function that was assigned to childFunction.

As a child of myFunction, this anonymous function has access to the myValue variable inside myFunction even after it has closed!

The closure we created now allows us to continue to increase the value of the myValue variable every time we call result().

Take Your Time with Closures

Closures are considered to be an advanced concept for good reason.

Even with a step-by-step breakdown of what a closure is, this concept can take time to understand.

Don't rush your understanding and don't be hard on yourself if it doesn't make sense at first.

When you fully understand closure, you may feel like Neo when he sees the Matrix. You'll see new code possibilities and realize they were there all along!

I'll leave you with a tutorial on closures from my YouTube channel. I dive a little deeper and provide a few more examples of closures to build on the discussion in this article.

Closures – many of you JavaScript devs have probably heard this term before. When I started my journey with JavaScript, I encountered closures often. And I think they're one of the most important and interesting concepts in JavaScript.

You don't think they're interesting? This often happens when you don’t understand a concept – you don’t find it interesting. (I don’t know if this happens to you or not, but this is the case with me).

So in this article, I will try to make closures interesting for you.

Before going into the world of closures, let’s first understand lexical scoping. If you already know about it, skip the next part. Otherwise jump into it to better understand closures.

Lexical Scoping

You may be thinking – I know local and global scope, but what the heck is lexical scope? I reacted the same way when I heard this term. Not to worry! Let’s take a closer look.

It’s simple like other two scopes:

function greetCustomer() {
    var customerName = "anchal";
    function greetingMsg() {
      console.log("Hi! " + customerName); // Hi! anchal
    }
   greetingMsg();
}

You can see from the above output that the inner function can access the outer function's variable. This is lexical scoping, where the scope and value of a variable is determined by where it is defined/created (that is, its position in the code). Got it?

I know that last bit might have confused you. So let me take you deeper. Did you know that lexical scoping is also known as static scoping? Yes, that's its other name.

There is also dynamic scoping, which some programming languages support. Why have I mentioned dynamic scoping? Because it can help you better understand lexical scoping.

Let’s look at some examples:

function greetingMsg() {
  console.log(customerName);// ReferenceError: customerName is not defined
}

function greetCustomer() {
   var customerName = "anchal";
   greetingMsg();
}

greetCustomer();

Do you agree with the output? Yes, it will give a reference error. This is because both functions don’t have access to each other’s scope, as they are defined separately.

Let’s look at another example:

function addNumbers(number1) {
  console.log(number1 + number2);
}

function addNumbersGenerate() {
  var number2 = 10;
  addNumbers(number2);
}

addNumbersGenerate();

The above output will be 20 for a dynamically scoped language. Languages that support lexical scoping will give referenceError: number2 is not defined. Why?

Because in dynamic scoping, searching takes place in the local function first, then it goes into the function that called that local function. Then it searches in the function that called that function, and so on, up the call stack.

Its name is self explanatory – “dynamic” means change. The scope and value of variable can be different as it depends on from where the function is called. The meaning of a variable can change at runtime.

Got the gist of dynamic scoping? If yes, then just remember that lexical scoping is its opposite.

In lexical scoping, searching takes place in the local function first, then it goes into the function inside which that function is defined. Then it searches in the function inside which that function is defined and so on.

So, lexical or static scoping means the scope and value of a variable is determined from where it is defined. It doesn’t change.

Let’s again look at the above example and try to figure out the output on your own. Just one twist – declare number2 at the top:

var number2 = 2;
function addNumbers(number1) {
  console.log(number1 + number2);
}

function addNumbersGenerate() {
  var number2 = 10;
  addNumbers(number2);
}

addNumbersGenerate();

Do you know what the output will be?

Correct – it’s 12 for lexically scoped languages. This is because first, it looks into an addNumbers function (innermost scope) then it searches inwards, where this function is defined. As it gets the number2 variable, meaning the output is 12.

You may be wondering why I have spent so much time on lexical scoping here. This is a closure article, not one about lexical scoping. But if you don’t know about lexical scoping then you will not understand closures.

Why? You will get your answer when we look at the definition of a closure. So let’s get into the track and get back to closures.

What is a Closure?

Let’s look at the definition of a closure:

Closure is created when an inner function has access to its outer function variables and arguments. The inner function has access to –

1. Its own variables.
2. Outer function's variables and arguments.
3. Global variables.

Wait! Is this the definition of a closure or lexical scoping? Both definitions look the same. How they are different?

Well, that's why I defined lexical scoping above. Because closures are related to lexical/static scoping.

Let’s again look at its other definition that will tell you how closures are different.

Closure is when a function is able to access its lexical scope, even when that function is executing outside its lexical scope.

Or,

Inner functions can access its parent scope, even after the parent function is already executed.

Confused? Don't worry if you haven't yet gotten the point. I have examples to help you better understand. Let’s modify the first example of lexical scoping:

function greetCustomer() {
  const customerName = "anchal";
  function greetingMsg() {
    console.log("Hi! " + customerName);
  }
  return greetingMsg;
}

const callGreetCustomer = greetCustomer();
callGreetCustomer(); // output – Hi! anchal

The difference in this code is that we are returning the inner function and executing it later. In some programming languages, the local variable exists during the function’s execution. But once the function is executed, those local variables don’t exist and they will not be accessible.

Here, however, the scene is different. After the parent function is executed, the inner function (returned function) can still access the parent function's variables. Yes, you guessed right. Closures are the reason.

The inner function preserves its lexical scope when the parent function is executing and hence, later that inner function can access those variables.

To get a better feel for it, let’s use the dir() method of the console to look into the list of the properties of callGreetCustomer:

console.dir(callGreetCustomer);

From the above image, you can see how the inner function preserves its parent scope (customerName) when greetCustomer() is executed. And later on, it used customerName when callGreetCustomer() was executed.

I hope this example helped you better understand the above definition of a closure. And maybe now you find closures a bit more fun.

So what next? Let’s make this topic more interesting by looking at different examples.

Examples of closures in action

function counter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const countValue = counter();
countValue(); // 0
countValue(); // 1
countValue(); // 2

Every time you call countValue, the count variable value is incremented by 1. Wait – did you think that the value of count is 0?

Well, that would be wrong as a closure doesn’t work with a value. It stores the reference of the variable. That’s why, when we update the value, it reflects in the second or third call and so on as the closure stores the reference.

Feeling a bit clearer now? Let’s look at another example:

function counter() {
  let count = 0;
  return function () {
    return count++;
  };
}

const countValue1 = counter();
const countValue2 = counter();
countValue1();  // 0
countValue1();  // 1
countValue2();   // 0
countValue2();   // 1

I hope you guessed the right answer. If not, here is the reason. As countValue1 and countValue2, both preserve their own lexical scope. They have independent lexical environments. You can use dir() to check the [[scopes]] value in both the cases.

Let’s look at a third example.

This one's a bit different. In it, we have to write a function to achieve the output:

const addNumberCall = addNumber(7);
addNumberCall(8) // 15
addNumberCall(6) // 13

Simple. Use your newly-gained closure knowledge:

function addNumber(number1) {
  return function (number2) {
    return number1 + number2;
  };
}

Now let’s look at some tricky examples:

function countTheNumber() {
  var arrToStore = [];
  for (var x = 0; x < 9; x++) {
    arrToStore[x] = function () {
      return x;
    };
  }
  return arrToStore;
}

const callInnerFunctions = countTheNumber();
callInnerFunctions[0]() // 9
callInnerFunctions[1]() // 9

Every array element that stores a function will give you an output of 9. Did you guess right? I hope so, but still let me tell you the reason. This is because of the closure's behavior.

The closure stores the reference, not the value. The first time the loop runs, the value of x is 0. Then the second time x is 1, and so on. Because the closure stores the reference, every time the loop runs it's changing the value of x. And at last, the value of x will be 9. So callInnerFunctions[0]() gives an output of 9.

But what if you want an output of 0 to 8? Simple! Use a closure.

Think about it before looking at the solution below:

function callTheNumber() {
  function getAllNumbers(number) {
    return function() {
      return number;
    };
  }
  var arrToStore = [];
  for (var x = 0; x < 9; x++) {
    arrToStore[x] = getAllNumbers(x);
  }
  return arrToStore;
}

const callInnerFunctions = callTheNumber();
console.log(callInnerFunctions[0]()); // 0
console.log(callInnerFunctions[1]()); // 1

Here, we have created separate scope for each iteration. You can use console.dir(arrToStore) to check the value of x in [[scopes]] for different array elements.

That’s it! I hope you can now say that you find closures interesting.

To read my other articles, check out my profile here.