eggheadio-projects/asynchronous-programming-the-end-of-the-loop: null

All of the code examples for [Asynchronous Programming: The End of the Loop](https://egghead.io/courses/asynchronous-programming-the-end-of-the-loop).

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.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

  <script src="lib/script.js"></script>
</body>
</html>

var stocks = [
  { symbol: "XFX", price: 240.22, volume: 23432 },
  { symbol: "TNZ", price: 332.19, volume: 234 },
  { symbol: "JXJ", price: 120.22, volume: 5323 },
];

var filteredStockSymbols = 
  stocks.
    filter(function(stock) {
      return stock.price >= 150.00;
    }).
    map(function(stock) {
      return stock.symbol;
    })

filteredStockSymbols.forEach(function(symbol) {
  console.log(symbol);
  // display in plunker preview
  displayInPreview(symbol)
})

// display in plunker preview
function displayInPreview(string) {
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode(string); 
  newDiv.appendChild(newContent);
  document.body.appendChild(newDiv)
}