call, apply and bind

Every JavaScript function has three methods that let you choose its this instead of leaving it to the shape of the call. call runs the function at once with the this you give and the arguments listed one by one: describe.call(asha, 'Hello', '!'). apply does the same but takes the arguments as an array: describe.apply(asha, ['Hello', '!']). bind runs nothing: it returns a new function whose this, and optionally its first arguments, are fixed for good, so describe.bind(asha, 'Hello') can be passed around as a callback and still greet Asha. call and apply are for one call with a borrowed or chosen this; bind is for a function you hand to someone else. Two exceptions matter: calling a bound function with new ignores its bound this, and an arrow function ignores the this of all three. This lesson runs each method, shows how this values are converted, borrows array methods, compares apply with spread, and builds bind from scratch in the exercise.

call and apply: choose this for one call

// call and apply run a function once, with the this you choose. They differ only in how the arguments are passed.
function describe(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}

const asha = { name: 'Asha' };
const ravi = { name: 'Ravi' };

console.log(describe.call(asha, 'Hello', '!')); // the arguments one by one
console.log(describe.apply(ravi, ['Namaste', '.'])); // the arguments in an array
console.log(describe.apply(asha, { 0: 'Hi', 1: '?', length: 2 })); // or in an array-like object

// A method of one object, run with another object as this.
const shop = {
  name: 'Corner Shop',
  label() {
    return `Shop: ${this.name}`;
  },
};
console.log(shop.label(), '|', shop.label.call(ravi));

Hello, Asha!
Namaste, Ravi.
Hi, Asha?
Shop: Corner Shop | Shop: Ravi

describe uses this.name, but it is not a method of anything. call supplies the object for one call, followed by the arguments; apply supplies the object and then a single array of arguments, or any array-like object, one with a length and numbered keys, as the third line shows. The last line runs a method of shop with ravi as this, which prints Shop: Ravi: a method has no lasting tie to its object.

The this you pass is given to the function as it is, and then the function’s own mode decides what it becomes:

// The this value a function receives from call(), in sloppy code (this CommonJS file) and in strict code.
function sloppy() {
  return this;
}
function strict() {
  'use strict';
  return this;
}

const show = (value) => {
  if (value === globalThis) return 'globalThis';
  if (value === null || value === undefined) return String(value);
  if (typeof value === 'object') return `${value.constructor.name} object`;
  return `${typeof value} ${String(value)}`;
};

console.log('call(...) with'.padEnd(16), 'sloppy gets'.padEnd(18), 'strict gets');
for (const [label, value] of [['undefined', undefined], ['null', null], ['5', 5], ["'chai'", 'chai'], ['{ id: 1 }', { id: 1 }]]) {
  console.log(label.padEnd(16), show(sloppy.call(value)).padEnd(18), show(strict.call(value)));
}

call(...) with   sloppy gets        strict gets
undefined        globalThis         undefined
null             globalThis         null
5                Number object      number 5
'chai'           String object      string chai
{ id: 1 }        Object object      Object object

A strict function, which includes every function in a module or a class, receives exactly what you passed: undefined, null or the number 5. A sloppy function replaces undefined and null with the global object and wraps a primitive in an object, so sloppy.call(5) sees a Number object. That is one more reason the output of the same code can differ between an old script and a module.

Borrowing methods

Many built-in methods, the array methods among them, are what the specification calls intentionally generic: they work on any object that looks right, so you can run them with call on values that do not have them. This used to be the standard way to treat array-likes as arrays:

// Borrowing a method: running a method of one kind of object on a value that does not have it.
const drinks = { 0: 'chai', 1: 'coffee', 2: 'lassi', length: 3 }; // looks like an array, but is a plain object
console.log(Array.isArray(drinks), typeof drinks.map);
console.log(Array.prototype.map.call(drinks, (drink) => drink.toUpperCase()));
console.log(Array.prototype.join.call(drinks, ' / '));
console.log(Array.prototype.map.call('abc', (letter) => letter.charCodeAt(0))); // a string is array-like too

// Object.prototype.toString, borrowed, names the kind of any value, null and arrays included.
const kindOf = (value) => Object.prototype.toString.call(value);
console.log(kindOf([]), kindOf(null), kindOf(new Map()), kindOf(/x/));

// Modern code often has a direct way: Array.from turns an array-like object into an array.
console.log(Array.from(drinks, (drink) => drink.length));

false undefined
[ 'CHAI', 'COFFEE', 'LASSI' ]
chai / coffee / lassi
[ 97, 98, 99 ]
[object Array] [object Null] [object Map] [object RegExp]
[ 4, 6, 5 ]

