JavaScript call() Method: Complete Guide (Examples)

By /
Using the call method in js

In JavaScript, the call() method calls a function like a traditional function call but with a custom this value.

This can be useful for borrowing methods from other objects, or for assigning a new this value when calling a function.

This is a comprehensive guide to understanding how the call() method works in JavaScript. You will also learn when it’s useful and how to apply it in different situations. Besides, you get a brief recap as to how this keyword works in JavaScript.

Let’s jump into it!

The call() Method in JavaScript

In JavaScript, you can call any function not only by using the name of the function but also via the call() method.

In JavaScript, the call() method is a built-in property that resides in every JavaScript function.

In general, using the call() method looks something like this:

fun.call(thisArg, arg1, arg2, ..., argN)

Where the thisArg specifies what’s the this property inside the function fun. In other words, it specifies on which object the function fun is called. Then the arguments that follow (arg1, arg2…) are the fun arguments.

Example

The best way to understand how the call() method works is by seeing some examples.

Let’s create a function called add() and call it in a traditional way and by using the call() method side by side:

function add(a, b) {
  return a + b;
}

// Traditional function call
add(1, 2)

// Using the call() method
add.call(null, 1, 2);

These two function calls produce the exact same result.

In the call() method approach, the null argument means you don’t call the function on a particular object. In other words, it’s just a traditional function call with a funny-looking syntax.

In the next section, you will learn how to use the thisArg to make using the call() method actually useful.

Use call() to Borrow Functions to Objects

At this point, you may wonder what’s the logic of using the call() method if you can call the function easier directly, right?

A common reason for using the call() method is to borrow a function from one object to another.

For example, let’s borrow the say() method from obj1 and call it on obj2:

const obj1 = {
  name: "Alice",
  say: function() {
    console.log(`Hi, it is ${this.name}`);
  }
}

// define another object that wants to borrow the method
const obj2 = {
   name: "Bob"
}

// call the obj1's method on obj2
obj1.say.call(obj2)

Output:

Hi, it is Bob

In this example, the obj2 object borrows the obj1.say() method by calling it with the call() method. This allows the obj1.say() method to be called as if it belonged to obj2.

This way, you don’t have to write the same method in the obj2 as you can just reuse the one in obj1.

Notice that in the above function call, the thisArg is obj2. This sets the ‘this‘ of the function say() as the obj2. This way the say() function knows that this.name refers to “Bob“, not “Alice“.

By the way, if you’re not too familiar with this keyword in JavaScript, feel free to read the next section to learn/recap what it is.

What Is ‘this’ in JavaScript?

In JavaScript, this is a special keyword that refers to the object that is currently executing the code. It’s like the “me” of an object. In other programming languages, this is sometimes called self.

For example:

const obj1 = {
  name: "Alice",
  say: function() {
    console.log(`Hi, it is ${this.name}`);
  }
}

obj1.say()

Output:

Hi, it is Alice

In this example, this refers to the obj1 when the obj1.say() method is called. This way the say() method can read and use the properties of the object in which it lives.

The value of this can be changed using not only the call() method, but also related methods apply() and bind().

call() vs apply() in JavaScript

The call() method is almost identical to the apply() method in JavaScript. The apply() method also allows you to borrow a method from one object to another.

The only difference is apply() method takes the arguments as an array, unlike the call() method that takes the individual arguments as traditional comma-separated arguments.

For example:

function add(a, b) {
  return a + b;
}

// Using the apply() method
add.apply(null, [1, 2]);

Make sure to also read call() vs apply() in JavaScript!

Thanks for reading. Happy coding!

Scroll to Top