In this tutorial, we will a learn a part of javascript i.e. Understanding JavaScript Closure

Closures allow JavaScript programmers to write better code. Creative, expressive, and concise. We frequently use closures in JavaScript, and, no matter your JavaScript experience, you will undoubtedly encounter them time and again. Sure, closures might appear complex and beyond your scope, but after you read this article, closures will be much more easily understood and thus more appealing for your everyday JavaScript programming tasks.

What is a JavaScript closure?

A JavaScript Closure is when an inner function has access to members of the outer function (lexical scope) even when executing outside the scope of the outer function.
Therefore, we cannot afford to talk about closure while leaving out functions and scope.

JavaScript variables can belong to the local or global scope.
Global variables can be made local (private) with closures.

Scope in JavaScript

Scope refers to the extent the visibility of a variable defined in a program.There are different Ways to create scope in JavaScript like try-catch blocks, functions, the let keyword with curly braces among others. We mainly have two variations of scope: the global scope and local scope.

• Local Scope

A javascript function can access all the variable assigned inside a particular function
for e.g :

   function multiply_local() {
      var a = 3; // Local Scope
      return a * a;
   }

Run Code

• Global Scope

A javascript function can also have access to variables which are defined outside the function.
for e.g :

   var a = 8;
   function multiply_global() {
       return a * a;
   }

Run Code

Lexical Scope

JavaScript’s Lexical Scope is determined during the compile phase. It sets the scope of a variable so that it may only be called/referenced from within the block of code in which it is defined.
A function declared inside a surrounding function block has access to variables in the surrounding function’s lexical scope.

var AvailableBalance = 1000 // Global Scope

function withdraw (amount) {
  var balance = parseInt(AvailableBalance) - parseInt(amount);
  const actualBalance = (function () {
    const TAX = 15.2
    return balance - TAX 
    /*
     * Accesses balance variable from the lexical scope
     */
  })() // Immediately Invoked Function expression

  // console.log(TAX) // Err: Can't find variable: TAX
  return actualBalance
}
alert("Available Balance : " + withdraw(300));

Run Code

Invoking an inner function outside of its enclosing function and yet maintain access to variables in its enclosing function (lexical scope) creates a JavaScript Closure.

function book () {
  var name = 'Javascript - closure';  // Local variable

  var actions = {
    lang: function () {
    //  new function scope
      alert('Selected Book : ' + name); /**
      * Accessing the name variable from the outer function scope (lexical scope)
      */
    }
  } // actions object with a function

  return actions; /**
  * We return the actions object
  * We then can invoke the speak function outside this scope
  */
}
alert(book().lang());

Run Code

The closure allows exposing a public interface while at the same time it hides and preserving execution the context from the outside scope.
Some of the Javascript design patterns make use of closures.

Get More Articles On – JavaScript