JavaScript variables can be either in the local or global scope.
Closures can be used to make global variables local (private).
A function can access all variables defined within its scope, as shown here:
| function myFunction() { let a = 4; return a * a; } |
A function can also access variables defined outside of its own scope, as shown here:
| let a = 4; function myFunction() { return a * a; } |
In the last example, a is a global variable.
On a web page, global variables belong to the page and can be accessed (and modified) by any script on the page.
In the first example, a is a local variable.
A local variable is only accessible within the function where it is defined and is hidden from other functions and scripts.
If a global and a local variable share the same name, they are treated as separate variables. Modifying one does not affect the other.
|
Note: Variables created without a declaration keyword (var, let, or const) are automatically global, even if they are defined inside a function. |
| function myFunction() { a = 4; } |
Global variables persist for the duration of the page’s life, remaining until the page is unloaded, such as when navigating to a new page or closing the window.
Local variables have a shorter lifespan; they are created when the function is invoked and deleted once the function finishes executing.
If you need a variable to count something and want this counter to be accessible to all functions, you could use a global variable and a function to increment the counter:
| // 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 |
The issue with the above solution is that any code on the page can modify the counter directly, without calling add().
To prevent this, the counter should be made local to the add() function, ensuring that no other code can alter it directly.
| // Initiate counter let counter = 0; // Function to increment counter function add() { let counter = 0; counter += 1; } // Call add() 3 times add(); add(); add(); //The counter should now be 3. But it is 0 |
It didn’t work because we were displaying the global counter instead of the local one.
To fix this, we can eliminate the global counter and have the function return the value of the local counter instead.
| // Function to increment counter function add() { let counter = 0; counter += 1; return counter; } // Call add() 3 times add(); add(); add(); //The counter should now be 3. But it is 1. |
It didn’t work because the local counter was being reset each time the function was called.
A JavaScript inner function can solve this problem by retaining the counter’s value across function calls.