Anonymous self-executing functions with parameters from an external scope

Question

Anonymous self-executing functions with parameters from an external scope

Recently, I stumbled upon the code snippet below while following a tutorial.

const increment = (function(){
    return function incrementbytwo (number){
        return number+2;
    }
})();

console.log(increment(1));

The result of the code above is 3.

I have a few questions about this code:

How does the inner function incrementbytwo receive input from an external source if it is enclosed within a Self-Executing Anonymous Function?
Can you provide a step-by-step explanation of how this code is executed?
In what real-world scenario would one use a function like this?

javascript function dom-events anonymous-function self-invoking-function

Answer 1

Answer №1

When a self-executing IFFE is used, it results in the creation of a function statement that is assigned to the increment identifier. This can be thought of as equivalent to:

const increment = function incrementbytwo (number){
    return number+2;
}

Just so you know, the increment variable is block scoped within the enclosing code block (const), while incrementbytwo is function scoped and not accessible outside its own function (due to being a function expression).

In summary:

1) The right-hand side is evaluated first, returning a function statement that defines incrementbytwo(number), expecting a number as an argument.
2) This function statement is then assigned to increment (as a function expression). It uses the same signature as the function statement, taking a single argument to pass into the function.
3) By calling increment(1), the magic unfolds.

No additional points for now.

Answer 2

When a self-executing IFFE is used, it results in the creation of a function statement that is assigned to the increment identifier. This can be thought of as equivalent to:

const increment = function incrementbytwo (number){
    return number+2;
}

Just so you know, the increment variable is block scoped within the enclosing code block (const), while incrementbytwo is function scoped and not accessible outside its own function (due to being a function expression).

In summary:

1) The right-hand side is evaluated first, returning a function statement that defines incrementbytwo(number), expecting a number as an argument.
2) This function statement is then assigned to increment (as a function expression). It uses the same signature as the function statement, taking a single argument to pass into the function.
3) By calling increment(1), the magic unfolds.

No additional points for now.

Answer 3

Answer №2

My interpretation of this is as follows:

Let's begin with #2 on your list, as it will simplify things. What you have here is a self-executing anonymous function that actually RETURNS a stored function.

You assign the increment constant to the result returned by executing the anonymous function.
When the anonymous function runs, it returns the function incrementbytwo, which then gets assigned to the increment constant.
Next, you execute the stored function within the increment constant, now known as incrementbytwo(number).

The code provided above is essentially a typical function declaration with some additional steps during assignment.

const increment = function increment(number){
        return number+2;
    }

console.log(increment(1));

As far as I am aware, there isn't a practical application for this particular code setup (feel free to correct me in the comments).

Answer 4

My interpretation of this is as follows:

Let's begin with #2 on your list, as it will simplify things. What you have here is a self-executing anonymous function that actually RETURNS a stored function.

You assign the increment constant to the result returned by executing the anonymous function.
When the anonymous function runs, it returns the function incrementbytwo, which then gets assigned to the increment constant.
Next, you execute the stored function within the increment constant, now known as incrementbytwo(number).

The code provided above is essentially a typical function declaration with some additional steps during assignment.

const increment = function increment(number){
        return number+2;
    }

console.log(increment(1));

As far as I am aware, there isn't a practical application for this particular code setup (feel free to correct me in the comments).

Anonymous self-executing functions with parameters from an external scope

Answer №1

Answer №2

Similar questions

beforeunload event confirmation prompt

Transform uploaded image file into a blob format and store it in a VueJS database

Issues with CSS not loading properly on EJS files within subdirectories

Utilizing Vue.js to set the instance global property as the default value for a component prop

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Choose a word at random from a JSON string

Having trouble with material-ui installation in React, Redux, and React-Router project

Node.js is throwing an error stating that it cannot read the property 'id' of a null value

How can I easily add both horizontal and vertical arrows to components in React?

Safari experiencing hang after successful CORS OPTIONS request

Problem: The variable "$" is not defined in angular datatables causing a ReferenceError

Attempting to hash the password led to encountering an error

We were unable to locate the module '@reactflow/core' or its associated type declarations

Tips on transferring dynamically generated results to a user-friendly print window

issue with JavaScript canvas

I am having trouble unzipping the file

Best practice for structuring an object with multiple lengthy string elements in the GCP Datastore Node Library

Tips for iterating through an array of object literals and combining values with matching IDs

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

Guide to creating a Map with typescript