JavaScript Function Invocation

In JavaScript, function invocation refers to executing the code defined in a function. Function invocation occurs when a function is called or executed in JavaScript. When invoked, the code inside the function block is run, and any return value is computed and passed back to the caller.

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Meeta")); 

Hello, Meeta!

• The function greet is invoked with the argument "Meeta".
• The string "Hello, Meeta!" is returned and logged to the console.

Types of Function Invocation

JavaScript provides several ways to invoke functions. Each method affects the behavior of this (the execution context) and other factors.

1. Function Invocation

When a function is called directly using its name, it operates in the global or local scope.

function add(a, b) {
    return a + b;
}
console.log(add(5, 3)); 

8

Scope: In non-strict mode, this defaults to the global object (window in browsers).

2. Method Invocation

When a function is a property of an object and is invoked as object.method(), it is called a method invocation.

const user = {
    name: "Meeta",
    greet: function () {
        return `Hello, ${this.name}!`;
    },
};
console.log(user.greet()); 

Hello, Meeta!

In method invocation, this refers to the object that owns the method (in this case, user).

3. Constructor Invocation

Functions can be invoked as constructors using the new keyword. When invoked this way, the function creates a new object and sets this to refer to that object.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
const meeta = new Person("Meeta", 25);
console.log(meeta.name); 

Meeta

A constructor invocation returns the newly created object.

4. Indirect Invocation

Functions can be invoked indirectly using call(), apply(), or bind().

call(): Invokes a function and explicitly sets this and individual arguments.

function greet(greeting) {
    return `${greeting}, ${this.name}!`;
}
const user = { name: "Meeta" };
console.log(greet.call(user, "Hello"));

Hello, Meeta!

apply(): Similar to call(), but arguments are passed as an array.

function greet(greeting) {
    return `${greeting}, ${this.name}!`;
}
const user = { name: "Meeta" };
console.log(greet.apply(user, ["Hi"]));

bind(): Creates a new function with this permanently set to the provided value.

function greet(greeting) {
    return `${greeting}, ${this.name}!`;
}
const user = { name: "Meeta" };
const boundGreet = greet.bind(user);
console.log(boundGreet("Hey")); 

Hey, Meeta!

5. Self-Invoking Functions

Self-invoking (or immediately invoked) functions run automatically without being explicitly called. These are often written as Immediately Invoked Function Expressions (IIFEs).

(function () {
    console.log("This is a self-invoking function!");
})();

This is a self-invoking function!

IIFEs are commonly used for encapsulating code to avoid polluting the global scope.

6. Arrow Function Invocation

Arrow functions are invoked like regular functions but differ in how they handle this. They do not bind their own this; instead, they inherit this from their lexical scope.

const user = {
    name: "Meeta",
    greet: () => {
        return `Hello, ${this.name}!`; 
        // `this` here is not bound to `user`
    },
};
console.log(user.greet());

Hello, undefined!