Delightful Development & Design

I started my path to becoming a front-end developer in an online bootcamp. While it gave me a good foundation in HTML, CSS, and JavaScript, I faltered where many online students do: the transition from coding in a class-based editor, to completing projects from start to finish.

One of the blocks that tripped me up most was my knowledge of JS core functionality. In a bootcamp, you're guided through a lesson, presented with a problem, and given the chance to solve that problem using what you've just learned. But in building your own projects, especially at first, problems are constant and open-ended. I had a hard  time knowing how  —and when— to apply certain elements over others, in large part because that knowledge comes with experience.

To build up my familiarity and comfort level with elements of the standard library, I started writing short deep-dives on very narrow topics for myself in markdown. Today I want to share one of those with you: namely, the difference between call, bind, and apply.


In order to understand bind, call, and apply, it’s important to have a basic understanding of this.

this refers to the object that calls a function.

  • If a function is being called inside an object, this would refer to the object.
  • If a function is called on an on* callback such as onclick, this refers to the DOM element.
  • If a function is called normally in the file in non-strict mode, this refers to Window or global.

Here’s an example of this being used.

let greeting = {
	name: "Sara",

	byName: function() {
		console.log("Welcome, " + this.name);
	}
}

Because this function is being called in an object, here this refers to the object greeting. See what happens when we run the function.

greeting.byName();
// returns "Welcome, Sara"

This works just like we want it to (pun unintended, but delightful). But what if we'd like to call the function outside the object?

let greetMe = greeting.byName();
greetMe();
// returns error

It doesn't work, because now that the function is called outside the object, this refers to the global scope, where we don't have a name property.

Bind

This is where bind comes in. bind allows us to tell the function what we would like to set to this; in this case, we want to tell the function to use greeting as this.

let greetMe = greeting.byName.bind(greeting);
greetMe();
// returns "Welcome, Sara"

It's also possible to include parameters when using bind.

let greeting = {
	name: "Sara",

	byName: function(timeOfDay) {
		console.log("Welcome, " + this.name + ", and good " + timeOfDay);
	}
}

let greetMe = greeting.byName.bind(greeting, 'morning');
greetMe();
// returns "Welcome, Sara, and good morning"

Call

call works similarly to bind: it allows you to set this, and to pass on arguments. The notable difference is that call executes the function immediately, unlike bind, which must be called separately.

Here is an example of using call with a single argument.

let greeting = {
	name: "Sara",

	byName: function(timeOfDay) {
		console.log("Welcome, " + this.name + ", and good " + timeOfDay);
	}
}

greeting.byName.call(greeting, 'morning');
// returns "Welcome, Sara, and good morning"

You can also pass multiple arguments, separated by a comma.

let greeting = {
	timeOfDay: "morning",

	byName: function(name1, name2, name3) {
		console.log("Welcome and good " + this.timeOfDay + ", " + name1 + ", " + name2 + ", and " + name3);
	}
}

greeting.byName.call(greeting, 'Sara', 'Ken', 'Tom');
// returns "Welcome and good morning, Sara, Ken, and Tom"

Apply

apply is very similar to call. Like call, apply executes the function immediately and also allows you to pass parameters to a function. However, for apply, any arguments must be formatted as an array.

let greeting = {
	timeOfDay: "morning",

	byName: function(name1, name2, name3) {
		console.log("Welcome and good " + this.timeOfDay + ", " + name1 + ", " + name2 + ", and " + name3);
	}
}

greeting.byName.apply(greeting, ['Sara', 'Ken', 'Tom']);
// returns "Welcome and good morning, Sara, Ken, and Tom"

An easy way to remember the difference between apply and call is "a is for array, c is for comma."