JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Function Clousers
JavaScript variables are categorized into the local or global scope.
Global variables can be made local with closures.
Global Variables
A function can access all variables specified within the function, like this:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined inside the function:</p>
<p id=”demo”></p>
<script>
myFunction();
function myFunction() {
let a = 4;
document.getElementById(“demo”).innerHTML = a * a;
}
</script>
</body>
</html>
Output
JavaScript Functions
A function can access variables defined inside the function:
But a function can also access variables specified outsiude the function, like this:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined outside the function:</p>
<p id=”demo”></p>
<script>
let a = 4;
myFunction();
function myFunction() { document.getElementById(“demo”).innerHTML = a * a;
}
</script>
</body>
</html>
Output
JavaScript Functions
A function can access variables defined outside the function:
16
In the last example, a is a global variable.
In a web page, global variables belongs to the page.
Global variables can be used (and changed) by all other scripts on the page.
In the first example, a is a local variable.
A local variable can only be used within the function where it is specified. It is hidden from other functions and other scripting code.
Global and local variables with the same name are different variables. Modifying one does not modify the other.
Variables created without declaring keywords (var, let, or const) are always global, even if they are created within a function.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Variables created without a declaration keyword (var, let, or const) are always global,
even if they are created inside a function.:</p>
<p id=”demo”></p>
<script>
myFunction();
document.getElementById(“demo”).innerHTML = a * a;
function myFunction() {
a = 4;
}
</script>
</body>
</html>
Output
JavaScript Functions
Variables created without a declaration keyword (var, let, or const) are always global, even if they are created inside a function.:
16
Variable Lifetime
Global variables are live till the page is discarded, like when you navigate to another page or close the window.
Local variables are short-lived. They are created when the function is invoked and deleted when the function is finished.
A Counter Dilemma
If you want to use a variable for counting something, and you want this counter to be available to all functions.
Uses a global variable, and a function to increase the counter:
Example
<!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>
Output
JavaScript Function Closures
Counting with a global variable.
The counter is: 3
The counter must be local to the add() function, to avoid other code from altering it.
Example
<!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>
Output
JavaScript Function Closures
Counting with a local variable.
The counter is: 0
This did not work because we displayed the global counter instead of the local counter.
To remove the global counter and access the local counter by letting the function return it.
Example
<!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>
Output
JavaScript Closures
Counting with a local variable.
0
JavaScript Nested Functions
All functions are accessible to the global scope.
In fact, in JavaScript, all functions have access to the scope “above” them.
JavaScript supports nested functions. Nested functions have access to the scope “above” them.
Example
<!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>
Output
JavaScript Function Closures
Counting with a local variable.
1
JavaScript Closures
Example
<!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>
Output
JavaScript Closures
Counting with a local variable.
0
Example Explained
- The variable add is assigned to the return value of a self-invoking function.
- The self-invoking function runs only once. It sets the counter to zero (0) and returns a function expression.
- This is the way when add becomes a function. The “wonderful” part is that it can access the counter in the parent scope.
- This is called a JavaScript closure. This makes it possible for a function to have “private” variables.