JavaScript this, call(), apply() and bind() Practice Questions with Solutions

By /

Introductions

The this keyword is an important part of JavaScript because its value depends on how a function is called. The methods call(), apply(), and bind() allow you to control the value of this. These concepts can feel confusing at first, so this chapter starts with simple examples and gradually moves toward practical usage. JavaScript this, call(), apply() and bind() practice questions with solutions help to build concepts.

Question 1: Understand this Inside an Object

Problem

Create a student object with a name property and a greet() method. Use this to access the student’s name.

Solution

const student = {
    name: "Rahul",

    greet: function() {
        console.log("Hello, " + this.name);
    }
};

student.greet();

Output

Hello, Rahul

Step-by-step Explanation

  1. The student object has a name property.
  2. The greet() method belongs to the object.
  3. Inside greet(), this refers to the object that called the method.
  4. this.name therefore accesses "Rahul".
  5. The greeting is displayed.

Question 2: Use this to Access Multiple Object Properties

Problem

Create a person object with name and age. Create a method that displays both values using this.

Solution

const person = {
    name: "Aman",
    age: 20,

    showDetails: function() {
        console.log("Name:", this.name);
        console.log("Age:", this.age);
    }
};

person.showDetails();

Output

Name: Aman
Age: 20

Step-by-step Explanation

  1. name and age are properties of person.
  2. showDetails() is a method of the same object.
  3. this.name accesses the name property.
  4. this.age accesses the age property.
  5. Both values are displayed.

Question 3: Use call() to Borrow a Method

Problem

Create two objects with different names. Create a greet() method in the first object and use call() to execute that method for the second object.

Solution

const person1 = {
    name: "Rahul",

    greet: function() {
        console.log("Hello, " + this.name);
    }
};

const person2 = {
    name: "Priya"
};

person1.greet.call(person2);

Output

Hello, Priya

Step-by-step Explanation

  1. person1 has the greet() method.
  2. person2 has only a name property.
  3. Normally, person1.greet() uses person1 as this.
  4. call(person2) tells JavaScript to execute greet() with person2 as this.
  5. Therefore, this.name becomes "Priya".

Question 4: Pass Arguments Using call()

Problem

Create a function that uses this.name and accepts a city as an argument. Use call() to provide the object and city.

Solution

function introduce(city) {
    console.log("My name is " + this.name);
    console.log("I live in " + city);
}

const person = {
    name: "Neha"
};

introduce.call(person, "Delhi");

Output

My name is Neha
I live in Delhi

Step-by-step Explanation

  1. introduce() uses this.name.
  2. person contains the name property.
  3. call() sets this to person.
  4. "Delhi" is passed as the function argument.
  5. this.name becomes "Neha".
  6. city becomes "Delhi".

The syntax is:

functionName.call(object, argument1, argument2);

Question 5: Use apply() with Function Arguments

Problem

Create a function that adds two numbers. Use apply() to provide the arguments as an array.

Solution

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

const numbers = [10, 20];

const result = add.apply(null, numbers);

console.log(result);

Output

30

Step-by-step Explanation

  1. add() expects two arguments.
  2. The numbers array contains 10 and 20.
  3. apply() accepts the arguments as an array.
  4. The values are supplied to add().
  5. The function calculates 10 + 20.
  6. The result is 30.

A useful way to remember the difference:

call()  → arguments separately
apply() → arguments as an array

Question 6: Use apply() with this

Problem

Create a function that displays a person’s name and age. Use apply() to set this and provide the age as an argument.

Solution

function showDetails(age) {
    console.log("Name:", this.name);
    console.log("Age:", age);
}

const person = {
    name: "Aman"
};

showDetails.apply(person, [21]);

Output

Name: Aman
Age: 21

Step-by-step Explanation

  1. showDetails() uses this.name.
  2. person contains the name "Aman".
  3. apply() sets this to person.
  4. [21] provides the function argument.
  5. age receives 21.
  6. Both values are displayed.

Question 7: Create a Permanent Function with bind()

Problem

Create a function that displays a person’s name. Use bind() to permanently associate the function with a specific object.

Solution

function greet() {
    console.log("Hello, " + this.name);
}

const person = {
    name: "Rahul"
};

const greetPerson = greet.bind(person);

greetPerson();

Output

Hello, Rahul

Step-by-step Explanation

  1. greet() uses this.name.
  2. person contains the required name.
  3. bind(person) creates a new function.
  4. The new function remembers person as its this value.
  5. Calling greetPerson() displays "Hello, Rahul".

