34 Call Apply Bind

1. Call

• The call method is a built-in function that allows to invoke a function
• and specify the value of this within that function explicitly.
• It is primarily used to borrow or reuse functions from other objects
• and override the context in which they are executed.
• Syntax functionName.call(thisArg, arg1, arg2, ...)
• functionName is the function we want to execute
• thisArg - value to be passed as this parameter
• arg1, arg2 are optional arguments passed to the function

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const anotherPerson = {
  name: 'Alice'
};

person.sayHello();  // Output: Hello, John!

person.sayHello.call(anotherPerson);  // Output: Hello, Alice!

2. Apply

• apply method is a built-in function that allows to invoke a function
• and specify the value of this within that function explicitly
• This is similar to call method however differs in how it accepts arguments.
• Syntax - functionName.apply(thisArg, [argsArray])
• functionName is the function we want to execute
• thisArg - value to be passed as this parameter
• [argsArray] An array-like object or an iterable containing the arguments to be passed to the function.

function greet(greeting, punctuation) {
  console.log(greeting + ' ' + this.name + punctuation);
}

const person = {
  name: 'John'
};

const args = ['Hello', '!'];
greet.apply(person, args);  // Output: Hello John!

• The call method directly takes one argument, however apply takes an array of arguments.
• Here we pass person object as the context for thisArg and the args array containing the arguments to be passed to greet function
• It allows to dynamically apply arguments without knowing the exact number of arguments in advance.
• In ES6 we can achieve the same using the spread operator (...) to expand an array of arguments directly when calling a function.
• Syntax greet.call(person, ...args);
• The choice between call or apply depends on whether you have the arguments as separate values or an array-like object.

3. Bind

• The bind method is a built-in function that allows to create a new function
• with a specific execution context (this) permanently bound to it.
• call and apply invoke the same function immediately,
• However bind returns a new function that can be invoked later with the specified this value.
• Syntax - functionName.bind(thisArg, arg1, arg2, ...)
• functionName The name of the function we want to bind the context to.
• thisArg: The value to be bound as the this parameter within the function.
• arg1, arg2, ...: Optional arguments to be partially applied to the function.
• When we use bind, it creates a new function that, when invoked, will have the specified this value
• and, if provided, partially applied arguments. The original function remains unchanged.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const boundFunction = person.sayHello.bind(person);
boundFunction();  // Output: Hello, John!

• By using bind, we create a new function boundFunction that has the person object as the context.
• When we invoke boundFunction, it executes the sayHello method with the this value set to person.
• We can also partially apply arguments using bind.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5));  // Output: 10

• With null is set for thisArg as it's not applicable, and value =2 we create a new function double
• The double function then takes a parameter and returns multiplied by 2
• The bind method is used when we need fixed execution context or partially apply arguments to a function,
• making it more reusable or convenient for later invocations.
• The bind method creates a new function, and the original function remains unmodified.

Notes

• The call, apply and bind methods provide control over the execution context of a function
• and enable borrowing or manipulating functions in different ways.