Function Declaration and Invocation in JavaScript

In JavaScript, functions are blocks of reusable code designed to perform a specific task. Understanding how to declare and invoke (call) functions is fundamental to writing efficient and maintainable code.

• Function Declaration is the process of defining a function with a specific name and logic, allowing it to be reused throughout your program.
• Function Invocation refers to the act of calling or executing a function to carry out its task when needed.

Function Declaration

Function Declaration is how we define a function using the function keyword, giving it a name, optional parameters, and a body of code to execute. These declarations are a powerful way to structure your programs.

Syntax

function functionName(parameters) {
  // code to execute
}

In the above Syntax

• functionName is the name of the function, parameters are the inputs it accepts.
• The code inside the curly braces {} specifies what the function does when called.

Now let's understand this with the help of example:

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

greet("Alice"); 

Output

 Hello, Alice!

In this example

• function greet(name) declares a function named greet that takes one parameter, name.
• The code inside the curly braces prints a greeting message with the provided name.
• When we call greet("Alice"), it outputs "Hello, Alice!".

Note: Function declarations are hoisted. This means you can call them before they’re defined in the code!

Function Invocation

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.

Syntax

function functionName(parameters) {
  // code to be executed
}

In the above syntax

• function: Keyword used to declare a function.
• functionName: The name of the function (used to call it later).
• parameters: Input values the function expects when it is called.
• { // code to be executed }: The block of code that runs when the function is invoked.

Now let's understand this with the help of example

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

// Function Invocation
greet("Alice");  
greet("Bob");    

Output

Hello, Alice!
Hello, Bob!

In this example

• A function greet is created, which takes one parameter name and prints a greeting message.
• greet("Alice"): Calls the greet function with "Alice", and it prints: Hello, Alice!.
• greet("Bob"): Calls the greet function with "Bob", and it prints: Hello, Bob!.

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: "John",
    greet: function () {
        return `Hello, ${this.name}!`;
    },
};
console.log(user.greet()); 

Output

Hello, John

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 alex = new Person("Alex", 25);
console.log(alex.name);   

Output

Alex

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: "Max" };
console.log(greet.call(user, "Hello"));

Output

Hello, Max!

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

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

Output

Hi, Riya!

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

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

Output

Hello, John!

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: "Alexa",
    greet: () => {
        return `Hello, ${this.name}!`; 
        // `this` here is not bound to `user`
    },
};
console.log(user.greet());

Output

Hello, undefined!