Closures in Javascript

Wherever the function is declared and defined, it remembers the complete snapshot of the function, i.e, the scope chains used within the function.

var a = 10;
function outer() {
  var b = 20;
  var inner = function() {
    console.log(a);
    console.log(b);
  }
  return inner;
}
var innerFn = outer();
innerFn();
var innerFn1 = outer();
innerFn1();

When innerFn() is executed, it prints both ‘a’ and ‘b’. Printing ‘a’ is fine because its in global scope but printing ‘b’ looks interesting because var ‘b’ is in outer scope which is run and complete and hence no longer exists and there scope for var ‘b’ should not exists. But its working because JS has feature of CLOSURES.

In above program, global variables are created only once, whereas function variables are created as many times as the function is invoked.
So when innerFn() is invoked first time, it remembers snapshot of global var ‘a’ (created only once) and function var ‘b’ (created with outer function execution first time)
So when innerFn() is invoked next time, it remembers snapshot of global var ‘a’ (as before) and function var ‘b’ (created again with outer function execution second time)
To verify this make a small modification

var a = 10;
function outer() {
  var b = 20;
  var inner = function() {
    a++;
    b++;
    console.log(a);
    console.log(b);
  }
  return inner;
}
var innerFn = outer();
innerFn();
var innerFn1 = outer();
innerFn1();

Output:
11
21
12
21

Asynchronous callbacks as closures
As JS engine is single threaded, there is no concept of pause/wait in the program. To achieve this we use a global function called ‘setTimeout’ where it fires the given function asynchronously after the specified time.

var a = 10;
var fn = function() {
  console.log(a);
}
setTimeout(fn, 1000);
console.log("done");

Important thing to notice here is that, this is the best example of CLOSUREs, because the function we declared is trying to access global variable ‘a’ which is remembered by the function eventhough its executed inside another function ‘setTimeout’

The Module Pattern in JS

var person = {
  "firstName": "Niranjan",
  "lastName": "Tallapalli",
  "getFirstName": function() {
    return this.firstName;
  },
  "getLastName": function() {
    return this.lastName;
  }
}
person.getFirstName(); // would give me first name BUT
person.firstName; // would also let me access the first name because there is no concept of private in JS

There is no concept of private variables in JS, everything is by default public. To make variable private, we can do one of the following

  • We can make use of closures
  • We can make use of Module Pattern

The idea here is to make use of the concept of new function SCOPE so that the variables are not visible outside the scope.

function createPerson() {
  var firstName = "Niranjan",
  var lastName = "Tallapalli",
  var person = {
    "getFirstName": function() {
      return this.firstName;
    },
    "getLastName": function() {
      return this.lastName;
    }
  }
}
person.getFirstName(); // would give me first name as usual
person.firstName; // will not work

Closures in Async Callbacks

var i;
var print = function() {
  console.log(i);
}

for(i = 0; i < 10; i++) {
  //print();
  setTimeout(print, 1000);
}

‘print()’ will work fine and prints 0-9
setTimeout will print 10 ten times, its because by the time setTimeout runs 10 different instances of the function, the value of ‘i’ is changed to 10 and then exited the loop.

Now HOW do we solve this problem???

var i;
for(i = 0; i < 10; i++) {
  (function() { // IIFE
    var currentValueOfI = i;
    setTimeout(function() { // make an inline function
      console.log(currentValueOfI);
    }, 1000);
  })();
}

// OR
var i;
for(i = 0; i < 10; i++) {
  (function(currentValueOfI) { // IIFE
    setTimeout(function() { // make an inline function
      console.log(currentValueOfI);
    }, 1000);
  })(i);
}

Compilation and Interpretation

To most of us it looks like JavaScript is an interpretor based language because we do see the direct source code in most of the web pages but it is actually not. JavaScript runtime engine compiles the source code into intermediate binary code on the fly and then interprets it.

Compilation Phase
The minute we create a function it actually creates an object behind the scenes and a variable by name function name binding to this object.

 
var a = 10;
function myFn(x) {
  var b = 20;
  var c = x;
  console.log(a+b+c);
}
myFn(30);

** If you notice carefully there are 5 variables (3 explicitly declared and 1 implicit myFn, 1 implicit param)
During compilation
line #1 // ‘a’ is put in global scope
line #2 // implicit var ‘myFn’ is put in global scope
line #2 // ‘x’ is put in myFn scope
line #3 // ‘b’ is put in myFn scope
line #4 // ‘c’ is put in myFn scope
Note that compilation phase does not look at RHS, it only looks at the LHS, i.e, declarations “var a”. Scope chains are created at compilation step.

