How does javascript return work without calling a function?

I am studying this site and answered this question:

Write a sum method that will work correctly when called using the syntax below.

console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5 

//answer

 function sum(x) { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return function(y) { return x + y; }; } } 

I understand the code in the if statement, but not in the else statement, because it just returns a function. This function is not called with '()', so given the 2nd script console.log(sum(2)(3)); , I don’t see why it will return 5. I can only see that it will return function(3) {return 2 + 3} , which should throw an error.

+5
source share
5 answers

The else statement returns a function with the value of x encapsulated from the first call

To explain this, a little break

 var fresult = sum(3); // right now fresult is a function that will add 3 // to the variable you call fresult with // basically function(y){ return 3 + y; } var result = fresult(4); //result is 7 console.log(result); 

Think about how the value of x will be captured by a return function that you can call

This encapsulation is created by a closure created in an anonymous function in the return else statement.

To learn more about closing, see this MDN article about them , they will be able to explain it much better than I could.

In fact, they have an example that is very similar to yours, where they try to explain the concept as similar to a factory:

 function makeAdder(x) { return function(y) { return x + y; }; } var add5 = makeAdder(5); var add10 = makeAdder(10); console.log(add5(2)); // 7 console.log(add10(2)); // 12 

The article says:

In this example, we defined the function makeAdder (x), which takes a single argument x and returns a new function. The returned function takes one argument y and returns the sum of x and y.

In essence, makeAdder is a factory function - it creates functions that can add a specific value to their argument. In the above example, we use our factory function to create two new functions: adds 5 to our argument and adds 10.

add5 and add10 are both closures. They have the same functional housing but store different environments. In the environment add5 x 5. As for add10, then x is 10.

So, if you are used to a more traditional programming language, some of the use cases that you would use for private variables would be the same as capturing variable values ​​in closure

+2
source
 sum(2) = function (y){ return 2 + y } 

You call this function with (3)

+3
source

You can save the function in a variable.

main idea

 var foo = function(y) { return y }; 

So, when we look at

 console.log(sum(2)(3)); 

can be written as

 var part1 = sum(2); //aka part1 = function(y) { return 2 + y; }; var ans = part1(3); console.log(ans); 
+2
source

else part is an anonymous function that takes one .

In the case of sum(2)(3)

It goes into another cycle, where x = 2 , since it is called sum(2) , while (3) is an anonymous function without a name.

hence,

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

becomes

 return function(3) { return 2 + 3; }; 
+1
source

Javascript is slightly different from many languages. Functions can be passed as variables. In your case, what happens is much easier to see when it is broken down into steps that actually occur.

First, since sum(2) has only one parameter, go to the else block, which you already know. What happens is that we return the function, replacing x with the variable that was passed to sum(x) . So basically, the return is a function that returns 2 + y . Here's what it would look like if we wanted to write it ourselves:

 function(y) { return 2 + y; } 

The second set of brackets in sum(2)(3) basically says: "Call the function that was returned by sum(2) and send parameter 3 .

Here's basically an extended version of the whole operation:

 function sum(x) { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return function(y) { return x + y; }; } } var addTwo = sum(2); console.log(addTwo(3)); 

The short version basically just skips creating a separate variable for the sum(2) result and immediately calls a new function.

+1
source

Source: https://habr.com/ru/post/1245949/


All Articles