Bind, Call and Apply

1. Overview

Functions are a special kind of object and also get a couple of special methods that

they inherit from the function constructor object such as call, apply and bind methods. These methods allow us to call a function and set this variable manually.

2. Description

var john = {
    name: 'John',
    age: 26,
    job: 'teacher',
    presentation: function(style, timeOfDay) {
        if (style === 'formal') {
            console.log('Good ' + timeOfDay + ', Ladies and gentlemen! I\'m ' +  this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old.');
        } else if (style === 'friendly') {
            console.log('Hey! What\'s up? I\'m ' +  this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old. Have a nice ' + timeOfDay + '.');
        }
    }
};

var emily = {
    name: 'Emily',
    age: 35,
    job: 'designer'
};

john.presentation('formal', 'morning');

john.presentation.call(emily, 'friendly', 'afternoon');

// this is not gonna work because our method does not expect to receive an array as the input
//john.presentation.apply(emily, ['friendly', 'afternoon']);

// only one argument left to be set
var johnFriendly = john.presentation.bind(john, 'friendly');

johnFriendly('morning');
johnFriendly('night');

var emilyFormal = john.presentation.bind(emily, 'formal');
emilyFormal('afternoon');

// Another cool example
var years = [1990, 1965, 1937, 2005, 1998];

function arrayCalc(arr, fn) {
    var arrRes = [];
    for (var i = 0; i < arr.length; i++) {
        arrRes.push(fn(arr[i]));
    }
    return arrRes;
}

function calculateAge(el) {
    return 2016 - el;
}

function isFullAge(limit, el) {
    return el >= limit;
}

var ages = arrayCalc(years, calculateAge);
// by using bind method, we can make fullJapan as function having only one argument
// that matched with arrayCalc's callback function which has only one argument.
var fullJapan = arrayCalc(ages, isFullAge.bind(this, 20));
console.log(ages);
console.log(fullJapan);

2.1 Call

In the above example, emily object hasn't presentation method which is in john object. We can use the call method to do this. First argument of the call method is always to set the this variable. We can set the first argument to emily, then this variable in john's presentation method becomes to point to emily. After that, we can set the other arguments like the presentation's argument. This is called method borrowing. The call method allows us to set this variable in the first argument and we set it to emily because we wanted to use john's presentation method but setting the this variable to emily so that we could use john's method on emily. So that is Call method.

2.2 Apply

Apply method is Similar to Call method but accepts the arguments as an array. So that's only two arguments, first this variable and then an array where all the other arguments go. But also counterpart function has to have a signature for accepting array argument in second position.

2.3 Bind

Bind is also very similar to the Call method as well. It also allows us to set the this variable explicitly. However, the difference is bind doesn't immediately call the function but instead it generates a copy of the function so that we can store it somewhere that can be useful to create functions with preset arguments. Bind returns a function that will get stored in some variable. If you set some function with partial of arguments and stored it any variable, you could use that variable as function and call with left arguments.

3. References

https://codingheroes.io/