Execution Phase
This phase ignores the declaration part and only looks at “a = 10” instead of “var a = 10”. It also refers to the scope chains created in compilation scope to find which variable to use where.
line #1 // Interpretor assigns var the value 10, similarly other variables at line 3 and 4
line #5 // It tries to search for ‘console’ var declaration in myFn scope, since its not declared, interpretor goes one level up and searches again (.. so on till it finds var console) and then invokes the log on it.

Global Scope Problem: Lets look at how interpretor interprets this code

var a = 10; // looks at 'a' from global scope from compilation step and assigns value 10
function myFn() {
  var b = a; // search for 'a' in myFn scope, its not declared, goes one level up to Global Scope and find it and uses it
  console.log(d); // search for 'd' in myFn scope, its not declared, goes one level up to Global Scope and still does not finds it and errors out. Note that it errors out because its a READ operation
  c = 100; // search for 'c' in myFn scope, its not declared, goes one level up to Global Scope and still does not finds it, instead of erroring out it creates variable 'c' because we are writing to it (NOT READING). Interesting thing is that, as the interpretor went up the scope levels all the way to Global Scope, it creates the variable in Global Scope itself eventhough this is the line responsible for the creation of this variable. Compiler skipped to identify the scope if the variable because it does not have the declaration with 'var'
}

Some surprising JS behaviors

var a = 10;
function outer() {
  var b = a;
  console.log(b);
  function inner() {
    var b = 20;
    var c = b;
    console.log(c);
  }
  inner();
}
outer();

This will have 3 scopes at compilation step and interpretor goes and resolves all variables from the compilation at the time of interpretation and runs the program. Its all good, lets see the same program with some minor modifications.

var a = 10;
function outer() {
  var b = a;
  console.log(b);
  function inner() {
    var c = b;
    console.log(c);
    var b = 20;
  }
  inner();
}
outer();

This will print ‘c’ as ‘undefined’ but NOT ’10’ as a typical programmer thinks. WHY???
#1 – The order of ‘var’ really does not matter in JS because compilation happens prior to interpretation.
#2 – There are two steps involved in every JS program, first step is compilation and the nest is interpretation. The problem here is that, compilation only looks at vars and interpretation does not look at vars at all.

At Interpretation phase
line #: When it looks at var ‘b’, it asks the ‘inner’ scope for this variable and its not initialized by the interpretor YET, its still available in ‘inner’ scope because its declared with var. And hence we are trying access a variable which is declared but not yet initialized, it gives us ‘undefined’. This is also referred to the problem of HOISTING

Problem of Hoisting
All the var declarations in JS code are moved/hoisted to the top in each of the execution scopes no matter where they are declared. Because of this reason we get ‘undefined’ as seen above. This is also the problem with function expressions (NOT WITH FUNCTION DECLARATION)

fnA();
function fnA() {
  console.log('hello')
}
Would run fine, BUT
fnA();
var fnA = function() {
  console.log('hello')
}

would give an error because the function expression is defined after execution command is invoked by the interpretor

Using strict mode
Its introduced in ECMA5 and this will not allow JS to initialize variables without declaring them.

"use strict"; // this should be the first line
var myName = "tekmarathon";
myname = "test"; // this will throw runtime error

Note: Strict mode can be applied to a function as well.

Reference
https://www.youtube.com/watch?v=9T3AIM3JMss&list=PLqq-6Pq4lTTZ_LyvzfrndUOkIvOF4y-_c&index=16
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Scopes and Closures

Like in other programming languages, variable scope in JavaScript is not created by blocks, instead its created from functions.
Ex:
var x = 1;
if(x === 1) {
var y = 'one';
}
console.log(x);
console.log(y); // prints 'one' as the scope is not block based

For the most part, scopes in JS are created via functions
var x = 1;
function assignValue() {
if(x === 1) {
var y = 'one';
}
}
console.log(x);
console.log(y); // will throw runtime error

Note *** variables ‘x’ from outer scope can be used inside function but not vice versa as in case of ‘y’

Global variables in JS are evil especially from browser perspective because we load everything at once and we dont know if our global variable names are conflicting with others from different libraries. For this reason we put our logic in a function expression and invoke that function but again the problem could be same if some 3rd party library has same global function. Hence we go for IIFE – Immediately Invoked Function Expression
(function () {
var a = 10;
var b = 20;
console.log(a+b);
})();
With IIFEs global namespace is not polluted.

Without declaring and defining a variable, if we try to use it we get and error.
By declaring and without defining a variable we get ‘undefined’

If we declare a variable, we can do both read and write operations fine, but if dont declare a variable then we can do write operation alone (and not read operation)
var x;
x = 10; // write operation
console.log(x); // read operation

