Advanced JavaScript: Speed up web development with the powerful features and benefits of JavaScript

In the previous chapter, we covered many of the new and powerful features released in ES6. We discussed the evolution of JavaScript and highlighted the key additions in ES6. We discussed scope rules, variable declaration, arrow functions, template literals, enhanced object properties, destructuring assignment, classes and modules, transpiling, and iterators and generators.

In this chapter, we will learn what an asynchronous programming language is and how to write and understand asynchronous code. In the first topic, we will define asynchronous programming and show how JavaScript is an asynchronous, event driven programming language. Then, we will outline callbacks and show how to use callbacks to write asynchronous JavaScript. We will then define promises and demonstrate how to use promises to write asynchronous JavaScript. In the final topic, we will present the async/await syntax and simplify our asynchronous code using promises and this syntax.

JavaScript is a single threaded, event driven, asynchronous programming language. What does this mean? This means that JavaScript runs on a single thread and delays/handles certain events or function calls through an event queue. We will break down the basics of how JavaScript does this through the following topic.

Callbacks are the most basic form of JavaScript asynchronous programming. In the simplest terms, a callback is a function that gets called after another function completes. Callbacks are used to handle the response of an asynchronous function call.

In JavaScript, functions are treated like objects. They can be passed around as arguments, returned by functions, and saved into variables. A callback is a function object that is passed as an argument into a higher order function. A higher order function is simply a mathematics and computer science term for a function that takes one or more functions as arguments (callbacks) or returns a function. In JavaScript, a higher order function will take a callback as a parameter. Once the higher order finishes doing some form of work, such as an HTTP request or database call, it calls the callback function with the error or return values.

As mentioned in the Event Loop section in Asynchronous Programming, JavaScript is an event driven language...

In JavaScript, a promise is an object that wraps an asynchronous operation and notifies the program when the asynchronous operation completes. The promise object represents the eventual completion or failure of the wrapped operation. A promise is a proxy for a value not necessarily known. Instead of providing the value immediately, like a synchronous program, it promises to provide a value at some point in the future. Promises allow you to associate success and error handlers with an asynchronous action. These handlers are called at the completion or failure of the wrapped asynchronous process.

Async/await is a new syntax form added to simplify code that uses promises. Async/await introduces two new keywords: async and await. Async is added to function declarations and await is used inside an async function. It is surprisingly easy to understand and use. In its simplest form, async/await allows us to write promise-based asynchronous code that looks almost identical to the synchronous code that does the same task. We will use async/await to simplify code using promises and make it even easier to read and understand.

async function asyncExample( /* arguments */  ){ /* do work */ }

JavaScript is an asynchronous, event-driven, single-threaded language. Instead of hanging during a long-running operation to another resource, JavaScript does work on other operations if any work is pending. JavaScript accomplishes this with the event loop. The event loop is composed of the call stack, heap, event queue, and main event loop. These four components work together to schedule when JavaScript runs different parts of the code. To leverage JavaScript's asynchronous nature, we use callbacks or promises. Callbacks are simply functions passed as arguments into other functions. Promises are special classes with event handler functions. When an asynchronous operation finishes, the JavaScript engine runs the callback or calls the promise handler attached to that operation's complete event. This is asynchronous JavaScript in its simplest form.

In the next chapter, we will learn about the Document Object Model (DOM), the JavaScript event object, and the jQuery library.