Will Sentance
Codesmith
The Hard Parts of Asynchronous JavaScript
4 hours, 46 minutes CC
Course Description
In this course, you will develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await. You'll understand how promises are implemented under-the-hood to truly help fix the challenge of inversion of control in asynchronous code design. Plus, use iterators and generators to master asynchronous control flow. Go under the hood and solve complex async challenges by using the call stack, event loop, callback queue, micro-task queue and browser APIs so that you can navigate complex asynchronous problems, easily!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 26 minutes
Will Sentance introduces himself, reviews the top five capacities that companies look for in programming candidates, and expectations for students working through the course.
To ensure a proper and shared foundation for upcoming lessons, Will reviews code to understand what happens when JavaScript executes or runs.
Asynchronous JavaScript
Section Duration: 51 minutes
Will introduces asynchronicity, which is the backbone of modern web development in JavaScript, and illustrates that features such as asynchronicity reside outside pure JavaScript.
To utilize asynchronicity in JavaScript development, Will discusses Web Browser APIs that allow JavaScript to interface with other technologies provided by the browser.
Through answering a question from a student about executing a function on a call stack while waiting for a response on an asynchronous function, Will introduces the need for rules when JavaScript interacts with Browser APIs.
Will shows how code designated for deferred functionality is only allowed back into JavaScript when certain conditions are checked by the Event Loop: If the Callback Queue contains code, that code is can enter the Call Stack only when the Call Stack itself is empty and the global execution context has run all of its code.
Will answers questions from students about where Callback Queue is stored, how do calls to Browser APIs get handled if they are executed at the same time, size limit to the Callback Queue, and more.
Will reinforces the knowledge of how deferred functionality in Browser APIs works.
After Will introduces pair programming and its importance to becoming a better, well-rounded engineer, students work in pairs to solve a series of JavaScript challenges.
Promises
Section Duration: 59 minutes
After reviewing deferred functionality, Will introduces Promises, which act as a placeholder for the data that is hoped to get back from the web browser feature's background work.
Will illustrates how Promises work to create a two-pronged façade functions that both initiate background web browser work and return a placeholder object immediately within JavaScript.
Will answers questions from students about event loops role with Promises, promises and allocated memory, the ability to add or modify const, and more.
While illustrating another example of Promises working with JavaScript and Web Browser features, Will introduces the Microtask Queue (or Job Queue). Overseen through the Event Loop, the Microtask Queue is where tasks initiated by promise objects get processed before callback queue.
Will answers questions from students about browser methods and queues, the priority of code being processed through event loop, and more.
Will reviews the benefits and problems of Promises.
Iterators
Section Duration: 50 minutes
After Will reviews iterators as a way to automate the accessing each element and be able to focus on what to do for each element, he illustrates how to functions can be returned from other functions with JavaScript.
Will demonstrates how to create a function that holds both an array, the position current within a 'stream' of elements, and the ability to return the next element in the array.
Will examines the building blocks of iterators and their ability to turn data into "streams" of actual values that can be accessed one after another.
Students work to code their own iterators as well as interacting with JavaScript's built-in iterators.
Generators
Section Duration: 1 hour, 14 minutes
Will introduces the concept of native JavaScript generators by walking through a reconstruction using arrays based on previous lessons.
Will explores the function* declaration, which defines a generator function that allows for dynamically setting data flows.
Will answers students' questions about what generators are patterned after, generator objects properties, infinite loops through generators, and more.
After reviewing generators, Will introduces the concept of asychronous generators.
Will walks through an example asynchronous generators to showcase control over deferred functionality.
Will answers students questions about asynchronous generators.
Final
Section Duration: 23 minutes
Will demonstrates async await, which helps to simplify the ability of generators.
Wrapping up "JavaScript: The New Hard Parts", Will reviews material covered in the course, congratulates the students for completing the course and urges students to improve their technical communication.
I just completed "The Hard Parts of Asynchronous JavaScript" by Will Sentance on Frontend Masters! The sail was smooth till I completed Promises, but iterators and more so Generators, was something difficult to wrap my head around.
Kaustubh
715kaustubh
Will Sentance courses on Frontend Masters are the best I've taken. Great use of graphical representations for explaining core basic concepts that we usually don’t understand clearly.
Ricardo Crespo
Ricardo53365192
I just completed "The Hard Parts of Asynchronous JavaScript" by Will Sentance on Frontend Masters! Great mentor makes everything easy. I am making JavaScript as my core programming language.
Sansrit Paudel
2sansrit
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops