javascriptbrowsercallstackexecutioncontext

If Array.prototype.map is not in the call stack, how exactly JavaScript knows to not run any other code before its iteration is over?


function callback(x) {
  // also tried debugger to find .map in the call stack
  console.trace();

  return 2*x;
}

[1,2,3].map(callback);

console.log('Next line of code');

console

What I know about Array.prototype.map:

Questions:

  1. Why exactly it does not show up in the call stack? Is it because it runs in C/C++ and is outside of JS engine? Or maybe it's just a simplification, and actually it is there beneath the callback, just not shown?

  2. If .map context is not in the call stack, how JS "knows" that it must wait for its iteration to be over before moving to next line of the code? Does the browser keep throwing callback contexts on top of the stack, keeping JS busy?


Solution

  • The Array::map() is in the stack:

    function callback() {
      throw new Error();
    }
    
    try {
      [1,2,3].map(callback);
    }catch(e){
      console.log(e.stack);
    }
    
    console.log('Next line of code');

    Output in Chrome:

    Error
        at callback (https://stacksnippets.net/js:13:9)
        at Array.map (<anonymous>)
        at https://stacksnippets.net/js:17:11
    Next line of code
    

    Don't try to figure out what is JS' internal implementation, it should be considered a black box. You could write a JS engine in JS for example.