July 17th, 2024

JavaScript Promises from the Ground Up

This tutorial explores JavaScript Promises, emphasizing their role in managing asynchronous code. It covers Promise basics, states, handling methods, event loop, practical usage with fetch(), and the shift towards Promise-based operations for enhanced code quality.

Read original articleLink Icon
JavaScript Promises from the Ground Up

This tutorial delves into the fundamental concepts of JavaScript Promises, explaining their importance in handling asynchronous code. It emphasizes the necessity of understanding JavaScript's single-threaded nature to grasp Promises effectively. The article introduces Promises as a solution to Callback Hell, a common issue in managing asynchronous operations. It discusses how Promises work, their states (pending, fulfilled, rejected), and how to handle them using methods like .then(). The tutorial also touches on the event loop in JavaScript, explaining how setTimeout functions asynchronously. Furthermore, it demonstrates working with Promises in practical scenarios, such as using the fetch() function for network requests. The piece concludes by highlighting the significance of Promises in modern web APIs and the transition from callback-based operations to Promise-based ones for improved code readability and maintainability.

Related

Optimizing JavaScript for Fun and for Profit

Optimizing JavaScript for Fun and for Profit

Optimizing JavaScript code for performance involves benchmarking, avoiding unnecessary work, string comparisons, and diverse object shapes. JavaScript engines optimize based on object shapes, impacting array/object methods and indirection. Creating objects with the same shape improves optimization, cautioning against slower functional programming methods. Costs of indirection like proxy objects and function calls affect performance. Code examples and benchmarks demonstrate optimization variances.

JavaScript Visualized – Event Loop, Web APIs, (Micro)Task Queue [video]

JavaScript Visualized – Event Loop, Web APIs, (Micro)Task Queue [video]

The event loop in JavaScript is crucial for managing asynchronous tasks efficiently. It includes the call stack, web APIs, task queue, and microtask queue, enabling non-blocking operations. For more details, feel free to inquire.

Build your own React (2019)

Build your own React (2019)

Rodrigo Pombo's guide demonstrates building a simplified React version from scratch, focusing on React 16.8 with hooks. It covers creating core functions, Concurrent Mode, Fibers, and reconciliation. The tutorial emphasizes understanding React's internals by gradually implementing key features.

The Cost of JavaScript

The Cost of JavaScript

JavaScript significantly affects website performance due to download, execution, and parsing costs. Optimizing with strategies like code-splitting, minification, and caching is crucial for faster loading and interactivity, especially on mobile devices. Various techniques enhance JavaScript delivery and page responsiveness.

Link Icon 2 comments
By @moritzwarhier - 7 months
Very well-written and easy to follow, wish I had read this a couple years ago :)

I would love a follow-up that fills the gap about the relatio ship between generator functions and promises though.

This part seems very transparent in practise, but I think they're also the reason why the article gets slightly fuzzy at the end.

It claims that 99% of developers need not to care about promise "unwrapping".

But isn't that what powers every async function with more than one "await" in it?

Would also love to read a thorough breakdown of immediately resolved promises and their duality with setTimeout(resolve, 0).

By @gabrielsroka - 7 months
> the await keyword is syntactic sugar for the .then() callback:

async/await is not just syntactic sugar. See

https://news.ycombinator.com/item?id=23701736

And the rest of thread