Exploring the call() Method in JavaScript

In Javascript, the Function.prototype.call() method is a powerful tool that allows us to invoke a function with a specified this context and arguments. I have already discussed the sister method (Function.prototype.apply()) before, so it makes sense to explore the call() method, and demonstrate how it differs from similar methods like apply(), particularly in more modern ES6 and ES6 and React contexts.

What is prototype.call()?

Function.prototype.call() is a method that allows us to call a function with a specified this value alongside individual arguments. It is one of the fundamental methods in JavaScript for altering the execution context of a function.

Syntax

func.call(thisArg, arg1, arg2, ...)

• func: The function to be called.
• thisArg: The value to use as this when calling func.
• arg1, arg2, ...: Arguments to pass to the function.

Using call() in JavaScript

A Basic Example

Using call(), you can invoke a function and explicitly set what this refers to within that function's scope. For example:

function greet(subject) {  console.log(`Hello, ${subject}, I am ${this.name}`);}const person = { name: 'Ellie' };greet.call(person, 'World');  //=> "Hello, World, I am Ellie"

In this example, greet is called with this set to person, and "World" is passed as an argument.

I've gone a little old‑school in this example and moved away from ES6 and arrow functions, because arrow functions in JavaScript do not have their own this context (they inherit this from the surrounding lexical context). So, using call() or apply() to set this for an arrow function does not work as it does for regular functions.

Why and When to Use call()

• Borrowing

  : call() is especially useful for borrowing methods from different objects.

• Changing Context

  : It allows invoking a function in a different context, which is useful in more complex patterns of object‑oriented JavaScript.

An Example in ES6 Context

As I mentioned above, with the advent of arrow functions in ES6, which don't have their own this context, call() is less frequently used for changing context. However, it does remain a useful method of borrowing and invoking functions from within a specific context.

For example:

const person = {  name: 'Ellie',  introduce() {    console.log(`My name is ${this.name}`);  },};const anotherPerson = { name: 'Simon' };person.introduce.call(anotherPerson);  //=> "My name is Simon"

Differences from apply()

Whilst both call() and apply() are used for calling a function with an explicit this context, the key difference lies in how they handle arguments:

• call() takes arguments separately.
• apply() takes arguments as an array.

Use in React with ES6

In a React component, especially when dealing with class components or handling events, call() can be used to call methods with a specific context, although this pattern has become less common with the adoption of arrow functions and functional components.

Wrapping up

Although redundant in part with the introduction of ES6 and arrow functions, Function.prototype.call() remains a useful part of the JavaScript ecosystem for scenarios where you might need to method borrowing or invoke functionality within a specific context.

Although the need to manually bind this in callbacks has decreased with arrow functions in ES6, understanding call() enriches a developer's understanding of JavaScript's functional programming capabilities.