snippetjavascriptTip

JavaScript function methods - call(), apply() and bind()

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptandapplymethodsbindcallfunction

Problem

Developers often confuse Function.prototype.call(), Function.prototype.apply() and Function.prototype.bind(). While these three methods are similar, they have different use cases and behaviors. Apart from learning how they work and when to use each one, we'll also look at some practical examples to help you understand them better.
JavaScript functions are first-class objects, which means they can be passed around like any other object. They can also have properties and methods, and can be passed as arguments to other functions. The Function object has several methods, including call(), apply() and bind(), which are used to set the this value and pass arguments to a function.
@Quick refresher
Function.prototype.call() is used to call a function with a given this context and any arguments provided individually. For example:
Function.prototype.apply() is almost identical to Function.prototype.call() in the sense that it calls a function with a given this context, however it requires arguments to be provided as an array. For example:

Solution

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.call(obj, data);       // logs: 0 [1, 2, 3]
printThisAndData.call(obj, ...data);    // logs: 0 1 2 3

@Quick refresher
Function.prototype.call() is used to call a function with a given this context and any arguments provided individually. For example:
Function.prototype.apply() is almost identical to Function.prototype.call() in the sense that it calls a function with a given this context, however it requires arguments to be provided as an array. For example:
Function.prototype.bind() is slightly different from the previous two methods. Instead of calling a function with the given this context and returning the result, it returns a function with its this context bound and any arguments provided individually prepended to the arguments at the time of calling the returned function. For example:
Knowing how these methods work is fine, but where would you use them in real life? Some examples include binding a method to an object, calling a function with a specific context, or calling a function with a specific set of arguments.
You can use Function.prototype.apply() to create a function that invokes the method at a given key of an object, optionally prepending any additional supplied parameters to the arguments.

Code Snippets

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.call(obj, data);       // logs: 0 [1, 2, 3]
printThisAndData.call(obj, ...data);    // logs: 0 1 2 3

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.apply(obj, data);      // logs: 0 1 2 3
printThisAndData.apply(obj, ...data);   // Throws a TypeError

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

const printObjAndData = printThisAndData.bind(obj);

printObjAndData(data);                  // logs: 0 [1, 2, 3]
printObjAndData(...data);               // logs: 0 1 2 3

const printObjTwoAndData = printThisAndData.bind(obj, 2);

printObjTwoAndData(data);               // logs: 0 2 [1, 2, 3]
printObjTwoAndData(...data);            // logs: 0 2 1 2 3

Context

From 30-seconds-of-code: function-call-apply-bind

Revisions (0)

No revisions yet.