Function closures

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.