Thursday-Friday: Closure Copy

Introduction

As you could see we have multiple ways to write – organize- our code in javaScript, and each way has it’s own uses. in this topic we will learn a new mechanism that helps in providing more data privacy which is called closure , and how to implement it in javaScript.

Learning objectives:

  • What is closure
  • Why to use closure
  • Closure syntax
  • How does JavaScript handle closure?

What is Closure?

  • A closure is a function in JavaScript that allows the inner function to access the variables (range chain) of the outer (enclosing) function.

  • The clasp has three perimeter chains:

    • You can access your own scope (variables enclosed in curly braces).
    • Can access variables in external functions
    • You can access global variables
Let’s understand from code perspective
  • A simple closure

Let’s look at a simple closure example in JavaScript:

function parent() {

  let house = "whiteHouse";

    function child() {
      let car = "Tesla";
      console.log(`I have: ${house}, ${car}`);
    }
    return child;
  }
 

let legacy = parent();
console.log(typeof legacy); //legacy is of type function


legacy();
//I have :whiteHouse,Tesla


  • There are two functions here:

    • Outer || parent function with variable house and returning child function
    • An inner || child function whose variable is named car and accesses the parent variable house inside the function body
  • The variable house is scoped to the parent function and the variable car is scoped to the child function.

  • When you call the parent() function, the result of the parent() function is stored in a legacy variable of type function. what do you think the value of legacy? try to type legacy

Let’s step through what happens when the legacy() function is called.
  • A variable car is created and its value is set to Tesla

  • JavaScript now tries to do console.log(`I have: ‘, house, car) — here’s the interesting part.

    • JavaScript just created car and is aware of its existence. However, the variable house no longer exists.
  • house is part of the parent function, so it exists only while the parent() function is running. Since the parent() function finished executing long before calling legacy() , all variables in the parent() function’s scope no longer exist, and so does the variable house.

Variables inside a function only come into existence when the function is executed and disappear when the function completes execution.

How does JavaScript handle this?
Closures
  • Child functions can access the variables of the enclosing function through JavaScript closures.

  • This means that during execution, the parent function passes its scope chain as legacy to the child function, so the child function can access the saved legacy variables.

  • In this example, when the parent() function was executed, the child function held and still held (closed) the traditional variable house=`WhiteHouse’.

  • When you run the child() function, you see that it sees its own scope chain and that scope chain has the value of the variable house. A great function has been performed😉

  • So JavaScript knows car=’Tesla’ and house=’WhiteHouse’ and can do console.log(‘I have: ‘, house, car);

A closure stores a reference to a variable in an outer function

They don’t store the actual value, so you can change the value of the outer function variable before the closure is called. This powerful feature can be used in creative ways.

Closure as Legacy:

To emphasize closing as legacy, let’s look at another nested function example:


function grandParent() {
  let house = "GreenHouse";

  function parent () {
    let car = "Tesla";
    house = "YellowHouse";

      function child(){
        let scooter = "vespa";
        console.log(`I have: ${house},${car},${scooter}`);
      }
    return child
  }
  return parent;
}
  
let legacyGenX = grandParent();
console.log(typeof(legacyGenX)) //legacyGenX is of type function

let legacyGenY = legacyGenX ();
console.log(typeof(legacyGenY)) //legacyGenX is of type function

legacyGenY()
//I have :YellowHouse,Tesla,Vespa

  • In the example above, there are three functions grandParent() , parent() , and child() nested inside each other, with variables house , car , and scooter respectively.

  • According to JavaScript’s concept of closures, the innermost nested function maintains the scope chain of the outer function, allowing the child() function to access the variables house and car .

  • Following the concept of Legacy, grandParent() passes the house to parent(). parent() decides to change the color of the house from green to yellow and passes the house and car to child().

Why to use Closure?

In JavaScript, closures are the primary mechanism used to enable data privacy. When you use closures for data privacy, the enclosed variables are only in scope within the containing (outer) function. You can’t get at the data from an outside scope except through the object’s privileged methods.

Conclusion

Closures are one of the more subtle concepts in JavaScript that can be difficult to grasp at first. But once you understand them, you realize it wasn’t the other way around.

Resources:

Leave a Reply