console.log(y); // leads to runtime error as we cannot read before declaring
z = 10; // is fine as we can write without declaring a variable

The Window Object
Whenever we declare a variable outside a function then that variable becomes global. All the global variables and functions are wrapped inside a GLOBAL/ROOT object. This global object name depends on which runtime we are using for running JS.
If its the browser then the Global Object name is ‘window’.
If its node, then its called ‘global’

Scopes can be hierarchical: Variables declared inside a function (INNER VARS) can access variables declared outside the function (OUTER VARS)

Introduction to Functions

Functions cannot be overloaded in JS: Function defined with n arguments can be passed with n args where extra args will be ignored.

function foo() {
return "Hello World";
}
foo();

Functions can be created as

  1. Function Expression
  2. Anonymous Function Expression
  3. Functions as arguments
  4. Functions on objects

1. Function Expression
Functions as values (FIRST CLASS CITIZENS)
var myFunc = function foo() {
return "Hello World";
}
myFunc();

2. Anonymous Function Expression
In the below expression function name is not required as we call with assigned variable anyways which is aka AFE
var myFunc = function() {
return "Hello World";
}
myFunc();

3. Functions as Arguments
var myFunc = function() {
return "Hello World";
}
var executorFunc = function(fn) {
fn();
}
executorFunc(myFunc);

4. Functions on Objects
var myObj = {
"prop1": true
}
myObj.myFunc = function() {
console.log("Hello World");
}
console.log(myObj);
myObj.myFunc();

Default Function Arguments
‘arguments’: is an indexed object with list of arguments passed to method
‘this’: Understanding ‘this’ keyword in JS
var person = {
"firstName": "Niranjan",
"lastName": "Tallapalli",
"getFullName": function() {
console.log(person.firstName + ' ' + person.lastName);
}
}

person.getFullName(); // would work fine BUT
// imagine this scenario
var person2 = person; // object address is copied
person = {};
person2.getFullName(); // this would have person reference which is empty hence results in “undefined undefined”
// instead refer to the object on which getFullName is invoked which is done via “this” keyword

Note: *** Functions are objects behind the scenes in JS ***

Array functions
myArr.push(element); // will add element at the end of an array
myArr.pop(); // will remove last element from array
myArr.shift(); // removes element from beginning of array
myArr.unshift(element); // push element at the beginning of array
myArr.forEach(function(item, index, arr) {
console.log(item +' '+index);
})

Arrays and Wrapper Objects in JavaScript

Arrays
Every array in JS behind the scenes is an Object which means array element can be accessed with index as an integer and also as a string
myArr[0] is same as myArr["0"]

As arrays are objects, can we use DOT NOTATION here? No because the property name is a number which is invalid identifier

If array is an object then how does myArray[0] works? Its because JS does Type Coercion behind the scenes and converts number to string.

Since array indexes are just property names in an object, we can assign element to any index, say

myArr[100] = "xyz";
*** myArr.length -> gives 101 because its actually not the length of an array rather its equal to (max_index + 1)
var myArr = ["hello", "how", "are"];
console.log(myArr.length);
myArr[20] = "you";
console.log(myArr.length);

If you try to access a index which is not defined then you get value ‘undefined’ rather than ArrayIndexOutOfBoundsException like in Java
var myArr = [100, 200];
console.log(myArr[0] +';'+ myArr[1] +';'+ myArr[2]);

Note: Additional elements in array can be added dynamically

Wrapper Objects in JS
By default when we create a variables, they are created as primitives but when we use DOT NOTATION on primitive, JS converts primitive into its corresponding wrapper object and performs the DOT OPERATION and then discards the object.
var value = "Hello World";
value.length; // here value primitive is converted into wrapper string object and then performs length
typeof value; // shows "string" which is a primitive

Similar wrappers are available for Number, Boolean and also Symbol(in ES6)

Mawazo

Mostly technology with occasional sprinkling of other random thoughts

amintabar

Amir Amintabar's personal page

101 Books

Reading my way through Time Magazine's 100 Greatest Novels since 1923 (plus Ulysses)

Seek, Plunnge and more...

My words, my world...

ARRM Foundation

Do not wait for leaders; do it alone, person to person - Mother Teresa

Executive Management

An unexamined life is not worth living – Socrates

Diabolical or Smart

Nitwit, Blubber, Oddment, Tweak !!

javaproffesionals

A topnotch WordPress.com site

thehandwritinganalyst

Just another WordPress.com site

coding algorithms

"An approximate answer to the right problem is worth a good deal more than an exact answer to an approximate problem." -- John Tukey