call, apply & bind

Choosing this yourself

In the last lesson, The this keyword, you learned that this is the object a function works on. You also learned four rules that decide what this is. One of those rules lets you choose this yourself. This lesson is about that rule.

Functions in JavaScript are objects, so they have methods too. A method is a function stored on an object. Every function has three methods for choosing this:

• call runs the function now, with the this you choose.
• apply also runs the function now. It takes the other arguments inside one array.
• bind does not run the function. It makes a new function that remembers your this for later.

None of the three changes the original function. They only decide how one call runs.

There is one exception. An arrow function, written () => ..., has no this of its own. It uses the this of the code around it.

function makeGreeter() {
  const greet = () => this.name;
  return greet;
}

const ada = { name: "Ada" };
const greetAda = makeGreeter.call(ada);
console.log(greetAda.call({ name: "Grace" }));

Line 2 makes an arrow function inside makeGreeter. The arrow uses the same this as makeGreeter. Line 7 runs makeGreeter with call, so its this is ada. Line 8 tries to run the arrow with Grace as this. It still prints Ada. So call, apply, and bind can't change this for an arrow function.

You will also borrow methods from built-in objects, and write a small myBind function of your own. Two later lessons go deeper: Currying & partial application and Polyfill call, apply & bind. This lesson covers what each method does and when to use it.

call and apply are almost the same. Both run the function right away. For both, the first argument is the value to use as this. The only difference is how you pass the other arguments:

• call takes them one by one, with commas: introduce.call(ada, "Hello", "!").
• apply takes them inside one array: introduce.apply(ada, ["Hello", "!"]).

An easy way to remember: apply and array both start with "a".

The table compares all three methods. Read across a row to see what one method does.

Try it below. The function introduce reads this.name. Pick a method and an object. The last line of the code is what you would type in the console. The result comes from running real JavaScript.

1function introduce(greeting, punctuation) {2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4 5const ada = { name: "Ada" };6const grace = { name: "Grace" };7const linus = { name: "Linus" };8 9introduce.call(ada, "Hello", "!");

The result depends on how you call introduce, not on where it was written. introduce.call(ada, "Hello", "!") means: "Run introduce now, and inside it, make this be ada." The apply version means the same thing. It just takes ["Hello", "!"] as one array.

Step through the code below. Line 8 uses call and line 9 uses apply.

1function introduce(greeting, punctuation) {Run2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4 5const ada = { name: "Ada" };6const grace = { name: "Grace" };7 8introduce.call(ada, "Hello", "!");9introduce.apply(grace, ["Hi", "."]);

The spread syntax, ...numbers, also takes the items out of an array and passes them one by one. Math.max returns the largest number you pass to it.

const numbers = [4, 9, 2];
console.log(Math.max.apply(null, numbers));
console.log(Math.max(...numbers));

const argumentBag = { 0: 4, 1: 9, 2: 2, length: 3 };
console.log(Math.max.apply(null, argumentBag));

Lines 2 and 3 both print 9. When you have a real array, spread is easier to read.

Line 5 makes an array-like object. It has numbered keys (0, 1, 2) and a length, but it is not a real array. Line 6 shows that apply accepts it too, and prints 9. Spread would throw an error here, because a plain object can't be spread into arguments.

bind does not run the function. It returns a new function. The new function remembers the this you gave it. It can also remember the first few arguments.

Saving some arguments now and giving the rest later has a name: partial application.

Step through the code below. It shows what the new function from bind can and can't do. A function made by bind is called a bound function.

1function introduce(greeting, punctuation) {Run2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4function multiply(a, b) {5  return a * b;6}7 8const ada = { name: "Ada" };9const grace = { name: "Grace" };10const adaIntro = introduce.bind(ada, "Hello");11const double = multiply.bind(null, 2);12 13adaIntro.call(grace, "!");14double === multiply;15double(5);16double.name;17double.length;18 19function Person(name) {20  this.name = name;21}22const BoundPerson = Person.bind({ name: "Ignored" });23const student = new BoundPerson("Maya");24student.name;

Two lines matter most. Line 10 makes the bound function adaIntro:

Line 13 calls adaIntro with call and a different object:

The code also shows a few facts about bound functions:

• A bound function is a different function from the original. Line 14 prints false.
• Line 15 runs double(5). That really runs multiply(2, 5), so it gives 10.
• Its name starts with "bound ". Line 16 gives "bound multiply".
• Its length is the number of arguments it still expects. Each saved argument takes one off. Line 17 gives 1.
• If you call it with new, the new object becomes this, and the saved this is ignored. Lines 23 and 24 show this.

Here is partial application in a small, real task. formatPrice needs a currency sign and an amount. toFixed(2) turns a number into text with two digits after the dot.

function formatPrice(currency, amount) {
  return currency + amount.toFixed(2);
}

const formatDollars = formatPrice.bind(null, "$");
console.log(formatDollars(3));

Line 5 saves "$" as the first argument. formatPrice doesn't use this, so we pass null for it. Line 6 gives only the amount, 3, and prints $3.00. The part that stays the same is saved. The part that changes comes later.

Use bind when a function will be called later, for example by a timer, and it must keep its object or a fixed first argument. Don't bind every function just in case. Two other tools are sometimes clearer:

• A small wrapper function that calls the original. It is easier to read when you need extra steps around the call.
• An arrow function, when you want it to use the this of the code around it.

Sometimes your value doesn't have the method you need, but another kind of object does. Method borrowing means running that other method on your value, with call or apply. It works when your value has what the method needs.

Arrays get methods like slice and join from Array.prototype, the shared object that holds the methods of all arrays. You can take a method from there and run it on another value.

In the Iterating arrays lesson you met array-like values: objects with numbered items and a length, but no array methods. arguments is one of them. It is a list of all the values passed to a regular function.

Step through the code below. Each line borrows a method in a different way.

1function collect() {Run2  const args = Array.prototype.slice.call(arguments);3  return args.join(" | ");4}5 6const letters = Array.prototype.join.call("abc", "-");7const nums = [4, 9, 2];8const biggestOld = Math.max.apply(null, nums);9const biggestNow = Math.max(...nums);10const hasName = Object.prototype.hasOwnProperty.call({ name: "Ada" }, "name");11const hasNameModern = Object.hasOwn({ name: "Ada" }, "name");12collect("red", "green", "blue");

const tags = { 0: "red", 1: "green", 2: "blue", length: 3 };
const joined = Array.prototype.join.call(tags, " | ");
console.log(joined);

Line 1 makes an array-like object. It has numbered keys and a length, but it is not an array. Line 2 borrows join from arrays and runs it with tags as this. Line 3 prints red | green | blue.

A borrowed method only works if your value has the properties the method reads. join reads numbered items and length, so tags works.

Newer JavaScript has easier ways to do two of these jobs:

• Math.max(...nums) instead of Math.max.apply(null, nums).
• Object.hasOwn(obj, key) instead of Object.prototype.hasOwnProperty.call(obj, key). Both check whether obj has its own property called key.

You will still see the older, borrowed versions in a lot of existing code, so it helps to know how they work.

A polyfill is code that adds a built-in feature to browsers that don't have it yet. A real polyfill for bind would add a method to Function.prototype, so every function gets it. That changes every function on the page, so here we write a plain function instead: myBind(fn, thisArg, ...preset).

It takes three things:

• fn: the function to bind.
• thisArg: the value to use as this.
• ...preset: the arguments to save. The ... collects all the remaining arguments into one array called preset.

function myBind(fn, thisArg, ...preset) {
  return function boundFunction(...args) {
    return fn.apply(thisArg, [...preset, ...args]);
  };
}

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}

const ada = { name: "Ada" };
const sayHello = myBind(introduce, ada, "Hello");
sayHello("!");

In plain words, line by line:

1. Line 1: myBind takes the function, the this value, and the arguments to save.
2. Line 2: it returns a new function, boundFunction. Nothing runs yet. The new function remembers fn, thisArg, and preset.
3. Line 3: when boundFunction runs later, it calls fn with apply. It uses thisArg as this. It puts the saved arguments first and the new ones after.

Line 12 makes sayHello with ada and "Hello" saved. Line 13 calls it with "!" and gets "Hello, I'm Ada!". The built-in bind gives the same result.

1function myBind(fn, thisArg, ...preset) {Run2  return function boundFunction(...args) {3    return fn.apply(thisArg, [...preset, ...args]);4  };5}6 7function introduce(greeting, punctuation) {8  return `${greeting}, I'm ${this.name}${punctuation}`;9}10 11const ada = { name: "Ada" };12const sayHello = myBind(introduce, ada, "Hello");13sayHello("!");

Where you'll use this

You'll meet these methods in four common places. The first is timers and event handlers. You hand them a function to run later. That function is called a callback. They often call your method without its object, so this is lost. bind keeps the right object. The later Losing this lesson covers this problem in depth. Here is a first look:

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    console.log(this.count);
  }
};

