Closures inside functions

In this chapter, we will continue to look at how variables work, and, as a result, we will become familiar with closures. From the global object, we turn to working inside functions.

Lexical environment

All variables inside a function are properties of a special LexicalEnvironment internal object.

We will call this object “lexical environment” or simply “variable object”.

At startup, the function creates a LexicalEnvironment object, writes there arguments, functions, and variables. The initialization process is performed in the same order as for the global object, which, generally speaking, is a special case of the lexical environment.

Unlike window , the LexicalEnvironment object is internal, it is hidden from direct access.

Example

Let's take an example to better understand how this works:

When calling a function:

1. Before the first line of its code is executed, at the initialization stage, the interpreter creates an empty LexicalEnvironment object and fills it.

   In this case, the name argument and a single variable phrase get there:

   1	function sayHi(name) {

   2	// LexicalEnvironment = { name: 'Вася', phrase: undefined }

   3	var phrase = "Привет, " + name;

   4	alert(phrase);

   5

   }

   6

   7	sayHi( 'Вася' );

2. The function is executed.

   At runtime, the local variable phrase is assigned, that is, in other words, the new value is assigned to the LexicalEnvironment.phrase property:

   1	function sayHi(name) {

   2	// LexicalEnvironment = { name: 'Вася', phrase: undefined }

   3	var phrase = "Привет, " + name;

   4

   5	// LexicalEnvironment = { name: 'Вася', phrase: 'Привет, Вася'}

   6	alert(phrase);

   7

   }

   8

   9	sayHi( 'Вася' );

3. At the end of the function, the object with variables is usually thrown away and the memory is cleared.

Access to external variables

From the function, we can access not only a local variable, but also an external one:

The interpreter, when accessing a variable, first tries to find a variable in the current LexicalEnvironment , and then, if it does not exist, searches for an external variable object. In this case, it is a window .

This search order is possible due to the fact that the reference to the external object of variables is stored in a special internal property of the function, which is called [[Scope]] .

Consider how it is created and used in the code above:

1. It all starts with the creation of the function. The function is not created in a vacuum, but in a certain lexical environment.

   In the case of the above function is created in the global lexical environment window :

   

   In order for the function to access external variables in the future, at the time of its creation, it receives the hidden [[Scope]] property, which refers to the lexical environment in which it was created:

   

   This link appears simultaneously with the function and dies with it. The programmer cannot get or change it in any way.

2. Later, the time comes and the function starts.

   The interpreter recalls that it has the f.[[Scope]] property:

   

   ... And uses it when creating an object of variables for a function.

   A new LexicalEnvironment object receives a reference to an “external lexical environment” with a value from [[Scope]] . This link is used to search for variables that are not in the current function.

   
   For example, alert(a) first searches for variables in the current object: it is empty. And then, as shown by the green arrow in the figure below - by reference, in the external environment.

   

   At the code level, it looks like a search in the external scope, outside the function:

   

Nested functions

Inside the function, you can declare not only local variables, but also other functions.

As a rule, this is done for auxiliary operations, for example, in the code below, makeMessage and getHello are used to generate a message:

Nested functions can be declared both as Function Declaration and as Function Expression .

Nested functions are processed in exactly the same way as global ones. The only difference is that they are created in the variable object of the external function, and not in the window .

That is, when you start the external sayHi function, local variables and nested Function Declaration fall into its LexicalEnvironment . At the same time, the Function Declaration immediately ready for execution.

In the example above, when launching sayHi(person) , the following LexicalEnvironment will be created:

Then, during the execution of sayHi , nested functions can be accessed; they will be taken from the local variable object.

The nested function has access to external variables through [[Scope]] .

1. When creating any function, including a nested function, it gets the [[Scope]] property, indicating the variable object in which it was created.
2. When launched, it will search for variables first in itself, then in an external variable object, then in a more external one, and so on.

Therefore, in the example above, the makeMessage(person) argument can be removed from the declaration of the function makeMessage(person) .

It was:

Nested function can be returned.

For example, suppose sayHi does not issue an alert right there, but returns a function that does this:

In real life, this is needed to call the resulting function later when it is needed. For example, when you press a button.

The returned function (*) will have full access to the arguments of the external function as well as to the other nested functions makeMessage and getHello , because it receives the [[Scope]] link, which points to the current LexicalEnvironment . Variables that are not in it, for example, person , will be taken from it.

In particular, the function makeMessage when called in the (**) string will be taken from an external variable object.

Memory management

JavaScript is designed so that any object and, in particular, a function, exists as long as there is a link to it, while it is somehow available to be called, accessed. For more information about memory management, see the article Memory Management in JS and DOM.

This implies an important consequence when working with closures.

The variable object of an external function exists in memory as long as there is at least one internal function that references it through the [[Scope]] property.

Let's look at examples.

• Normally, the variable object is deleted when the function ends. Even if it has an internal function declaration:

  1	function f() {

  2	var value = 123;

  3	function g() { } // g видна только изнутри

  4

  }

  5

  6

  f();

  In the above code, the internal function is declared, but it remains inside. After the end of the f() operation, it will become unavailable for calls, so it will be removed from memory along with the other local variables.
• ... But in this case, the lexical environment, including the variable a , will be saved:

  1	function f() {

  2	var a = Math.random();

  3

  4	function g() { }

  5

  6

  return g;

  7

  }

  8

  9	var g = f(); // функция g будет жить и сохранит ссылку на объект переменных

• If f() is called many times, and the resulting functions are saved, for example, added to an array, then LexicalEnvironment objects with the corresponding values ​​of a will be saved:

  1	function f() {

  2	var a = Math.random();

  3

  4	return function () { };

  5

  }

  6

  7	// 3 функции,

  8	// каждая ссылается на соответствующий объект LexicalEnvironment = {a: ...}

  9	var arr = [f(), f(), f()];

  Note that the variable a not used in the return function. This means that the browser optimizer can “de facto” delete it from memory. Anyway, because no one will notice.
• In this code, the closure is first stored in memory, and after removing the reference to g dies:

  01	function f() {

  02	var a = Math.random();

  03

  04	function g() { }

  05

  06

  return g;

  07

  }

  08

  09	var g = f(); // функция g жива

  10	// а значит в памяти остается соответствующий объект переменных

  11

  12	g = null ; // ..а вот теперь память будет очищена

[[Scope]] for new Function

There is one exception to the general assignment rule [[Scope]] .

There is another way to create a function, which we have not talked about before, because it is used very rarely. It looks like this:

That is, the function is created by calling new Function(params, code) :

params

Function parameters separated by commas as strings.

code

Function code as a string.

This method is used very rarely, but in some cases it is very useful, as it allows you to construct a function during program execution, for example, from data received from a server or from a user.

When creating a function using new Function , its [[Scope]] property refers not to the current LexicalEnvironment , but to the window .

The following example demonstrates how the function created by new Function ignores external variable a and outputs global instead.

First, the usual behavior:

And now for the function created through the new Function :

Total

1. All variables and parameters of functions are properties of the variable object LexicalEnvironment . Each function launch creates a new such object.
   At the top level, the “global object” plays the role of LexicalEnvironment , in the browser it is a window .
2. When created, the function gets the [[Scope]] system property, which refers to the LexicalEnvironment in which it was created (except for new Function ).
3. When the function starts, its LexicalEnvironment refers to the external one stored in [[Scope]] . Variables are first searched in their object, then in the object by reference, and so on, down to the window .

Developing without closures in JavaScript is almost impossible. You will meet them more than once in the next chapters of the textbook.