Understand the bind() function in Javascript

The .bind() function allows as to create a function by setting a custom this value. The bind function returns a function that is callable like a normal function and can also be passed to other functions.

When we need to go for bind ?

Consider that we have an object:

window.Name  = "Window";

var JsJeep = {

    Name  : "Javascript Jeep 🚙 🚗",

    greet : function() {

          console.log(" 👋  from " + this.Name);

    }

}

When we call the function greet with the JsJeep object:

JsJeep.greet(); //  👋from Javascript Jeep 🚙 🚗

What if we store the function ina other variable and call the function:

var greet = JsJeep.greet;

greet(); //  👋 from Window.

The this points to "Window" because this inside the greet function is global window object, so we need to tell the browser specifically use JsJeep object that it should refer to. This is when bind is used.

Let’s see another example, then we understand the bind. When we do the same inside a setTimeout:

setTimeout(JsJeep.greet , 0); //  👋 from Window

Inside the setTimeout function the value of this will again be window because we are passing the reference of greet function to setTimeout, and the window object is executing the greet function call after 0 milliseconds.

The above setTimeout code is equivalent to

var func = JsJeep.greet;

setTimeout(func, 0); // which is similar to above case.

To solve the above problem, we use the bind function which allows us to specify the value of this inside a function.

Syntax

functionToBind.bind(ourCustomThisObject, argumentsToFunction) → the additional arguments are optional.

Solution for above problems:

var fun = JsJeep.greet;

var newFun = fun.bind(JsJeep);

newFun(); //  👋 from Javascript Jeep 🚙 🚗

setTimeout(newFun, 0); //  👋from Javascript Jeep 🚙 🚗

So we got solved the problem.

Let’s see some tricky areas.

1. What will happen when we pass null instead of JsJeep object

 var fun = JsJeep.greet;

 var newFun = fun.bind(null); // then we are binding nothing

• There are two cases if we use strict mode then the this will be null .
• If we are in non-strict mode then the this will be window object.

2. We can’t change the this value once the bind is done .

var fun = JsJeep.greet;

var bindFun= fun.bind( {Name: "Balaji"} );

bindFun = bindFun.bind( {name: "Raju"} );

bindFun(); //  👋 from Balaji

The reason is that the bindFun has fixed this after the first invocation, and we can’t change that afterward.

3. How to find if a function is bound function .

The name property of a bound function is prefixed with “bound”

log(JsJeep.greet.name) // greet

var fun = JsJeep.greet;

var bindFun= fun.bind( JsJeep );

log(bindFun.name); // bound greet

4. If a property of the object is updated then the value of the property is also updated inside the bind function.

var JsJeep = {

    Name  : "Javascript Jeep 🚙 🚗",

    greet : function() {

          console.log(" 👋  from " + this.Name);

   }

}

var fun = JsJeep.greet;

var bindFun= fun.bind( JsJeep );

JsJeep.Name = "New Jeep 🚘 "; //updating the property.

bindFun(); //   👋  from New Jeep 🚘

Notes

For writing ✍️ this post I 🤷🏻‍♂️ referred MDN and javascrip.info and some answers from StackOverflow , thanks 🙏 to them 🌟 💖 😜 .

— — — — — — — — — — — — — — — — — — — — —

Learn new way of creating random numbers here

— — — — — — — — — — — — — — — — — — — — —

If you find this helpful surprise 🎁 me here.

Share if you feel happy 😃 😆 🙂 .

Follow Javascript Jeep🚙 if you feel worthy.

---

https://gitconnected.com/learn/javascript