JavaScript Promise:
Google has made more contributions in evolving, developing, and utilizing of JavaScript than any other
organization. It was Google that introduced the V8 engine in its flagship web browser, Chrome. V8 is the
backbone engine of the browser, and due to the smart usage of JavaScript, the browser is faster, robust,
and adaptable to web and Android devices.
Asynchronous JavaScript.
The number of asynchronous JavaScript APIs is rapidly growing. Web applications asynchronously fetch
data and load scripts in the browser. [Link] and its derivatives provide a host of APIs for asynchronous
I/O. And new web specifications for Streams, Service Workers, and Font Loading all include asynchronous
calls. These advancements broaden the capabilities of JavaScript applications, but using them without
understanding how the async part works can result in unpredictable code that is difficult to maintain.
Things may work as expected in development or test environments but fail when deployed to end users
because of variables such as network speed or hardware performance.
Let’s start with a code snippet that frequently surprises people. The code makes an HTTP request using
the XMLHttpRequest (XHR) object and uses a while loop that runs for three seconds. Although it is
generally bad practice to implement a delay with the while loop, it’s a good way to illustrate how
JavaScript runs. Read the code in Example 1-1 and decide whether the listener callback for the XHR
object will ever be triggered.
// Make an async HTTP request
var async = true;
var xhr = new XMLHttpRequest();
[Link]('get', '[Link]', async);
[Link]();
// Create a three second delay (don't do this in real life)
var timestamp = [Link]() + 3000;
while ([Link]() < timestamp);
// Now that three seconds have passed,
// add a listener to the [Link] and [Link] events
function listener() {
[Link]('greetings from listener');
}
[Link]('load', listener);
[Link]('error', listener);
Here are some common opinions on whether listener is called:
Yes, listener is always called
Not a chance, the addEventListener calls must run before [Link]()
Sometimes, depending on whether the request takes more than three seconds
The correct assessment is that listener is always called. Although the second and third answers are
common, they are incorrect because of the event loop model and run-to-completion semantics in
JavaScript. If you thought otherwise or would like a refresher on these concepts, this chapter is for you.
Callbacks
Callbacks are the cornerstone of asynchronous JavaScript programming. As a JavaScript developer you
are probably familiar with callbacks, but just to be sure, Example 1-2 presents a quick case of a callback
that prints each of the elements in an array.
Example 1-2. Example callback
var cities = ['Tokyo', 'London', 'Boston', 'Berlin', 'Chicago', 'New York'];
[Link](function callback(city) {
[Link](city);
});
In short, a callback is a function provided to other code for invocation. Example 1-2 uses an inline
function to define the callback. That is a commonly used style in JavaScript applications, but callbacks do
not have to be declared inline. Example 1-3 shows the equivalent code with the function declared in
advance.
Example 1-3. Passing a callback as a predefined function
function callback(city) {
[Link](city);
}
[Link](callback);
Whether your callbacks are inline functions or predefined is a matter of choice. As long as you have a
reference to a function, you can use it as a callback.
Asynchronous JavaScript
Callbacks can be invoked synchronously or asynchronously (i.e., before or after the function they are
passed to returns.) The [Link]() method used in the previous section invokes the callback it
receives synchronously. An example of a function that invokes its callback asynchronously is
[Link](). Its callback is invoked between browser repaint intervals, as shown in
Example 1-4.
Example 1-4. A callback being invoked asynchronously
function repositionElement() {
[Link]('repositioning!');
// ...
}
[Link](repositionElement);
[Link]('I am the last line of the script');
// Console output:
// I am the last line of the script
// repositioning!
In this example, “I am the last line of the script” is written to the console before “repositioning!” because
requestAnimationFrame returns immediately and invokes the repositionElement callback at a later time.
Synchronous code can be easier to understand because it executes in the order it is written. A good
comparison can be made using the synchronous and asynchronous file APIs in [Link]. Example 1-5 is a
script that writes to a file and reads back the contents synchronously. The numbered comments indicate
the relative order in which some of the lines of code are executed.
Example 1-5. Using synchronous code to write and read a file in [Link]
