call, apply, and bind in JavaScript: A Complete Guide

call, apply, and bind in JavaScript: A Complete Guide

call, apply, and bind let you set this explicitly. Here is each one.

call

Invokes the function immediately with a specified this and comma-separated arguments:

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}
const user = { name: "Kunal" };
greet.call(user, "Hello", "!"); // "Hello, Kunal!"
``
### apply

Same as `call` but arguments as an array:

```js
greet.apply(user, ["Hi", "."]); // "Hi, Kunal."
``
### bind

Returns a new function with `this` permanently bound (and optional preset arguments):

```js
const boundGreet = greet.bind(user, "Hey");
boundGreet("?"); // "Hey, Kunal?"
``
`bind` does not invoke immediately. The bound function can be called later. Re-binding a bound function has no effect on `this`.

### Common Use Cases

#### Borrowing Methods

```js
Array.prototype.slice.call(arguments); // convert array-like to array
``
#### Fixing `this` in Callbacks

```js
setTimeout(obj.greet.bind(obj), 1000);
``
#### Partial Application

```js
const add = (a, b, c) => a + b + c;
const add5 = add.bind(null, 5); // preset first argument
add5(3, 2); // 10
``
### Arrow Functions Ignore Them

```js
const arrow = () => console.log(this);
arrow.call({ name: "X" }); // this is still the lexical this
``
`call`, `apply`, and `bind` cannot change an arrow function's `this`.

### Precedence

`new` > `bind` > `call`/`apply` > method call > plain call. A bound function called with `new` uses the new object as `this`.

### The Takeaway

`call`: invoke immediately with `this` and comma-separated args. `apply`: same but args as an array. `bind`: return a new function with `this` permanently bound. Use for borrowing methods, fixing `this` in callbacks, and partial application. Arrows ignore all three.