Prev Next

JavaScript Function Invocation

Function invocation is the process of calling or executing a function. In JavaScript, functions can be invoked in different ways, including direct invocation, as a method, or using built-in methods like call or apply.

Key Topics

Direct Invocation

A function is directly invoked by its name followed by parentheses containing any arguments.

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

Output

> Hello, Alice!

Explanation: The greet function is invoked directly, passing "Alice" as an argument to log a greeting message.

Method Invocation

When a function is a property of an object, it is invoked as a method using dot notation.

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

Output

> Hello, Alice!

Explanation: The greet method is invoked as a property of the person object, with this referring to the object itself.

Dynamic Invocation

Functions can be dynamically invoked using call, apply, or by assigning a reference to another variable.

function showMessage() {
    console.log("Dynamic invocation works!");
}
const dynamicFunction = showMessage;
dynamicFunction();

Output

> Dynamic invocation works!

Explanation: The showMessage function is dynamically assigned to another variable dynamicFunction and invoked using the new reference.

JavaScript Usage in DOM

Below is a complete DOM example using a dynamically invoked function to update the content of a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function Invocation in DOM</title>
</head>
<body>
    <button onclick="updateContent()">Invoke Function</button>
    <p id="content"></p>

    <script>
        function showContent() {
            return "Function dynamically invoked!";
        }
        const updateContent = () => {
            document.getElementById("content").textContent = showContent();
        };
    </script>
</body>
</html>

Key Takeaways

  • Direct Invocation: Call functions by their name followed by parentheses.
  • Method Invocation: Invoke functions as properties of an object.
  • Dynamic Invocation: Use references to invoke functions flexibly.
  • DOM Integration: Dynamically call functions to update webpage content.
Prev Next