30-seconds-of-code/articles/snippets/javascript-function-call-apply-bind.md

title, shortTitle, type, tags, author, cover, excerpt, dateModified

title	shortTitle	type	tags	author	cover	excerpt	dateModified
JavaScript function methods - call(), apply() and bind()	Function methods - call(), apply() and bind()	story	javascript function	chalarangelo	canoe	Learn everything you need to know about JavaScript's `call()`, `apply()` and `bind()` in this short guide.	2021-06-12T19:30:41+03:00

Function.prototype.call()

Function.prototype.call() is used to call a function with a given this context and any arguments provided individually. For example:

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.prototype.apply()

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 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.prototype.bind()

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:

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