← The JavaScript this Keyword JavaScript Function apply() →

JS FunctionsLesson #220

JavaScript Function call()

The call() method can be used to call a function with a specific this.

The JavaScript call() Method

The call() method can be used to call a function with a specific this.

The call() method lets an object use a method belonging to another object.

In this way, the same method can be used on different objects.

call() is an advanced topic. > Make sure you understand this before continuing: > The this Keyword

Basic call() Syntax

The call() method is used to call a function with an object as an argument.

The call() method takes this as the first argument.

Additional arguments are passed as a comma-separated list.

Syntax

Example Code

javascript

Try it Yourself

functionName.call(this, arg1, arg2, ...);

Using call() to Set this

When you use call(), you can decide what this should refer to.

In the example below, the greet function returns a greeting + this.name.

When you use call(), you decide that this should be the person3 object.

Example

Example Code

javascript

Try it Yourself

const person1 = { name: "John" };

const person2 = { name: "Paul" };

const person3 = { name: "Ringo" };

function greet(greeting) {

  return greeting + " " + this.name;

}

greet.call(person3, "Hello");

Borrowing a Method from Another Object

You can use call() to borrow a method from another object:

Example 1

Example Code

javascript

Try it Yourself

const person = {

    fullName: function() {

    return this.firstName + " " + this.lastName;

    }
}

const person1 = {

  firstName:"John",

    lastName: "Doe"

  }

const person2 = {

  firstName:"Mary",

    lastName: "Doe"
}

// This will return "John Doe":

  person.fullName.call(person1);

Example 2

Example Code

javascript

Try it Yourself

const person = {

    fullName: function() {

      return this.firstName + " " + this.lastName;

    }
}

const person1 = {

  firstName:"John",

    lastName: "Doe"

  }

const person2 = {

    firstName:"Mary",

    lastName: "Doe"
}

// This will return "Mary Doe"

  person.fullName.call(person2);

The call() Method with Arguments

The call() method can accept arguments.

Arguments are passed normally, separated by commas:

Example

Example Code

javascript

Try it Yourself

const person = {

    fullName: function(city, country) {

    return this.firstName + " " + this.lastName
  + "," + city + "," + country;

    }
}

const person1 = {

  firstName:"John",

  lastName: "Doe"

}

person.fullName.call(person1, "Oslo", "Norway");

call() vs Normal Function Call

Compare a normal function call with a call() call.

Example

Example Code

javascript

Try it Yourself

function showName() {

      return this.name;

    }

    const person = { name: "John" };

    showName();

    showName.call(person);

Without call(), this is not the person object.

With call(), this is set explicitly.

call() Does Not Create a New Function

The call() method executes the function immediately. It does not return a new function.

Example

Example Code

javascript

Try it Yourself

function sayHello() {

      return "Hello " + this.name;

    }

    const person = { name: "John" };

    sayHello.call(person);

If you need a new function that remembers this, use bind() instead.

Common Mistakes

### Forgetting that call() Runs Immediately call() does not return a reusable function.
### Passing Arguments as an Array call() requires arguments to be listed one by one. Use apply() for arrays.
### Using call() Without Understanding this Always know what this should refer to.

Quiz > What is the main difference between call() and a normal function call?

Next Chapter

JavaScript Function apply()

Related this Topics > The this Keyword > The call() Method > The apply() Method > The bind() Method