The use of functions and parentheses in Javascript

Question

The use of functions and parentheses in Javascript

I'm having trouble understanding how the f() functions work. Could someone please explain why it prints two '1's? I know it prints '1' for every '()' after f(f), but I don't understand the reasoning behind it.

function f(y) {
  let x = y;
  var i = 0;
  return () => {
    console.log(++i);
    return x(y);
  };
}
f(f)()();

Also, I'm confused about why the 'i' value does not increase.

Any help would be greatly appreciated.

javascript

Answer 1

Answer №1

function f(y) {
  let x = y;
  var i = 0;
  return () => {
    console.log(++i);
    return x(y);
  };
}
f(f)()();

can also be written as

function f() {
  var i = 0;
  return () => {
    console.log(++i);
    return f();
  };
}
const t1 = f();
const t2 = t1();
t2();

Alternatively, it can be simplified to

function f() {
  var i = 0;
  return () => {
    console.log(++i);
  };
}
const t1 = f();
t1();
const t2 = f();
t2();

If you were to call either t1 or t2 multiple times, the i value in their respective closures would increment accordingly. However, chaining them would result in calling f again, initializing a new var i = 0 for a different closure.

Answer 2

function f(y) {
  let x = y;
  var i = 0;
  return () => {
    console.log(++i);
    return x(y);
  };
}
f(f)()();

can also be written as

function f() {
  var i = 0;
  return () => {
    console.log(++i);
    return f();
  };
}
const t1 = f();
const t2 = t1();
t2();

Alternatively, it can be simplified to

function f() {
  var i = 0;
  return () => {
    console.log(++i);
  };
}
const t1 = f();
t1();
const t2 = f();
t2();

If you were to call either t1 or t2 multiple times, the i value in their respective closures would increment accordingly. However, chaining them would result in calling f again, initializing a new var i = 0 for a different closure.

Answer 3

Answer №2

Initially, the f(y) function essentially invokes y on itself. When you call f(y), it generates a fresh function that, upon execution, will perform x(y) and yield the output.

To clarify, just substitute f(f) for each f() that you execute in this instance, considering that x === y and y === f. The reason i seems to remain stagnant is because each execution produces a new i.

Below the surface, the following actions take place:

    f(f)()();
    // equates to 
    const f1 = f(f);
    const f2 = f1();
    const f3 = f2();
    // initial execution of f(f) occurs first, yielding () => {
    //     console.log(++i);
    //     return x(y);  // essentially returning f(f) in this scenario
    // }

Observe that running f(f) results in x(y), where x(y) appears to be identical to f(f). Though they look similar in code, they are distinct instances. Furthermore, i does not transfer to this new function, nor does it carry over to other instances. Each f(f) generates a fresh i, without passing it on to subsequent functions.

Answer 4

Initially, the f(y) function essentially invokes y on itself. When you call f(y), it generates a fresh function that, upon execution, will perform x(y) and yield the output.

To clarify, just substitute f(f) for each f() that you execute in this instance, considering that x === y and y === f. The reason i seems to remain stagnant is because each execution produces a new i.

Below the surface, the following actions take place:

    f(f)()();
    // equates to 
    const f1 = f(f);
    const f2 = f1();
    const f3 = f2();
    // initial execution of f(f) occurs first, yielding () => {
    //     console.log(++i);
    //     return x(y);  // essentially returning f(f) in this scenario
    // }

Observe that running f(f) results in x(y), where x(y) appears to be identical to f(f). Though they look similar in code, they are distinct instances. Furthermore, i does not transfer to this new function, nor does it carry over to other instances. Each f(f) generates a fresh i, without passing it on to subsequent functions.

Answer 5

Answer №3

Let's call the function on line 4 "function A".
Instead of calling function f() inside function A, you define it at line 4 and then return the result of function A.
The contents of function A are as follows, with variables i = 0 and x = y = f not being exposed due to their use in an inner function:

function A() {
console.log(++i);
return x(y);

Therefore, what you now have is: A()().

Within the first set of parentheses: A() will print a '1' and return the result of f(f), which is function A (the initial i is exposed and a new i is created).

Within the second set of parentheses: A is executed as previously mentioned and returns another instance of A. Since there are no more parentheses left, there will be no further function calls.

Answer 6

Let's call the function on line 4 "function A".
Instead of calling function f() inside function A, you define it at line 4 and then return the result of function A.
The contents of function A are as follows, with variables i = 0 and x = y = f not being exposed due to their use in an inner function:

function A() {
console.log(++i);
return x(y);

Therefore, what you now have is: A()().

Within the first set of parentheses: A() will print a '1' and return the result of f(f), which is function A (the initial i is exposed and a new i is created).

Within the second set of parentheses: A is executed as previously mentioned and returns another instance of A. Since there are no more parentheses left, there will be no further function calls.

Answer 7

Answer №4

In the function f, a new i is declared every time.

Instead of that, you could save the count as a property of the function itself.

function f(y) {
    let x = y;
    f.i = f.i || 0;

    return () => {
        console.log(++f.i);
        return x(y);
    };
}

f(f)()()();

Answer 8

In the function f, a new i is declared every time.

Instead of that, you could save the count as a property of the function itself.

function f(y) {
    let x = y;
    f.i = f.i || 0;

    return () => {
        console.log(++f.i);
        return x(y);
    };
}

f(f)()()();

The use of functions and parentheses in Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for successfully uploading FormData files using Axios: Resolving the TypeError of "file.mv is not a function"

What is preventing me from using memoization in the getServerSideProps of NextJS?

Tips for Customizing the Width of Your Material UI Alert Bar

Issue with redirecting to another link in Angular routing

Angular ngClass and ngIf directives failing to update upon alterations

Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

Updating React state by changing the value of a specific key

Node.js program closes immediately upon Java startup

What is the most effective method to include JSON data containing various IDs at the end within an $http.get() request in AngularJS?

`Inconsistencies between Postman and AngularJS service responses`

Creating a heading transition that moves from the bottom to the top with CSS

Unable to display nested JSON data from API in Vue.js

The Mongoose findOne function encountered an error when attempting to convert a value to ObjectId

Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

Leveraging Variables within my .env Configuration

Accessing component variables within an event in Angular 2 (dealing with scope problems)

Initiating a AJAX upload upon selection of a specific option from a select menu

Issue with the Jquery rich text plugin in Internet Explorer causing functionality problems

Sending values to URL using the <a> tag in HTML

Vanishing Submenus