Introduction:

In the dynamic realm of JavaScript, objects hold the key to creating robust applications. But did you know that objects can actually borrow methods from one another? Enter the captivating world of function borrowing! Today, we'll dive into an incredible method called bind() that empowers objects to wield the skills of their counterparts. Buckle up as we unravel the secrets behind this fascinating technique and witness the magic of code reusability in action.

With the help of bind() a method, an object can borrow a method from another object.

In this javascript code, we have an object [person1] with a function getinfo for printing information about person1.

if we run this javascript code then the output will be

First name is Sumit

Last name is pal

His/Her role is admin

Course Count is 8

const person1 =  {
    firstName : "Sumit",
    lastName  : "pal",
    role      : "admin",
    courseCount: 8,
    getinfo : function(){
        console.log(`
            First name is ${this.firstName}
            Last name  is ${this.lastName}
            His/Her role is ${this.role}
            Course Count is ${this.courseCount}
        `)
    }
}

Now suppose we have another object [person2] and we want to print the information of person2.

well, we can do it using .bind() function.

const person1 =  {
    firstName : "Sumit",
    lastName  : "pal",
    role      : "admin",
    courseCount: 8,
    getinfo : function(){
        console.log(`
            First name is ${this.firstName}
            Last name  is ${this.lastName}
            His/Her role is ${this.role}
            Course Count is ${this.courseCount}
        `)
    }
}

const person2 = {
    firstName : "Pranshu",
    lastName  : "pal",
    role      : "sub-admin",
    courseCount: 8
}
// binding getinfo function into person2 object
const p2 = person1.getinfo.bind(person2);  
p2();

If we run this code we will get the following output

First name is Pranshu

Last name is pal

His/Her role is sub-admin

Course Count is 8

In [person2 object] we don't have any getinfo but still, we are able to print the Info of person2

When a function is used as a callback, this is lost.

This example will try to display the person1 info after 2 seconds, but it will display undefined instead:

const person1 =  {
    firstName : "Sumit",
    lastName  : "pal",
    role      : "admin",
    courseCount: 8,
    getinfo : function(){
        console.log(`
            First name is ${this.firstName}
            Last name  is ${this.lastName}
            His/Her role is ${this.role}
            Course Count is ${this.courseCount}
        `)
    }
}
setTimeout(person1.getinfo,2000);

In this example, we are printing information of [person1] with a callback function [setTimeout()]

But in the output, we will get undefined

First name is undefined

Last name is undefined

His/Her role is undefined

Course Count is undefined

Well We can fix This by using .bind() Function

const person1 =  {
    firstName : "Sumit",
    lastName  : "pal",
    role      : "admin",
    courseCount: 8,
    getinfo : function(){
        console.log(`
            First name is ${this.firstName}
            Last name  is ${this.lastName}
            His/Her role is ${this.role}
            Course Count is ${this.courseCount}
        `)
    }
}
const display = person1.getinfo.bind(person1);
setTimeout(display,2000);

Now If we will run the following javascript code we will get this output

First name is Sumit

Last name is pal

His/Her role is admin

Course Count is 8

What is this ?

In the magical world of JavaScript, imagine the word 'this' as a special signpost that points to something special, like an object

In JavaScript, the this keyword refers to an object.

1. In an object method, this refers to the object.

2. Alone, this refers to the global object.

3. In a function, in strict mode, this is undefined.