Prev Next

JavaScript Function Call

The call() method in JavaScript is used to invoke a function with a specific this value and individual arguments. It allows borrowing methods from one object for use in another.

Key Topics

call() Syntax

The call() method takes the first argument as the this value and the subsequent arguments as the function’s parameters.

function greet(greeting, punctuation) {
    console.log(greeting + ", " + this.name + punctuation);
}
const person = { name: "Alice" };
greet.call(person, "Hello", "!");

Output

> Hello, Alice!

Explanation: The call() method sets this to the person object and passes the arguments "Hello" and "!" to the greet function.

Method Borrowing

The call() method is often used to borrow methods from one object and use them on another object.

const obj1 = {
    name: "Alice",
    greet() {
        console.log("Hello, " + this.name);
    }
};
const obj2 = { name: "Bob" };
obj1.greet.call(obj2);

Output

> Hello, Bob

Explanation: The greet method from obj1 is borrowed and executed in the context of obj2.

Invoking with Arguments

You can pass multiple arguments to the call() method, enabling more dynamic function calls.

function add(a, b, c) {
    return this.value + a + b + c;
}
const obj = { value: 10 };
console.log(add.call(obj, 1, 2, 3));

Output

> 16

Explanation: The call() method passes the arguments 1, 2, and 3 to the add function, and this.value is added to their sum.

JavaScript Usage in DOM

Below is a complete DOM example where the call() method is used to dynamically update an element’s text based on different contexts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function Call in DOM</title>
</head>
<body>
    <button onclick="showMessage()">Show Message</button>
    <p id="output"></p>

    <script>
        function displayMessage(greeting) {
            document.getElementById("output").textContent = greeting + ", " + this.name;
        }
        const user = { name: "Alice" };
        function showMessage() {
            displayMessage.call(user, "Hello");
        }
    </script>
</body>
</html>

Key Takeaways

  • call() Method: Invokes functions with a specific this context.
  • Method Borrowing: Share functions across objects.
  • Dynamic Invocation: Pass individual arguments dynamically.
  • DOM Integration: Use call() to dynamically update UI elements.
Prev Next