JavaScript閉鎖の秘密の生活

In programming, scope is a region where a name binding is valid.

This is the association of entities with identifiers.

These are functions that are passed as arguments to other functions, they can be assigned to a variable and they can be returned as the value of another function.

At the onset of programming with JavaScript, the concept of closures might be a difficult thing to grasp, reality is, if you've written JavaScript code before you might have used (or created) a closure without realizing it.

Take the following code example:

let myName = "Habdul";

function getmyName() {
    let lastName = "Hazeez";
    console.log(myName + " " + lastName);
}

getmyName(); // Habdul Hazeez

When the function getmyName() is called the output is Habdul Hazeez . Why is this?

You might not know it but this is a basic example of a closure. The function getmyName() was defined with an internal variable lastName and we appended its value with the value of the variable myName defined outside the function which led to the output Habdul Hazeez when the function is invoked.

Another question is: Why did function getmyName have access to myName variable? The answer is simple lexical environment.

A free variable is a variable which is neither a parameter, nor a local variable of this function.

Let's take a look at another example:

let myName = "Habdul Hazeez";

function logmyName() {
    console.log(myName);
}

function getmyName(funArg) {
    let myName = "Jonathan Sanchez";
    funArg();
}

getmyName(logmyName); // ?

What will be the output of getmyName() and why? Let's take a step backwards and analyze what is going on.

From the code snippet you'll notice the following:

1. Free variable is in use ( myName ).
2. Function logmyName is passed as an argument to function getmyName .

In JavaScript functions are first class citizens which means we can assign them to a variable, return them from a function, and pass them as an argument to another function.

Therefore, when we call the function getmyName as thus: getmyName(logmyName) which of the myName variable should it use? The one with the Habdul Hazeez or the one with Jonathan Sanchez ?

This leads to a problem known as funarg problem.

The funarg problem occurs when a programming language treats functions as first class functions which has to deal with free variables.

The funarg problem is further divided into two sub-type:

1. downward funarg problem
2. upward funarg problem

We just saw the downward funarg problem in action when a free variable was declared before a function that ends up using it.

In layman terms, execution context is the environment where your code is executed.

Technically, it's more than that and the term "execution context" is a source of confusion because it's not really about a "context" but about scope.

An execution context is created every time a function is invoked, it's composed of the activation object (the function's parameters and local variables), a reference to the scope chain, and the value of this .

// Global context

function one() {
    // "one" execution context

    function two() {

        // "two" execution context

    }

    function three() {

        // "three" execution context

    }

}

Every execution context created is added to the top of the execution stack. The web browser will execute the current execution context that is found at the top of the execution stack. Once completed, it will be removed from the top of the stack and control will return to the execution context below.

Once removed, everything about the function that created the execution is destroyed, but we can preserve this state when we return an inner function which has access to the local variables, arguments, and inner function declarations of its outer function. This outer function is the parent lexical environment and the inner function is a closure.

function getMyName() {
    let myName = "Habdul Hazeez";

    // inner function
    return function() {
        return myName;
    }

}

let whatIsMyName = getMyName();
whatIsMyName(); // Habdul Hazeez.

The variable myName is a free variable and for the inner function to search for it (before using it, in this case it simply returns it) a scope chain is used.

As stated at the beginning of this article, closures do solve some programming challenges. It's impossible and impractical to cover them all, instead we'll discuss some situations that closures are really useful.

In no particular order they are:

• Binding Event Handlers
• Private Instance Variables
• Data Encapsulation
• Functional Programming
• Modularization

Events occur as a result of user interaction with the application interface e.g. mouse clicks and key press.

JavaScript is used to handle events on a Web page and there are numerous ways to track events on a Web page.

Let's take a hypothetical example that we'll like to know which button was clicked on a Web page so that we can perform further actions after the click event.

<button>Click me</button>
<button>Click me1</button>
<button>Click me2</button>

Our first approach can go as thus:

1. Select all button on the Web page.
2. Loop through the result then attach an event listener to each button.

var myElements = document.getElementsByTagName('button');

for (var i = 0; i < myElements.length; i++) {
    myElements[i].onclick = function() {
        alert( 'You clicked on: ' + i );
    };
}

Note: We declared our variable using the var keyword just so we can see how closure was used to solve this kind of issue pre-ES6.

When each button is clicked, the result for i is 3 which is unexpected because 3 is the last assigned value to i . This problem can be solved using closure.

function getButton(n) {
    return function() {
        alert( 'You clicked on: ' + n );
    };
}

for (var i = 0; i < myElements.length; ++i) {
    myElements[i].onclick = getButton(i);
}

The key to understanding the modified code is that every time getButton is called, a new closure is produced, and each of these closures has a different i .

Now, when the buttons are clicked everything works as expected.

NOTE: In ES6 the code be rewritten as:

let myElements = document.getElementsByTagName('button');

for (let i = 0; i < myElements.length; ++i) {
    myElements[i].onclick = function() {
        alert( 'You clicked on: ' + i );
    }
}

Functions in JavaScript can have variables declared as formal parameters and these parameters can be returned using the return keyword.

When this function is used for creating objects with the new keyword, these variables are termed instance variables in this newly created object.

Let's take an example that you have the following code:

function Developer(first_name, speciality, age) {

   return `${first_name} ${speciality} ${age}`

}

The variables can be modified easily leading to undesired results.

// Modify the variable
Developer.first_name = "John";

Now, let's construct an object from this function.

let newDeveloper = new Developer('Ben', 'Webmaster', '100');

When we check the details of newDeveloper we get an empty object due to the variable that we modified earlier.

newDeveloper;
// Object {  }

When this object is expanded in the browser developer tools we get the following:

{}
<prototype>: {…}
    constructor: Developer(first_name, speciality, age)
        arguments: null
        caller: null
        first_name: "John"
        length: 3
        name: "Developer"
    prototype: {…}
    <prototype>: function ()
    <prototype>: Object { … }

It's evident we've modified the variable first_name .

What if we can prevent this happening? That's when we can use private instance variables. In reality, JavaScript has no concept of "private variables" but we can simulate it with the use of closures.

Still using our example, we'll modify it by adding a method that will have access to the function variables, and it will prevent modification from external actors.

function Developer(first_name, speciality, age) {
    return {
        devDetails() {
            return `${first_name} ${speciality} ${age}`
        }
    }
}

Let's repeat the steps we performed earlier.

// Try and modify the first_name variable
Developer.first_name = "Habdul";

Construct an object from the function:

let john = new Developer('John', 'System engineer', '34');

Moving forward, we check the developer details by invoking the devDetails function and it will work as expected.

john.devDetails(); // "John System engineer 34

This was not the case when the variables were free for modification causing issues along the way. You can type the variable name john in the browser developer tools and expanding the output. It should be different compared to when we modified the first_name variable.

Encapsulation is the process of exposing what another part of a program can access when they are divided into smaller components whereby some components are public and others are private. This includes the following:

• Variable names
• Functions
• Methods (functions in an object)

Functional programming is mostly about functions. And we already know that closures can be a normal function in JavaScript or an inner function meaning we've done a bit of "functional programming" in this article. Well, let's talk about the relationship between FP (functional programming) and closures.

In the example illustrated below we'll like to add two numbers using currying.

The uses we've discussed so far.

Closures are useful, but they also have their disadvantages. They are:

• As long as closures are active, this memory cannot be garbage collected.
• Creating functions inside other functions lead to duplication in memory, potentially slowing down the application.

In this article we've talked about JavaScript closures, but we did not cover some of its deep technical details therefore, I'll encourage you to have a look at additional literature's in the references.