JavaScript Call Apply Bind

The value of this depends on how a function is called, not where it's defined.

const user = { name: 'Ada', greet() { return `Hi, ${this.name}`; } };
const fn = user.greet;
fn(); // 'Hi, undefined' — this lost its connection to user

Passing a method as a value, like a callback, detaches it from its original object.

call, apply, and bind exist to set this explicitly regardless of call site.

All three live on Function.prototype, so every function has access to them.

Without explicit control, callbacks and event handlers commonly break on this.

Understanding these three methods is essential for working with older, non-arrow-function code.

Invoke a function immediately with arguments listed individually.

function greet(greeting) { return `${greeting}, ${this.name}`; }
greet.call({ name: 'Ada' }, 'Hi'); // 'Hi, Ada'

The first argument becomes this inside the function for that one call.

Remaining arguments map positionally to the function's parameters.

Use call() to borrow a method from one object and run it against another.

const max = Math.max.call(null, 1, 5, 3); // 5

Passing null or undefined as thisArg uses the global object in non-strict mode.

call() does not change the original function; it only affects that single invocation.

Works exactly like call(), but arguments are passed as one array.

function sum(a, b, c) { return a + b + c; }
sum.apply(null, [1, 2, 3]); // 6

apply() is the better choice when arguments already exist as an array or array-like.

Math.max.apply(null, [4, 8, 2]); // 8

Modern code often replaces apply() with the spread operator: Math.max(...nums).

apply() still matters when forwarding an arguments object between functions.

Both call() and apply() execute the function synchronously and return its result.

Choosing between call and apply is purely about argument shape — list versus array.

Creates a new function with this permanently fixed to the given value.

const user = { name: 'Ada', greet() { return `Hi, ${this.name}`; } };
const boundGreet = user.greet.bind(user);
boundGreet(); // 'Hi, Ada' — works even detached from user

Unlike call() and apply(), bind() does not invoke the function immediately.

The returned function can be stored, passed around, and called later safely.

Bind methods in a constructor so they keep this when used as callbacks.

class Button {
  constructor() { this.onClick = this.onClick.bind(this); }
  onClick() { console.log(this); }
}

Calling bind() again on an already-bound function cannot change its fixed this.

Bound functions report 'bound functionName' when inspected, which helps when debugging.

Arguments passed to bind() after thisArg get permanently prepended to every future call.

function multiply(a, b) { return a * b; }
const double = multiply.bind(null, 2);
double(5); // 10

This technique is called partial application, fixing some arguments ahead of time.

Combine partial application with event handlers to pass extra context cleanly.

button.addEventListener('click', handleClick.bind(null, itemId));

Partially applied functions still accept additional arguments at call time.

Use partial application to build specialized utility functions from general ones.

This pattern avoids writing repetitive wrapper functions for common argument combinations.