Asynchronous Programming: The End of The Loop

59 minutes

Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript programmer. Unlike most programming languages, JavaScript is single-threaded. As a result, JavaScript programs must use async APIs to stay responsive to user input while performing long-running tasks like server requests and animations. You can't get very far in a JavaScript program without running across an asynchronous API.

Async programming may seem daunting. How can we write programs that accept user input, run animations, and send server requests over the same period of time? How do we keep the code clear and concise? How do we gracefully propagate and handle asynchronous errors? How can we avoid memory leaks caused by dangling event handlers? JavaScript's loops and try/catch keywords are no help - they only work on synchronous functions.

Here's the good news: Asynchronous programming is much easier than it seems. The key is to think differently about events. It is possible to build most asynchronous programs using a handful of simple functions. We will learn why most JavaScript developers approach asynchronous programming the wrong way, and how to avoid these common mistakes. By the end of these lessons you will know the tools, concepts, and libraries required to be an asynchronous programming ninja!

In this section, we'll learn the first secret to mastering asynchronous programming: programming without loops. JavaScript's loops can only run synchronously, and cannot be used to repeat asynchronous functions. As a result, in order to master asynchronous programming we must first master programming without loops. In this series we will learn how to program Arrays without loops using just a few simple functions.

pro-course-rss-logo

PRO RSS Feed

The Array forEach method

The Array map method

The Array filter method

Chaining the Array map and filter methods

Create an Array concatAll method

Introducing the Observable

Using the map method with Observable

Simple drag and drop with Observables

Advanced Flattening

js tutorial about The Array forEach method

The Array forEach method

4:03 js

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

js tutorial about The Array map method

The Array map method

3:02 js

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

js tutorial about The Array filter method

The Array filter method

4:42 js

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function "concatAll" which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

js tutorial about Introducing the Observable

Introducing the Observable

11:59 js

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

js tutorial about Using the map method with Observable

Using the map method with Observable

3:45 js

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

Presented by:

Jafar Husain

Jafar Husain is the Cross-Team Technical Lead for the Netflix UI's. He is the architect of Netflix's UI data platform, and specializes in building reactive, event-driven systems. A highly-rated speaker, he has spoken at QCon, HTML Dev Conf, QCon, CodeMesh, YOW! and given Channel 9 interviews. He has also trained hundreds of developers to build event-driven systems in JS. He is the Netflix representative on the JavaScript standards committee (TC-39) and is actively working to evolve the JavaScript language.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?