Unlike call() and apply(), bind() does not immediately execute the function.

Question 8: Use bind() with Arguments

Problem

Create a function that displays a person’s name and city. Use bind() to set both the this value and the city.

Solution

function introduce(city) {
    console.log(this.name + " lives in " + city);
}

const person = {
    name: "Priya"
};

const introducePriya = introduce.bind(person, "Delhi");

introducePriya();

Output

Priya lives in Delhi

Step-by-step Explanation

  1. introduce() uses this.name.
  2. person provides the name.
  3. bind(person, "Delhi") sets this to person.
  4. It also prepares "Delhi" as the first argument.
  5. introducePriya() is called later.
  6. The function displays the prepared information.

Question 9: Compare call(), apply() and bind()

Problem

Create a function that displays a person’s name. Use call(), apply(), and bind() with the same object.

Solution

function greet() {
    console.log("Hello, " + this.name);
}

const person = {
    name: "Neha"
};

// call()
greet.call(person);

// apply()
greet.apply(person);

// bind()
const boundGreet = greet.bind(person);
boundGreet();

Output

Hello, Neha
Hello, Neha
Hello, Neha

Step-by-step Explanation

All three methods can control the value of this, but they behave differently.

call()

greet.call(person);

Calls the function immediately.

apply()

greet.apply(person);

Also calls the function immediately. It is especially useful when function arguments are supplied as an array.

bind()

const boundGreet = greet.bind(person);

Creates a new function that can be called later.

A simple comparison:

MethodExecutes immediately?Arguments
call()YesSeparate arguments
apply()YesArray
bind()NoCreates a new function

Question 10: Use call() with Two Objects

Problem

Create a function that displays a person’s name and profession. Use the same function with two different objects using call().

Solution

function showProfile() {
    console.log(this.name + " is a " + this.profession);
}

const person1 = {
    name: "Rahul",
    profession: "Developer"
};

const person2 = {
    name: "Priya",
    profession: "Designer"
};

showProfile.call(person1);
showProfile.call(person2);

Output

Rahul is a Developer
Priya is a Designer

Step-by-step Explanation

  1. showProfile() uses this.name and this.profession.
  2. person1 contains Rahul’s information.
  3. call(person1) makes this refer to person1.
  4. The first profile is displayed.
  5. call(person2) changes this to person2.
  6. The second profile is displayed.
  7. One function can therefore be reused with different objects.

Key Takeaways

  • this refers to a value determined by how a function is called.
  • Inside an object method, this commonly refers to the object calling the method.
  • call() lets you explicitly set this and executes the function immediately.
  • apply() also sets this and executes immediately.
  • apply() accepts function arguments as an array.
  • call() accepts arguments individually.
  • bind() creates a new function with a specified this value.
  • bind() does not execute the function immediately.
  • call(), apply(), and bind() are useful for reusing functions with different objects.
  • These methods are important when working with object-oriented and reusable JavaScript code.

FAQs

1. What is this in JavaScript?

this is a special keyword whose value depends on the way a function is called.

For example:

const user = {
    name: "Rahul",

    greet: function() {
        console.log(this.name);
    }
};

user.greet();

Here, this refers to the user object.

2. What does call() do in JavaScript?

call() invokes a function immediately while allowing you to specify its this value.

function greet() {
    console.log(this.name);
}

const user = {
    name: "Aman"
};

greet.call(user);

3. What does apply() do in JavaScript?

apply() invokes a function immediately and allows you to specify its this value. Its arguments are supplied as an array.

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

console.log(add.apply(null, [10, 20]));

4. What does bind() do in JavaScript?

bind() creates a new function with a specified this value.

const user = {
    name: "Neha"
};

function greet() {
    console.log(this.name);
}

const newGreet = greet.bind(user);

newGreet();

5. What is the difference between call() and apply()?

Both execute the function immediately and can set this.

The main difference is how arguments are supplied.

add.call(null, 10, 20);

With apply():

add.apply(null, [10, 20]);

6. What is the difference between bind() and call()?

call() executes the function immediately.

greet.call(user);

bind() creates a new function that can be executed later.

const newGreet = greet.bind(user);
newGreet();

7. Why are call(), apply() and bind() useful?

They allow you to control the this value and reuse functions with different objects. They are particularly useful when working with reusable functions and object-based JavaScript code.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top