JavaScript Closures

❮ Previous Next ❯

JavaScript variables can be part of either the local or global scope.

You can turn global variables into local (private) ones by using closures.

Global Variables

A function can access all variables defined inside the function, like this:

However, a function can also reach variables that are declared outside of the function, as demonstrated here:

In the previous instance, the variable a is a global variable.

On a webpage, the page itself owns global variables.

Global variables are accessible and modifiable by any other scripts on the webpage.

In the initial example, the variable a is a local variable.

A local variable is limited to the function where it's created. It stays private within that function and isn't accessible to other functions or scripts.

Variables that have the same name but are used globally and locally are distinct. Changing the value of one variable does not affect the other.

Note

Variables made without using a declaration keyword (such as var,let, or const) are always considered global, even if they are created within a function.

Variable Lifetime

Global variables last as long as the webpage exists, such as when you move to a different page or shut down the window.

Temporary data inside a function doesn't last long. It gets made when the function starts and disappears when the function ends.

A Counter Dilemma

Imagine you need a variable to keep track of something, and you want this counter to be accessible to all functions.

You can employ a global variable and afunction to increment the counter.

The issue with the solution mentioned is that the counter can be altered by any code on the page without needing to invoke the add() function.

The count should only be accessible within the add() function to avoid interference from other parts of the code.

The issue occurred because we showed the global counter instead of the local counter.

We can eliminate the overall counter and retrieve the local counter by allowing the function to provide it:

The function didn't succeed because we reset the counter within the function each time it was called.

This issue can be addressed using a JavaScript inner function.

JavaScript Nested Functions

All functions can reach the global scope.

Actually, in JavaScript, every function can reach the scope that is "above" it.

JavaScript allows you to use nested functions. These nested functions can access the scope that is "above" them.

In this instance, the inner function called plus() can use the counter variable from the outer function.

This might have fixed the problem with the counter if we could access the plus() function externally.

We must figure out how to make sure counter = 0 runs only one time

We require an ending.

JavaScript Closures

Do you recall self-invoking functions? What is the purpose of this function?

Example Explained

The term add is given the value that comes from a function calling itself.

The self-invoking function runs just one time. It initializes the counter to zero (0) and gives back a function expression.

In this manner, 'add' transforms into a function. What's remarkable is its ability to reach the counter in the parent scope.

This is known as a JavaScript closure. It allows a function to have "private" variables.

The counter is secured within the boundaries of an unnamed function, and its value can only be altered through the add function.

A closure is a function that can still use information from the surrounding code, even after that code has finished running.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>A function can use variables that are defined within the function itself.</p>
    <p id="demo"></p>
    <script>
      myFunction();

      function myFunction() {
        let a = 4;
        document.getElementById("demo").innerHTML = a * a;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>A function is able to use variables that are defined outside of it.</p>
    <p id="demo"></p>
    <script>
      let a = 4;
      myFunction();

      function myFunction() {
        document.getElementById("demo").innerHTML = a * a;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Variables made without using var, let, or const are always global, even if they're made inside a function.:</p>
    <p id="demo"></p>
    <script>
      myFunction();
      document.getElementById("demo").innerHTML = a * a;

      function myFunction() {
        a = 4;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Function Closures</h2>
    <p>Counting with a global variable.</p>
    <p id="demo"></p>
    <script>
      // Initiate counter
      let counter = 0;
      // Function to increment counter
      function add() {
        counter += 1;
      }
      // Call add() 3 times
      add();
      add();
      add();
      // The counter should now be 3
      document.getElementById("demo").innerHTML = "The counter is: " + counter;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Function Closures</h2>
    <p>Counting with a local variable.</p>
    <p id="demo"></p>
    <script>
      // Initiate counter
      let counter = 0;
      // Function to increment counter
      function add() {
        let counter = 0;
        counter += 1;
      }
      // Call add() 3 times
      add();
      add();
      add();
      // The result is not 3 because you mix up the globaland local counter
      document.getElementById("demo").innerHTML = "The counter is: " + counter;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Closures</h2>
    <p>Counting with a local variable.</p>
    <button type="button" onclick="myFunction()">Count!</button>
    <p id="demo">0</p>
    <script>
      // Function to increment counter
      function add() {
        let counter = 0;
        counter += 1;
        return counter;
      }
      // Trying to increment the counter
      function myFunction() {
        document.getElementById("demo").innerHTML = add();
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Function Closures</h2>
    <p>Counting with a local variable.</p>
    <p id="demo">0</p>
    <script>
      document.getElementById("demo").innerHTML = add();

      function add() {
        let counter = 0;

        function plus() {
          counter += 1;
        }
        plus();
        return counter;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Closures</h2>
    <p>Counting with a local variable.</p>
    <button type="button" onclick="myFunction()">Count!</button>
    <p id="demo">0</p>
    <script>
      const add = (function() {
        let counter = 0;
        return function() {
          counter += 1;
          return counter;
        }
      })();

      function myFunction() {
        document.getElementById("demo").innerHTML = add();
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Closures

Global Variables

Note

Variable Lifetime

A Counter Dilemma

JavaScript Nested Functions

JavaScript Closures

Example Explained

Web Development