Nolan's Promises/A+ JavaScript puzzles

Question

I have read We have a problem with promises by Nolan Lawson for a few times, but still have some questions about promises in JavaScript. At the end of Nolan's post you can find answers for four puzzles (I've attached screenshots here).

So, I have a few questions:

1. Why does doSomethingElse() function in the 1st puzzle have undefined value? To my mind, it must have resultOfDoSomething like in the 4th puzzle.

2. What's the difference between the 3rd and 4th puzzles? In the 3rd puzzle in the first then we write doSomethingElse() and in the 4th puzzle we write here only the name of function, doSomethingElse. How is it possible? What does really doSomethingElse do inside the then of the 4th puzzle?

3. Why does doSomethingElse() function in 3rd puzzle start at the same moment as doSomething?

Answer 1

1. Why does doSomethingElse() function in 1st puzzle [get passed] undefined?

Let us look at a simpler example:

foo();   // Line #1
foo(42); // Line #2

The difference between the two lines is what? On line #1, we are calling foo but passing it no value (hence undefined) whereas on line #2 we are calling foo and passing it 42.

Going back to the post:

doSomething().then(function () {
    return doSomethingElse( );
    //                     ^-- we are not passing a value
}).then(finalHandler);

How is this different to the 4th puzzle? In the 4th puzzle we are passing a reference to the function to then. Giving the promise the reference to the function allows it to call it at a later time with the result of the promise.^[1]

---

2. What's the difference between the 3rd and 4th puzzles? In the 3rd puzzle [...] we write doSomethingElse() and in the 4th puzzle we write [...] doSomethingElse.

To explain the differences in the 3rd and 4th puzzles, let's look at simpler examples. How do the following two lines differ:

var foo = function foo() {
    return 42;
};
var a = foo;   // line #1
var b = foo(); // line #2

In the snippet above, a will contain a reference to the function foo whereas b will contain the result of calling foo (which would be 42).

---

3. Why does doSomethingElse() in the 3rd puzzle start at the same moment as doSomething?

Similar to the differences between the 3rd and 4th functions, note the use of () to invoke (or call) the function. Here we are calling both doSomething() and doSomethingElse() instead of waiting for the promise to "resolve" (waiting for the first call to finish). before Let us step through the execution:

1. Execute doSomething which returns a Promise
2. Attach the doSomethingElse() to the promise—but wait, doSomethingElse() is us calling doSomethingElse(), so that will happen async and we will attach the promise it returns to the promise doSomething() returned.
3. Attach the function finalHandler to the promise

Answer 2

doSomething().then(function () {
  return doSomethingElse();
});

Why does doSomethingElse() function in 1-st puzzle have undefined value? To my mind, it must have resultOfDoSomething like in 4-th puzzle.

The promised result of doSomething is passed to the anonymous function (which doesn’t even accept an argument). So whatever is passed there is lost. And doSomethingElse is called without any arguments, so the first function argument is undefined.

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

What's the difference beetwen 3-rd and 4-th puzzles? In 3-rd puzzle in first then we write doSomethingElse() and in 4-th puzzle we write here only the name of function - doSomethingElse. How is it possible? What does really doSomethingElse do in then of 4-th puzzle?

Functions in JavaScript are objects which you can pass around as you like. That’s actually how the whole callback passing works: There is a function (here, it’s then) that takes a function as a parameter which is then later called.

So in the latter code, the function that is passed to then is doSomethingElse so that is the function which is later called. But in the former, we call doSomethingElse directly (with the parentheses ()). So what gets passed to then is the return value of that function—which is unlikely a function that can be evaluated once the promise completes.

Why does doSomethingElse() function in 3-rd puzzle start at the same moment as doSomething?

As I said, the function is immediately called, at the same time you call doSomething. Only the return value is passed to then which would then be called once the promise resolves.