call() in JavaScript

Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Learn via video course

Javascript Course - Mastering the Fundamentals
Javascript Course - Mastering the Fundamentals
By Mrinal Bhattacharya
Free
star4.8
Enrolled: 1000
Javascript Course - Mastering the Fundamentals
Javascript Course - Mastering the Fundamentals
Mrinal Bhattacharya
Free
4.8
icon_usercirclecheck-01Enrolled: 1000
Start Learning

Overview

A function/method belonging to one object can be assigned to and invoked for another object using the call() method. It can be used for constructor chaining, invoking anonymous functions, and some other interesting applications, which we will take a look at later in this article.

Syntax of Function call() in Javascript

The syntax to invoke the call method is to pass in the context and the arguments list, these are passed just as they are in the calling function, following the thisArg.

The call method is to be invoked as follows:

(The above code will call myFunction from the context of thisArg with the given arguments and execute the function call immediately.)

thisArg: The value of thisArg when the function is invoked. It's a non-mandatory argument. If thisArg is omitted, then the value of this becomes:

  • global object in non-strict mode
  • undefined strict mode

After the thisArg parameter, we can pass as many numbers of arguments to the function.

The value returned by the function is the result returned by the call method.

Parameters of Function call() in Javascript

The following are the parameters of call() in javascript:

  • thisArg (optional) : the this value (context) when invoking the function.
  • ...argN (optional) : function arguments as they are present in the calling function.

The call method takes a thisArg (the context) and the list of arguments as they are in the calling function. The thisArg mentioned can be any context and object, global context, etc. The thisArg parameter is optional. The rest are arguments that have to be passed just like that, unlike apply (where we pass a list of arguments specified in the calling function). Again the list of function parameters is optional as well.

Return Value of Function call() in Javascript

Return Type: same as the return type of the calling function

The return value of the call method is the return value of the calling function with the passed thisArg value and the arguments.

Example of Call Method Invocation

Here is a short example to understand the fundamental working of the call method

In the above example, we can define a function greet that logs the greeting, but the greeting comes from the this, which is the context that will be supplied, and the name is a parameter that is passed as an argument. The obj declared above has a property called sal. So when we invoke greet by passing obj’s context compiler will refer sal from the obj context, and the output will be "hello Michael".

Exceptions of Function call() in Javascript

  1. thisArg may or may not be the actual value seen by the procedure in some situations.
  2. Null and undefined will be replaced with the global object, and primitive values will be converted to objects if the method is a function in non-strict mode.
  3. Although the syntax is nearly identical to that of apply(), the main distinction is that call() takes an argument list (as (thisArg, arg1, arg2, ..., argN)), whereas apply() takes a single array of parameters ((thisArg, [arg1, arg2, ...., argN])).
  4. It is not technically necessary to pass an object as this value (although here it has been done for demonstration purposes).

What is Function call() in Javascript?

Since all JavaScript functions are an instance of the Function type, they inherit the properties and methods defined in the Function prototype, among which is the call method (Function.prototype.call).

The Function call is a standard JavaScript mechanism for writing methods for various objects. The method is called with the owner object as a parameter. this corresponds to the "owner" of the function or object to which it belongs. In JavaScript, all functions are defined as object methods. If a function isn't classified as a method of a JavaScript object, it becomes a method on the global object.

More Examples

1. Constructor Chaining Using the Call Method

Call in JavaScript can be used to chain constructors for objects. Defining the logic once in a function that can be repeated again.

Considering the above example, we first declare a constructor for the Person object. The Person constructor function is defined with two parameters, name and age, which initialize the respective properties.

Then the two other functions Student and Teacher utilise the logic which we have already coded in the Person constructor function to each set the same properties the Student and the Teacher objects.

We will invoke Person from the context of Student and Teacher passing this and the name and age parameters to the call method, this initializes the properties name, and age and then each of the function set the des property on their objects.

2. Using Call to Invoke Anonymous Functions

You can use the call method on anonymous functions to immediately invoke them.

Here we create an anonymous function that prints the values along with their index. We use call to invoke on each of the objects in the array.

3. Using call() to Invoke a Function and Specifying the Context for 'this'

We can specify the this context on the call method by passing a specific object as the thisArg.

This is the previous example where we pass obj as the thisArg, thus binding the this to obj.

4. Using call() to Invoke a Function without Specifying the First Argument

The call method can be invoked without providing the first argument, in which case the call method takes the global context (window object in the browser and global in NodeJS).

Here, on invoking send.call, the msg from the global context is used as the this gets bound to the global object when not specifying the thisArg.

Browser Compatibility

Browsers that supports call function in javascript include:

Google Chrome >= 1.0,
Firefox >= 1.0,
Microsoft Edge >= 12.0,
Internet Explorer >= 5.5,
Opera >= 4.0,
and Safari >= 1.0.

Conclusion

  • The Function call in JavaScript is a standard mechanism for writing methods for various objects.
  • The syntax to invoke the call method is to pass in the context and the arguments list. The call method takes a thisArg (the context) and the list of arguments as they are in the calling function.
  • The return value of the call method is the return value of the calling function with the passed thisArg value and the arguments.
  • Although the syntax is nearly identical to that of apply(), the main distinction is that call() takes an argument list, whereas apply() takes a single array of parameters.

See Also