Understanding the syntax of a deferred execution chain

Question

I'm getting around to learning JavaScript - really learning JavaScript. I come from a PHP background so some JavaScript concepts are still new to me, especially asynchronous programming. This question might have already been answered many times before but I have not been able to find an answer. It might be because I don't really even know how to ask the question other than by showing an example. So here it is:

When using the deferred package from npm, I see the following example:

delayedAdd(2, 3)(function (result) {   return result * result })(function (result) {   console.log(result); // 25  }); 

They refer to this as chaining and it actually works as I'm currently using this code to check when a promise is resolved or is rejected. Even though they call it chaining, it reminds me of trailing closures like in Swift.

I don't really understand what type of chaining this is since we have a function invocation and then immediately after, an anonymous function enclosed in parentheses.

So I guess I have two questions.

1. What pattern is this?
2. How does it work? This may be a loaded question but I like to know how something works so when someone asks me about this I can give them a detailed explanation.

Here is the delayedAdd function:

var delayedAdd = delay(function (a, b) {   return a + b; }, 100); 

which uses the following function:

var delay = function (fn, timeout) {   return function () {     var def = deferred(), self = this, args = arguments;      setTimeout(function () {       var value;       try {         value = fn.apply(self, args));       } catch (e) {         def.reject(e);         return;       }       def.resolve(value);     }, timeout);      return def.promise;   }; }; 

Answer 1

It's actually really easy to understand. Let's look at what's going on here when the expression is evaluated:

First the delayedAdd(2, 3) function will be called. It does some stuff and then returns. The "magic" is all about its return value which is a function. To be more precise it's a function that expects at least one argument (I'll get back to that).

Now that we evaluated delayedAdd(2, 3) to a function we get to the next part of the code, which is the opening parenthesis. Opening and closing parenthesis are of course function calls. So we're going to call the function that delayedAdd(2, 3) just returned and we're going to pass it an argument, which is what gets defined next:

That argument is yet another function (as you can see in your example). This function also takes one argument (the result of the computation) and returns it multiplied by itself.

This function that was returned by the first call to delayedAdd(2, 3) returns yet another function, which we'll call again with an argument that is another function (the next part of the chain).

So to summarize we build up a chain of functions by passing our code to whatever function delayedAdd(2, 3) returned. These functions will return other functions that we can pass our functions again.

I hope this makes the way it works somewhat clear, if not feel free to ask more.

Answer 2

mhlz's answer is very clear. As a supplementary, here I compose a delayedAdd for your to better understand the process

function delayedAdd(a, b) {   var sum = a + b   return function(f1) {     var result1 = f1(sum)     return function(f2) {       f2(result1)     }   } } 

Where in your example code, the function you passed as f1 is:

function (result) {   return result * result } 

and f2 is:

function (result) {   console.log(result) }