87. Thunder Talks

Event Loop

The JavaScript event loop is a crucial concept for developers working with asynchronous and synchronous code. Alan Underwood explains that understanding the event loop is essential for anyone involved in JavaScript programming, whether in Node.js or browser environments. He describes the call stack, callback queue, and web API stack, emphasizing how these components interact to manage code execution. Alan highlights the importance of learning these concepts to prevent UI hang-ups, as seen in browsers like Chrome when a page becomes unresponsive 1.

If something sits there and waits for 15 or 20 seconds, it'll be like, it'll send you some ugly picture and be like, something's not working here, you want to just kill the page or you want to wait.

--- Alan Underwood

Additionally, he discusses how the callback queue operates alongside the call stack and web API, ensuring asynchronous tasks do not block the UI thread 2.

   

Async/Await

Async/await syntax in JavaScript simplifies asynchronous programming by allowing developers to write cleaner, more readable code. Joe Zack and Alan Underwood discuss the differences between using async/await and promises, noting that while async/await can prevent callback hell, it requires careful consideration of execution order. Alan explains that async functions return promises, and await pauses execution until a promise is resolved, making it crucial to use them appropriately to avoid unnecessary delays 3.

Await tells JavaScript to actually pause until it's done, right? So if you have three await calls in a row that each take 3 seconds to complete, it'll be 9 seconds before you reach after that code.

--- Alan Underwood

He emphasizes that while async/await offers a cleaner syntax, developers should not replace all promises with async/await without considering the specific needs of their code 4.

   

ES 2017

ES 2017 introduced several new features that enhance JavaScript's capabilities, including the async/await syntax. Alan Underwood notes that most major browsers, except Internet Explorer, support ES 2017, allowing developers to leverage these advancements widely. He explains that async functions automatically wrap return values in promises, streamlining asynchronous operations 5.

If you return back an integer or a boolean, it'll put it in a, it'll wrap it for you.

--- Alan Underwood

Additionally, Alan mentions a lesser-known ES6 feature called "jobs," which provides more control over execution timing, similar to setTimeout(0) but with enhanced precision 6.