How JavaScript closure works?

Tutorial about JavaScript closure with code examples and video
07 August 2017   1470
JavaScript

Lightweight interpreted or JIT-compiled programming language with first-class functions

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure "remembers" the environment in which it was created.

Some facts:

  • A closure is one way of supporting first-class functions; it is an expression that can reference variables within its scope (when it was first declared), be assigned to a variable, be passed as an argument to a function, or be returned as a function result.

  • Or, a closure is a stack frame which is allocated when a function starts its execution, and not freed after the function returns (as if a 'stack frame' were allocated on the heap rather than the stack!).

Closure Examples

The following code returns a reference to a function:

function sayHello2(name) {
  var text = 'Hello ' + name; // Local variable
  var say = function() { console.log(text); }
  return say;
}
var say2 = sayHello2('Jim');
say2(); // logs "Hello Jim"

 In above code, a closure can be found here: the anonymous function function() { console.log(text); } is declared inside another function, sayHello2() in this example.

In JavaScript, You create a closure by using the function keyword inside another function

Please note: in C and most other common languages, after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed.

But in JavaScript, if you create a function within another function, then the local variables can remain accessible after returning from the function you called. This is demonstrated above. Because say2() function was called after we have returned from sayHello2(). Notice that the code that we call references the variable text, which was a local variable of the function sayHello2().

function() { console.log(text); } // Output of say2.toString();

Looking at the output of say2.toString(), you can see that the code refers to the variable text. The anonymous function can reference text which holds the value 'Hello Jim' because the local variables of sayHello2() are kept in a closure.

The thing is that in JavaScript a function reference also has a secret reference to the closure it was created in — similar to how delegates are a method pointer plus a secret reference to an object. 

For some reason, closures  hard to understand when you read a plain text about them, but examples realy helps to understand their work. 

This example shows that the local variables are not copied — they are kept by reference. 

function say667() {
  // Local variable that ends up within closure
  var num = 42;
  var say = function() { console.log(num); }
  num++;
  return say;
}
var sayNumber = say667();
sayNumber(); // logs 43

All three global functions have a common reference to the same closure because they are all declared within a single call to setupSomeGlobals().

var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
  // Local variable that ends up within closure
  var num = 42;
  // Store some references to functions as global variables
  gLogNumber = function() { console.log(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }
}

setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 43
gSetNumber(5);
gLogNumber(); // 5

var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); // 42

oldLog() // 5

The three functions have shared access to the same closure — the local variables of setupSomeGlobals() when the three functions were defined.

Note that in the above example, if you call setupSomeGlobals() again, then a new closure (stack-frame!) is created. The old gLogNumbergIncreaseNumbergSetNumber variables are overwritten with new functions that have the new closure. (In JavaScript, whenever you declare a function inside another function, the inside function(s) is/are recreated again each time the outside function is called.)

Little advice: if everything is complitelly unclear, the best thing to do is to use the examples. Reading a text is much harder than understanding examples.

Also, you can look this video tutorial about JavaScript closures.

New Vulnerability to be Found in Google+

Due to this vulnerability it was possible to obtain private information of 52.5 million accounts
11 December 2018   65

Google decided to close the social network Google+ not in August 2019, but in April. The reason was another vulnerability in the API, due to which it was possible to obtain private information of 52.5 million accounts. The company plans to close the social network API until mid-March 2019.

By December 10, 2018, the following error information was published:

  • Third-party applications requesting access to profile data, because of the bug in the API, received permission to view information, even if it is hidden by privacy settings;
  • the names of users, their email addresses, information about occupation, age and other confidential information were at risk;
  • passwords, financial data and national identification numbers have not been compromised;
  • the company has no evidence that anyone has exploited the vulnerability;
  • the error was fixed within 6 days: from November 7 to November 13, 2018.
  • Google said it sends notifications to all users affected by the bug.

The previous data leak of Google+ users occurred in October 2018. Then about 500 thousand accounts were compromised. The attackers could get the names, email addresses, age, gender and occupation of users.