JavaScript Nested functions

A nested function (also known as an inner function) is a function that is declared within another function (known as the outer function). The inner function has access to the variables of its outer function, forming a lexical scope chain.

function outer() {
    console.log('This is the outer function')
    function inner() {
        console.log("This is the inner function.")
    }
    inner();
}
outer(); 

This is the outer function
This is the inner function.

In this code

• The outer() function is defined to hold the main logic of this example.
• Inside outer(), there’s a nested function inner(), which can perform actions like logging messages.
• When outer() is called, it also calls inner(), so both functions run in sequence.
• Calling outer() first logs "This is the outer function" and then calls inner(), logging "This is the inner function."
• The inner() function is nested inside outer() and can only be called from within outer(), showing how nesting works with scope.

How nested functions work in JavaScript

• A nested function is a function defined inside another function in JavaScript.
• The inner function has access to the variables and parameters of the outer function.
• The inner function can be called only from within the outer function.
• Nested functions allow for better organization and code reuse.
• They enable closures, where the inner function can "remember" and access variables from the outer function even after the outer function has finished executing.

Inner Function Accessing Outer Variables

Inner functions can access variables from the outer function, which can be useful for manipulating data within the scope.

function outer(a, b) {
    function inner() {
        return a + b;
    }
    console.log(inner());
}
outer(2, 3)

5

In this code

• The outer() function is defined with two parameters a and b.
• Inside outer(), there is a nested function inner() that returns the sum of a and b.
• The inner() function can access the variables a and b from its outer function outer() due to closure.
• When outer(2, 3) is called, it executes inner() and prints the result (5) to the console.

Returning an Inner Function (Closure)

Nested functions can return inner functions, creating closures that "remember" the outer function’s scope.

function outer(x) {
    return function inner(y) {
        return x + y;
    };
}

const addFive = outer(5);
console.log(addFive(3)); 

8

In this code

• The outer() function takes one parameter x and returns the inner() function, which takes a parameter y.
• The inner() function has access to the x variable from the outer function due to closures, even after outer() has finished executing.
• When outer(5) is called, it returns a new function where x is fixed at 5, and this function is assigned to addFive.
• When addFive(3) is called, it adds 5 (from outer()) and 3 (from inner()) and prints 8 to the console.

Nested Functions with Multiple Arguments

You can create more complex nested functions that accept multiple arguments.

function outer(x, y) {
    function inner(a, b) {
        return a * b + x + y;
    }
    return inner(3, 4);
}

console.log(outer(2, 5));

19

In this code

• he outer function is defined to take two parameters, x and y.
• Inside outer function, there’s an inner function that takes its own parameters a and b and performs a calculation using x and y from the outer function.
• Inside outer function, inner function is called, which multiplies 3 and 4, then adds x and y (which are 2 and 5).

Nested Functions for Encapsulation

Nested functions can also be used for encapsulating logic and keeping variables private within the outer function's scope.

function counter() {
    let count = 0;
    function increment() {
        count += 1;
        return count;
    }
    return increment;
}

const myCounter = counter();
console.log(myCounter());
console.log(myCounter());

1
2

In this code

• The counter() function defines a local variable count and an inner function increment().
• The increment() function increases count by 1 every time it's called and returns the updated value of count.
• When counter() is called, it returns the increment() function, which is assigned to myCounter.
• Each time myCounter() is called, it increments the count and returns the updated value, printing 1 and then 2 to the console.

Greeting according to time of day

You can use nested functions to create a greeting message based on the time of day. The outer function calls the inner function to determine the part of the day (morning, afternoon, evening) and then returns the appropriate greeting.

function greet(name) {
    const hours = new Date().getHours();
    const timeOfDay = hours < 12 ? "Good morning" : hours < 18 ? 
        "Good afternoon" : "Good evening";
    console.log(`${timeOfDay}, ${name}!`);
}

greet("Pranjal");

• Get Current Hour: The hours variable stores the current hour of the day using new Date().getHours().
• Determine Time of Day: The timeOfDay is determined using a ternary operator based on the hours value: before 12 is "Good morning", between 12 and 18 is "Good afternoon", and after 18 is "Good evening".
• Display Greeting: The greeting message is printed to the console, incorporating the name passed to the greet() function.

Benefits of Using Nested Functions

1. Encapsulation: Inner functions help in structuring the code by keeping helper functions private and preventing unwanted access.
2. Code Organization: They help break down large functions into smaller, manageable units.
3. Access to Outer Variables: Inner functions can access the variables and parameters of their outer function due to lexical scoping.
4. Avoiding Global Pollution: Since inner functions are not accessible outside their outer function, they do not interfere with the global scope.

Limitations of Nested Functions

• Memory Usage: Since inner functions maintain references to outer function variables, they may consume memory even after the outer function execution completes.
• Performance Impact: Defining a function inside another function means a new function is created every time the outer function is called, which can lead to performance inefficiencies in high-frequency executions.
• Code Complexity: Excessive nesting can make the code harder to read and debug.

Conclusion

Nested functions in JavaScript are a great way to structure your code, encapsulate logic, and create powerful closures. By understanding how they work and using them effectively, you can write cleaner, more modular, and maintainable code.