Vfrdtyky

$("button").on("click", function(){

    $("div").fadeOut(1000);

    console.log("Fade Completed");

});

When above code is executed, "Fade Completed" is logged on the console way before the div has actually faded out.
As per my knowledge, Javascript is single threaded. It executes code line by line. So why is "Fade Completed" logged on first before the div has faded out completely?

Is the above code utilizing asynchronous nature of javascript (i.e parallel browser engines can run alongside the JS Engine)? But had that been the case, the div would have started fading out after clearance of execution stack. So that's not the case as per my understanding.

Kindly elaborate on this behavior.

As you can read in the docs http://api.jquery.com/fadeOut/ the function is executed asynchronously and you can wait for it finish by using the 'complete' callback

You have to log in a callback function

$("button").on("click", function(){

    $("div").fadeOut(1000, function(){

        console.log("Fade Completed");

    });

});

You have partially answered your question. You are right Javascript is single threaded and executes code line by line in a synchronous way. That's why "Fade completed" is logged out before the animation has actually completed.

If you want to wait for the animation to complete before executing a code you should provide a callback as a second argument to fadeOut. This callback will be executed after the animation has completed.

"Callbacks" are a way to implement asynchronocity in Javascript. You can read more here Javascript Asynchronous Programming and Callbacks