• drinks has numbered keys and a length but no map. Array.prototype.map.call(drinks, …) runs the array method with drinks as this, and the method only needs length and the numbered keys.
• A string is array-like too, so map can walk its characters.
• Object.prototype.toString.call(value) names the kind of any value, including null and arrays, which typeof reports as "object". Libraries used it for type checks before Array.isArray existed.

Today there is often a direct way: Array.from(drinks, fn) builds a real array and maps it in one step, and Object.hasOwn(obj, key) replaced the old borrowed Object.prototype.hasOwnProperty.call(obj, key). You will still read the borrowed forms in older code, so they are worth recognising.

apply and spread

Before spread syntax, apply was the only way to call a function with an array of arguments, so code such as Math.max.apply(null, readings) is everywhere in older libraries.

// apply takes the arguments as an array. Spread syntax does the same in an ordinary call.
const readings = [31.5, 29.8, 33.1, 30.2];
console.log(Math.max.apply(null, readings), Math.max(...readings));

// When the function needs a this, spread keeps the object before the dot; apply takes it as its first argument.
const cart = {
  items: ['pen'],
  add(...more) {
    this.items.push(...more);
    return this.items.length;
  },
};
console.log(cart.add.apply(cart, ['ink', 'nib']));
console.log(cart.add(...['ruler']));
console.log(Reflect.apply(cart.add, cart, ['glue'])); // the same as apply, from the Reflect object
console.log(cart.items);

33.1 33.1
3
4
5
[ 'pen', 'ink', 'nib', 'ruler', 'glue' ]

Math.max(...readings) gives the same 33.1 and reads better. When the function needs a this, spread keeps the object before the dot, cart.add(...more), while apply takes it as its first argument. Reflect.apply(fn, thisArg, args) is the same operation as a plain function, which some code prefers because it cannot be broken by an object that defines its own apply property. Both apply and spread turn every element into a separate argument, so both hit the engine’s limit on arguments for very large arrays; the lesson on parameters shows that limit.

bind: a function with this fixed

// bind returns a new function whose this, and optionally its first arguments, are fixed.
function describe(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}
const asha = { name: 'Asha' };
const ravi = { name: 'Ravi' };

const greetAsha = describe.bind(asha, 'Namaste'); // nothing runs yet
console.log(greetAsha('!'));
console.log(greetAsha.call(ravi, '?')); // a bound this cannot be replaced by call
console.log(greetAsha.bind(ravi)('.')); // or by binding again
console.log(`name: ${greetAsha.name} | length: ${greetAsha.length} (describe has ${describe.length})`);

// new ignores the bound this, but keeps the preset arguments.
function Point(x, y) {
  this.x = x;
  this.y = y;
}
const target = { ignored: true };
const PointOnYAxis = Point.bind(target, 0);
const p = new PointOnYAxis(5);
console.log(p, p instanceof Point, 'target.x:', target.x);

// An arrow function has no this to bind, but bind can still preset its arguments.
const thisOfArrow = () => this;
const add = (a, b) => a + b;
console.log(thisOfArrow.bind(asha)(), add.bind(null, 10)(5));

Namaste, Asha!
Namaste, Asha?
Namaste, Asha.
name: bound describe | length: 1 (describe has 2)
Point { x: 0, y: 5 } true target.x: undefined
undefined 15

describe.bind(asha, 'Namaste') returns a bound function, a new function object that remembers its target function, its this and its preset arguments. The output shows its rules:

• The bound this wins. greetAsha.call(ravi, '?') still greets Asha, and binding the bound function again, greetAsha.bind(ravi), does not change it either. Later calls can only add arguments after the preset ones.
• It looks like its target. Its name is "bound describe", and its length is the target’s length minus the preset arguments, here 2 minus 1. It has no prototype property of its own.
• new ignores the bound this. new PointOnYAxis(5) builds a new Point: the preset argument 0 becomes x, 5 becomes y, and target, the bound this, is never touched. p instanceof Point is true.
• Arrow functions cannot be given a this. thisOfArrow.bind(asha)() still returns undefined, the this of the module around it, although add.bind(null, 10) presets an argument as usual.

The most common use of bind is the one from the previous lesson: const addToCart = cart.add.bind(cart) makes one function you can pass to callbacks, timers and event listeners, and later remove again because it is always the same function. Calling bind again creates a different function each time, so removeEventListener(type, obj.fn.bind(obj)) removes nothing.

Partial application with bind

Presetting arguments is called partial application: a general function becomes a more specific one.

// Partial application: bind fixes the first arguments and returns a function that takes the rest.
function priceWithTax(rate, amountInPaise) {
  return Math.round(amountInPaise * (1 + rate));
}

const withStandardRate = priceWithTax.bind(null, 0.18); // null: this function does not use this
const withReducedRate = priceWithTax.bind(null, 0.05);
console.log(withStandardRate(25000), withReducedRate(25000));
console.log([10000, 4999, 120].map(withStandardRate)); // map's extra arguments (index, array) are ignored

