How to Use the Call, Apply, and Bind Functions in JavaScript .
Tags: javascript, beginners, react
Published: 2023-01-08 17:08:00

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](https://github.com/Neeraj1997-dev/javaScript_Interview_questions2023)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xs9y75x9d71duu7qnux.png)

Thanks for reading.