Why is awaiting inline on a variable in the outer scope different from simple await assignment?

Question

Before I asked this question, I did research this question.

I don't understand why in the examples below the output is different in run1 and run2.

"use strict";

function sleep(ms) {
  return new Promise(resolve =>
    setTimeout(() => {
      resolve(ms);
    }, ms)
  );
}

const seconds = [1000, 3000, 2000];

let output1 = 0;
let output2 = 0;

console.log("start");

(async function run1() {
  await Promise.all(
    seconds.map(async sec => {
      output1 = output1 + (await sleep(sec));
    })
  );
  console.log({ output1 });
})();

(async function run2() {
  await Promise.all(
    seconds.map(async sec => {
      const res = await sleep(sec);
      output2 = output2 + res;
    })
  );
  console.log({ output2 });
})();

console.log("fin");

Answer 1

For the first case (output1), the current value of output1 is "cached" before calling and evaluating the async function and awaiting it.

It would be more or less equivalent to the following (order of execution follows the sleep time of each async function):

let old = output1; // 0
output1 = old + 1000;
output1 = old + 2000;
output1 = old + 3000; // 0 + 3000 is the final result

For the second case (output2), the async function is evaluated before the current value of output2 is cached. You end up with a sum of all values.

It is more or less equivalent to:

let old = output2; // 0
output2 = old + 1000;
old = output2; // 1000
output2 = old + 2000;
old = output2; // 3000
output2 = old + 3000; // 3000 + 3000 is the final result

Note: if you use the values [1000, 4000, 2000], you will see that the result is 4000, so only the middle value is added to the output (not 1000+2000 which would also be 3000 with the values from the question)

To be honest, I would have expected the result in the first case to be either 2000 (the last value) or non-deterministic (race-conditions). Apparently, there is some little detail in how JavaScript schedules each async task.

Thanks to A_A with an answer to why the final result is 3000 (or 4000, with updated values): this is the longest delay and it will be executed/finished last.

---

Additional explanation: there seems to be confusion caused by my bad word choice of "cached". Let me try to explain:

JavaScript programs are generally evaluated top-to-bottom, left-to-right (ignoring async calls for a moment).

let y = 6;
let x = 7;
y = y * x;

Will be "seen" by the JavaScript runtime as:

1. Store 6 in y
2. Store 7 in x
3. Remember current y value (6)
4. Remember current x value (7)
5. Multiply 6 and 7 (= 42)
6. Store 42 in y

Let's map this to your first example:

for (let i of [100,300,200])
   output1 = output1 + (await sleep(i));

1. Remember current output1 value (0)
2. Start first async "sleep" task and await its completion
3. Remember current output1 value (0)
4. Start second async sleep task and await its completion
5. Remember current output1 value (0)
6. Start third async sleep task and await its completion
7. First sleep task completes (100)
8. Add current output1 value and task result (0 + 100)
9. Store result in output1 (100)
10. Third sleep task completes (200)
11. Add current output1 value and task result (0 + 200)
12. Store result in output1 (200)
13. Second sleep task completes (300)
14. Add current output1 value and task result (0 + 300)
15. Store result in output1 (300)
16. The final value of output1 is 300

Now compare to the second example. The evaluation order becomes:

for (let i of [100,300,200]) {
  const res = await sleep(sec);
  output2 = output2 + res;
}

1. Start first async "sleep" task and await its completion
2. Start second async sleep task and await its completion
3. Start third async sleep task and await its completion
4. First sleep task completes (100)
5. Remember current output2 value (0)
6. Add current output2 value and task result (0 + 100)
7. Store result in output2 (100)
8. Third sleep task completes (200)
9. Remember current output2 value (100)
10. Add current output2 value and task result (100 + 200)
11. Store result in output2 (300)
12. Second sleep task completes (300)
13. Remember current output2 value (300)
14. Add current output2 value and task result (300 + 300)
15. Store result in output2 (600)
16. The final value of output2 is 600

Answer 2

On top of @ef-dknittl-frank's answer. I would like to share my point of view. I have difficulties understanding this question because I want to understand how exactly JS working behind the scene.

TL;DR, if you rewrite the run1 and run2 in .then, it would be more clear.

run1 can be rewritten as below with .then():

(async function run1() {
  await Promise.all(
    seconds.map(sec => {
      return Promise.resolve(output1).then(temp => {
        return sleep(sec).then(res => {
          output1 = temp + res;
        });
      });
    })
  );
  console.log({ output1 });
})();

run2 can be rewritten as below with .then():

(async function run2() {
  await Promise.all(
    seconds.map(sec => {
      return sleep(sec).then(res => {
        output2 = output2 + res;
      });
    })
  );
  console.log({ output2 });
})();

I post this answer just in case you have difficulties like me to understand this question.

The key is what execution context (local scope, scope chain and variables in closures from outer scopes) is when the codes are executing.

For the run1,

We rewrite the below codes:

output1 = output1 + (await sleep(sec));

to

a = b + c

The sequence of execution is:

1. store the value to b 
2. store the value to c
3. sum b and c
4. assign the sum (b+c) to a

we analyze the sequence one by one.

1. store the value to b

When we execute line 1, the value of output1 is assigned to b. At this point, output1 is 0 from the scope chain(outer scope) and only sync codes are running. Therefore, all the value of b is 0 inside the map() loop

2. store the value to c

When we execute line 2, the value of await sleep(sec) is assigned to c. For instance, let say 1000(From await sleep) is assigned to c. At this point, you can already see the log start and fin because all sync code(outer scope) is finished before executing line2.

3. sum b and c

When we execute line 3, b is 0 and c is 1000(from the previous example), so the sum is 1000.

4. assign the sum (b+c) to a

When we execute line 4, the a is output1 and output1 is the variable identifier, used to provide the location in which to store a value and in this case, it stores the sum. To be more clear, the line4 is executing after all sync code(outer scope) is finished, so we access the output1 by Closures from outer scopes.

Why output1 always show 3000? It is because the line4 above is executed asynchronously and the last code executed is 3000ms. a(output1) is re-assigned by a new value from the asynchronous codes.

run1 can be rewritten as below with .then():

(async function run1() {
  await Promise.all(
    seconds.map(sec => {
      return Promise.resolve(output1).then(temp => {
        return sleep(sec).then(res => {
          output1 = temp + res;
        });
      });
    })
  );
  console.log({ output1 });
})();

For the run2,

The codes below

output2 = output2 + res;

Both output2 are referenced to the same thing and they are accessed also by Closures from outer scopes. To be more clear, this line is executing after all sync code(outer scope) is finished, so we access the output2 by Closures from outer scopes.

run2 can be rewritten as below:

(async function run2() {
  await Promise.all(
    seconds.map(sec => {
      return sleep(sec).then(res => {
        output2 = output2 + res;
      });
    })
  );
  console.log({ output2 });
})();

Extra point:

if we change the codes of run1 below

from:

output1 = output1 + (await sleep(sec));

to:

output1 = (await sleep(sec)) + output1;

It will output the same result as run2.

Let's rewrite it to a = b + c like the previous example.

The sequence of execution is:

1. await sleep() and store the value to b (it is running asynchronously) 
2. store the value to c (c is equal to `output1` which is accessed by Closure)
3. sum b and c
4. assign the sum (b+c) to a (a is equal to `output1` which is accessed by Closure)

If we rewrite the above changes of run1 to .then():

(async function run1() {
  await Promise.all(
    seconds.map(sec => {
      return sleep(sec).then(res => {
        output1 = output1 + res;
      });
    })
  );
  console.log({ output1 });
})();

Did you notice? it is the same as run2().