setTimeout(counter.increment.bind(counter), 1000);

setTimeout runs a function after a delay, here 1000 milliseconds (one second). Line 9 hands it a bound copy of increment. So this is still counter when it runs, and it prints 1.

The other three places:

• Saving a first argument. const logError = console.error.bind(console, "Error:") makes a logger that always starts with "Error:".
• Borrowing methods safely, especially hasOwnProperty.
• Passing an array as separate arguments with apply. You'll see this in older code. Newer code uses spread.

Here is partial application with map. map calls a function once for each item in an array, and collects the results in a new array.

function labelTodo(prefix, todo) {
  return prefix + todo;
}

const labelDone = labelTodo.bind(null, "Done: ");
console.log(JSON.stringify(["email"].map(labelDone)));

Line 5 saves the first argument, "Done: ". Line 6 hands labelDone to map. map passes each todo as the next argument. It prints ["Done: email"].

Common misconceptions

• "call changes the function forever." No. It picks this for one call that runs right away. The function stays the same.
• "apply is an older bind." No. apply runs the function now and takes an array. bind runs nothing. It returns a new function for later.
• "bind can only set this." No. It can also save the first arguments. That is partial application.
• "You can change a bound function's this with call." No. A later call can add more arguments, but this stays the bound value.
• "call can set this for an arrow function." No. An arrow function uses the this of the code around it, and call can't change that.
• "apply and spread always do the same thing." Both pass an array's items one by one. But apply also accepts array-like objects, and spread does not.
• "A borrowed method works on any value." No. It only works when the value has the properties the method reads.
• "Our myBind is a complete polyfill." No. It shows the main idea: save the values, then pass them on to the real call. It leaves out new, name, and length.

Key takeaways

• call(thisArg, a, b) runs the function now. You list the arguments one by one.
• apply(thisArg, [a, b]) runs the function now. It takes the arguments from one array or array-like object.
• bind(thisArg, a) runs nothing. It returns a new function that remembers this and any saved first arguments.
• A later call can't change a bound function's this, and nothing can change an arrow function's this.
• A borrowed method works when your value has the properties the method reads.
• A small bind helper returns a function that runs fn.apply(thisArg, [...preset, ...args]). The built-in bind does a little more.

Up next: Arrow functions & lexical this.