How to Use the Call, Apply, and Bind Functions in JavaScript .

Both call and apply invoke a function. Their only difference is that call accepts arguments in a comma-separated fashion while apply requires arguments to be passed as an array or an array-like object.

Call ( )
Call invokes the function immediately and allows you to pass in arguments one by one.

Call() Syntax

function.call(thisArg, arg1, agr2, ...)

Call() Parameters

The call() method can take two parameters:

• thisArg - The thisArg is the object that the this object references inside the function func.

• arg1, ... argN (optional) - Arguments for the function func.

Note: By default, in a function this refers to the global object i.e, window in web browsers and global in node.js.

call() Return Values
Returns the result obtained from calling the function with the specified this value and arguments.

Note: By using call(), we can use the functions belonging to one object to be assigned and called for a different object.

Example:1

let lastName = { name: 'Yadav' };
function fullName(greeting){
  console.log(`${greeting}${this.name}`)
}
fullName('Neeraj')
fullName.call(lastName,"Neeraj")

Example:2

let name =  {
    firstname : "Neeraj",
    lastname : "Kumar",
}
fullDetails =function(home){
    console.log(this.firstname + " " + this.lastname +", " + home)
}

fullDetails.call(name,"Bihar")

the first argument e.g name inside call method is always a reference to (this) variable and latter will be function variable

Apply ( )

The apply() method calls a function with the passed this keyword value and arguments provided in the form of an array.

apply invokes the function on given context and allows to pass arguments as an array
The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma separated values.

apply() Syntax

function.apply(thisArg, [argumentsArr])

apply() Parameters
The apply() method can take two parameters:

• thisArg - The value of this which is provided while calling func.

• argsArray (optional) - An array containing the arguments to the functio

Example1: Append two Arrays

let backend = ["Neeraj", "Shashank", "Ramesh"];
let frontend = ["Parveen", "Ashish"];

// appending 
console.log(backend.push.apply(backend, frontend))

bind()
bind returns a new function by setting the provided context, and allows to pass arguments one by one

The bind() method allows an object to borrow a method from another object without copying.

bind() Syntax

func.bind(thisArg, arg1, ... argN)

bind() Parameters

The bind() can take two parameters:

• thisArg - The value provided as this parameter for func.
• arg1, ... argN (optional) - The value of arguments present inside func. Notes: If thisArg is not specified, the this of the executing scope is treated as thisArg.

bind() Return Value

Returns a copy of the given function with the specified this value, and initial arguments (if provided).

// object definition
const student1 = {
  name: "Neeraj",
  introduction: function (score) {
    console.log(this.name + "scored " + score + " in an exam.");
  },
};

// object definition
const student2 = {
  name: "Sonu",
};

let result = student1.introduction.bind(student2, 95);

// invoking result() function
result(); 

Call and Apply are interchangeable. You can decide whether it’s easier to send in an array or a comma separated list of arguments. Bind is different. It always returns a new function.

javascript interview questions

Thanks for reading.