// The same with an arrow function: just as short, and it shows which argument is fixed.
const withStandardRateArrow = (amountInPaise) => priceWithTax(0.18, amountInPaise);
console.log(withStandardRateArrow(25000));

// A logger with a fixed first argument; console stays the this of log.
const warn = console.log.bind(console, '[warn]');
warn('stock is low:', 3);

29500 26250
[ 11800, 5899, 142 ]
29500
[warn] stock is low: 3

priceWithTax.bind(null, 0.18) fixes the rate and returns a function that waits for the amount; null is the this because priceWithTax does not use one. The bound functions also work directly as map callbacks: map passes the value, then an index and the array, and priceWithTax ignores the extra ones. console.log.bind(console, '[warn]') makes a logger whose first argument is always the label.

An arrow function does the same job, (amount) => priceWithTax(0.18, amount), and many teams prefer it because the fixed argument is visible at the call site and the arrow’s this behaves like the surrounding code. Use bind when you need the bound function’s guarantees: a this that nobody can replace, or one stable function made from a method.

Exercise: write bind yourself

// myBind(fn, thisArg, ...preset): what fn.bind(thisArg, ...preset) returns, written without bind (the exercise of
// lesson javascript/call-apply-and-bind). This version ignores thisArg and new.

export function myBind(fn, thisArg, ...preset) {
  return function (...args) {
    return fn(...preset, ...args);
  };
}

import { test, assert } from 'mysmartcopilot:test';
import { myBind } from './my-bind.mjs';

function describe(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}
const asha = { name: 'Asha' };
const ravi = { name: 'Ravi' };

test('fixes this', () => {
  const nameOf = myBind(function () {
    return this.name;
  }, asha);
  assert.equal(nameOf(), 'Asha');
});

test('passes the preset arguments before the call arguments', () => {
  const join = (...parts) => parts.join('-');
  assert.equal(myBind(join, null, 'a')('b', 'c'), 'a-b-c');
  assert.equal(myBind(join, null, 'a', 'b')('c'), 'a-b-c');
  assert.equal(myBind(join, null)(), '');
});

test('returns what the function returns, with this and arguments together', () => {
  const greet = myBind(describe, asha, 'Hi');
  assert.equal(greet('!'), 'Hi, Asha!');
});

test('call and apply cannot replace the bound this', () => {
  const greet = myBind(describe, asha, 'Hi');
  assert.equal(greet.call(ravi, '?'), 'Hi, Asha?');
  assert.equal(greet.apply(ravi, ['.']), 'Hi, Asha.');
});

test('new ignores thisArg and keeps the preset arguments', () => {
  function Point(x, y) {
    this.x = x;
    this.y = y;
  }
  const target = {};
  const OnYAxis = myBind(Point, target, 0);
  const p = new OnYAxis(5);
  assert.ok(p instanceof Point, 'the result should be a Point');
  assert.equal(p.x, 0);
  assert.equal(p.y, 5);
  assert.deepEqual(target, {}, 'thisArg should not be touched');
});

test('does not use Function.prototype.bind', () => {
  const original = Function.prototype.bind;
  Function.prototype.bind = function () {
    throw new Error('bind was used');
  };
  try {
    const add = myBind(function (a) {
      return this.base + a;
    }, { base: 40 });
    assert.equal(add(2), 42);
  } finally {
    Function.prototype.bind = original;
  }
});

Self-check

Interview questions

Fresher · What is the difference between call, apply and bind?

All three let you choose the this of a function. call runs the function immediately with the this you give and the arguments listed one by one, as in greet.call(user, 'Hi', '!'). apply also runs it immediately but takes the arguments as one array, greet.apply(user, ['Hi', '!']); spread syntax has replaced most uses of it. bind runs nothing: it returns a new function whose this, and optionally its first arguments, are fixed, which is useful for callbacks and event listeners. A bound function’s this cannot be changed by a later call, apply or bind, but calling it with new ignores the bound this and creates a new object. None of the three can change the this of an arrow function, which always uses the this of the code around it.

Key takeaways

• f.call(thisArg, a, b) and f.apply(thisArg, [a, b]) run f once with the this you choose; f.bind(thisArg, a) returns a new function and runs nothing.
• A strict function receives the this you pass as it is; a sloppy one turns undefined and null into the global object and wraps primitives.
• Borrowing, such as Array.prototype.map.call(arrayLike, fn), runs a method on a value that lacks it; Array.from and Object.hasOwn replace the most common borrowed forms.
• A bound function’s this cannot be replaced by call, apply or another bind; new ignores it but keeps the preset arguments.
• Arrow functions ignore the this of call, apply and bind; spread syntax has replaced most uses of apply.