In Javascript, users are faced with several different methods of creating asynchronous code. This type of programming allows a unit of work to run separately from a primary application thread, notifying the main thread when work has been completed or failed. A practical example of this would be an application loading a webpage after a user signs in, while simultaneously collecting their data from a database. As you can imagine, asynchronous programming can greatly improve application performance and responsiveness.
Two of the most popular frameworks for producing and consuming data within this method are promises and observables. Read on to learn about the definition and use cases of each, as well as which one you should utilize when programming a given application.
What is a Promise in Javascript?
The simpler of the two methods, promises are exactly what they sound like. In Javascript, operations, implementing a promise assures that when an asynchronous operation completes, an object is returned. A promise can only exist in three states: pending (before an operation begins), fulfilled (operation completed), or rejected (operation did not complete, an error value is thrown).
By their nature, promises are “one and done,” and each can only handle a single result from a single asynchronous operation. Once completion has occurred, a promise will provide a result, but cannot be used to handle any subsequent results or re-initiate the process.
Here is an example of a promise in context; once the action is finished, the promise passes the string “Work is done on Promise.”
What is an Observable in Javascript?
The more versatile of the two operations, Observables are a part of the RxJS library and have quickly become a large aspect of Angular web development. Just like promises, observables can be used in asynchronous operations to wait for a result and return data back to a developer. An observable moves through four stages: creation (using a create function), subscription (users must initiate), execution (what is inside the create block), and destruction (after an error or complete notification, observable is automatically unsubscribed).
Where observables differ from promises, is their ability to handle multiple values in more diverse ways. Unlike a “one and done” scenario, Observables can be utilized in streams, whereas data may be delivered in many discrete events, serialized one after the other—in theory, keeping a connection open forever.
Furthermore, observables can also be used alongside a large library of pipeable operators that ship with RxJS or even ones developers implement on their own. This means that observables can be used in operations that react to, handle, transform, filter, branch, fork, join, or otherwise manage streaming data. For example, the method works with standard operators like “map,” which transforms one kind of input to another, or “filter,” which controls which notifications move through a pipe. Observable streams can also incorporate factory functions that come with RxJS like “timer” and “interval,” which help convert static code to reactive code.
Here is an example of a more complex use case of an observable:
Differences Between Observables and Promises
Let’s dive into the key differences between these two methods and how they function within a program.
Eager vs. Lazy
An observable is lazy and a promise is eager. What does this mean? Well, a promises’ execution starts immediately, without waiting for a consumer, making it eager. A consumer does not have to act. On the other hand, an observable is lazy because its producer function does not get called until you subscribe to the stream.
Asynchronous vs. Synchronous
A promise is fully asynchronous in nature and cannot be used in any other type of observation. While an observable can take on any functionality of a promise, it can also be used synchronously. Because it can be run again and again, observables will behave both ways.
Cancellable vs. Non-Cancellable
Due to its eager and single-use nature, a promise is not cancelable. If a caller cannot change their mind and cancel an operation once execution has started; a promise will complete itself fully. An observable does support native cancellation, with the user gaining the ability to invoke the “unsubscribe()” method on subscription.
Single vs. Multiple Values
Promises can only be used once to emit one single value, whereas observables can emit multiple values continuously to multiple users.
Ability to Handle Errors
Observable execution arrears are deliverable to the subscriber’s error handlers, with the subscriber automatically unsubscribing from the observable. Promises push error to child promises, as they are unable to handle them on their own. For centralized and predictable error handling, observables are the way to go.
When to Use a Promise
Although observables can handle any function a promise can, there are still use cases for this simpler method. Here’s when you might want to utilize a promise in Javascript:
- When using async/await – This syntax is specially made for working with promises, so if your code contains it, you’ll want to match it to the proper method.
- When Not Using Third-Party Libraries – Promises are native to Javascript, so use them if you’re avoiding third-party libraries for any reason.
- When Resolving a Single Event – Sometimes the “one and done” nature of promises prove the most useful.
- When Events Must be Non-cancellable – If you don’t want to allow users to be able to change their minds once an execution has begun.
When to Use an Observable
As the more versatile of the two, there are several use cases where you must use an observable to garner your desired output. Here are some examples:
- When Multiple Values Need to Emit – Only observables are able to complete this operation repeatedly
- When Events Should be Cancellable – Unsubscribing to an observable can terminate any pending asynchronous activity
- When Working with Continuous Streams of Data – Observables allow for the response of events and manipulation of data as it is received over time.
- When Working with Operators or in Angular – Observables work in tandem with the RxJS library and Angular, making them the right choice for this type of web development.
- When Code Must Behave Synchronously – Only an observable can be asynchronous and synchronous.
Learn More About Javascript and Coding
We hope this article will assist you in becoming a better programmer! If you’re interested in learning more about the coding field and how to level up your skills, be sure to check out the additional resources we’ve compiled here at codingbootcamps.io:
- Which coding language should you learn first? Explore our detailed guides to C, C#, C++, HTML/CSS, Java, Python, R, React, Ruby, or SQL.
- Don’t forget about libraries and frameworks- we didn’t! Here’s what you need to know about AJAX, Bootstrap, Express.js, jQuery, and Handlebars.
- Learn about the career path of a software engineer, web developer, back-end web developer, or front-end web developer. Or explore the difference between front-end and back-end web development.
- Enhance your knowledge with a bootcamp! Learn more about what these programs offer and check out our comprehensive listings and program comparisons in areas like coding, data analytics, and more.
- Read about the top front-end and back-end programming languages you need to know and check out which tech jobs are in high demand for 2022 and command the highest salaries.
