Asynchronous code, how does it work? Promises and callbacks

Question

I have tryed to find answer on web, and did it partly. But I still can not completely understand how JS can run ansyncronous code?

My seeing of things:

JS give us ability of asyncronous programming. That means that we can start first task, then while one is in progress we can start second task, etc. Before js can start second task it should be freed from the previous task. It can be achived with 2 ways:

• js by its own end the task (the code which should be processed by js only)
• js can start the task which should be processed by filesystem for example. In this case js, do its work, pass the task to filesystem and starts to process other queued tasks. When js is freed and filesystem have returned the result, js can continue that task.

So we can not achive asyncronous by just writing the next code:

function doSth( callback ) {
    let arr = [];

    for ( let i=1e6; i > 0; i-- )
        arr.push( i );

    callback();
}

doSth( console.log.bind( null, 'I am callback' );
console.log( 'just a line' );

due to doSth() contains only js's work it will be completed first and then just appear 'just a line'? So it is not asyncronously, right? But if we will have filesystem task insted of loop, we will have asyncronous function?

And one more question: Are promises really asyncronous? How can they be asyncronous (i mean, can other tasks be processed at the time of promise processing), either promises just mimics asyncronous code? *I know, there is additional queue for promises.

Maby I just don't understand some base? I'll be glad if you can explain me to make my questions more explictly for me.

Answer 1

I think you have it right.

The function doSth is synchronous and will block the main thread until it's finished. You only provide callback API, but that does not mean it will magically become asynchronous.

Truth is, all JS code you write is synchronous unless you use core JS functions that are defined as asynchronous (e.g., fs.readFile, setTimeout, $.ajax({...}).done). Without them, you can't create asynchronous behavior, you would have to write your own JS core from scratch, with event loop (in fact, I encourage you to google and study what the javascript event loop is, I believe it will clarify many things for you and will give you a much better idea of what is happening in the core). All 3rd party libs out there achieve asynchronous behavior simply because they use these core functions and wrap them with their own code, providing more elegant and higher-level APIs.

The same applies for promises. Yes they are asynchronous, BUT ONLY if you fill them with asynchronous code. Indeed, they have some extra overhead and do not run the code immediately, but if a single promise contains only synchronous code then its eventual execution will block the main thread until it's finished.

Answer 2

Watch this playlist for a light overview of asynchronous Javascript.

But if you really want to understand all the details, read this book.

To answer one of your main questions, asynchrony has nothing to do with the filesystem. It's all Javascript still. To quote the book I recommended:

Asynchrony is "when part of your program runs now, and another part of your program runs later -- there's a gap between now and later where your program isn't actively executing."

Consider your code:

function doSth(callback) {
  let arr = [];
  for (let i=1e6; i > 0; i--){
    arr.push(i);
  }
  callback();
}

doSth(console.log.bind(null, 'I am callback'));
console.log('just a line');

This will output

I am callback

Then

just a line

However, if you changed your code to this:

function doSth(callback) {
  let arr = [];
  for (let i=1e6; i > 0; i--){
    arr.push(i);
  }
  setTimeout(callback, 0);
}

doSth(console.log.bind(null, 'I am callback'));
console.log('just a line');

You will get

just a line

Then

I am callback

It essentially has to do with what function is calling your callback. "doSth" is not an asynchronous function, no matter how long the for loop will take. In the second example, however, setTimeout is the function that's calling your callback, and setTimeout is an asynchronous function that runs after the rest of your synchronous code just because that's the way it's intended to work. Another common asynchronous function would be any sort of AJAX request, and the callback provided to it would also be called after any other synchronous code.