Closures in JavaScript

Closures,This and IIFE in JavaScript

Closures In JavaScript

closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Use of Closures:

  1. It is used to maintain the state between function calls.
  2. Access the private variables.
  3. Also, point to remember it is function inside a function.
function ClousreDemo(val)
{
    var v=val;  //private variable
    return v;
}

var p=ClousreDemo("sagar");
var q=ClousreDemo("Jaybhay");

In the above example, I need to maintain the state of variable and as you see when scope is over in this function value change and you can’t access previous value so if I want to access the previous value how I get that value. Also one another issue for every function call we need to maintain the state.

To overcome this we need to write a function inside the function.

function ClousreDemo(Val)
{
    var v=val;  //private variable
    
var _getData=function(){
    return v; // but this function is private to make it public we need below code.
}

return { geData: _getData}; // make function public we need to return the function.

}

var p=ClousreDemo("sagar");
console.log(p.geData());
var q=ClousreDemo("Jaybhay");
console.log(q.geData());
console.log(p.geData())

Now the function _getData it holds the value of V the state of the variable is maintained in different function call.

Closures in JavaScript

IIFE (Immediately invoked function expression)

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. (function () { statements })(); It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts.

(function(){

    console.log("it is called immediately while defining");

}());

It is also called an anonymous function as we are not giving the name and it is called right away while defining.

Is scenario like when you want to call a function at startup only and after that, you don’t need to call this function again and again then it is used?

This Keyword In JavaScript

function’s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called (runtime binding).

In most cases, the value of this is determined by how a function is called (run-time binding). It can’t be set by assignment during execution, and it may be different each time the function is called. 

Global 

In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.

When used alone, the owner is the Global object, so this refers to the Global object.

In a browser window the Global object is [object Window]

var x = this;
console.log(this === window); // true

a = 47;
console.log(window.a); // 37

this.b = "Sagar";
console.log(window.b)  // "Sagar"
console.log(b)         // "Sagar"

Function context

Inside a function, the value of this depends on how the function is called.

In a JavaScript function, the owner of the function is the default binding for this.

So, in a function, this refers to the Global object [object Window].

function myFunction() {
  return this;
}

this in a Function (Strict)

JavaScript strict mode does not allow default binding.

"use strict";
function myFunction() {
  return this;
}

So, when used in a function, in strict mode, this is undefined.

n strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example:

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

when you create the variable function it is bound to window object which ultimately refers as this.

References: https://developer.mozilla.org/en-US/docs/Web/JavaScript

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *