Promises vs Observables in JavaScript cover image

Promises vs Observables in JavaScript

Promises & Observables are often seen as a similar concept in JavaScript. This article differentiates the properties of a JavaScript Promise with an Observable.

Promises vs Observables in JavaScript

Native vs Non-Native

A promise in JavaScript is a native feature that was introduced in ECMAScript 6. This is the feature supported by all modern browsers natively without the use of any external library or plugin.

An Observable is not a native feature of JavaScript. It is provided by an external library named RxJS that has a complete documentation for its usage. To use an Observable, we must include the RxJS library in the project.

Single-valued vs Multi-valued

A promise can be resolved only once. Once the Promise is resolved, the chained then() method will be called.

An Observable uses an indefinite data-stream. Unlike Promises, it can send multiple values to its subscription. It can be definite or indefinite. For an Observable to be definite, we need to call the complete() from within the observable. If complete() is not called, the subscriber will keep listening to the observable until it is unsubscribed using the unsubscribe() method.

promises vs observable flow chart
Promises vs Observable flow chart

Lazy vs Non-lazy

A Promise is not lazy in nature. A promise will be executed even if there is no then statement chained to that Promise. No matter you chain a promise with a then(), catch() or finally(), the promise will execute.

An Observable is lazy in nature i.e. it won’t run until there is a subscription for that observable. If there is no subscription for an observable, the observable will not run.

Cancellable vs Non-Cancellable

A Promise is not cancellable by default. Canceling a Promise is not a native property of a Promise. Though there exist libraries that can be used to cancel a Promise.

An Observable can be canceled without the use of any external library. We can cancel an observable any time by calling the unsubscribe method on its alias.

Sending Data

A promise can use the resolve() method to pass some data to the chained then() function to be operated on that data.

An observable use the next() method to send the next value/data to its subscriber. After all values are sent to the subscriber, the observer uses the complete() method to close the data stream. It is not mandatory for the observable to close the data stream. Instead, we can call the unsubscribe() method on the alias of the observable.

Chaining Methods

A Promise has available options for chaining with then(), catch() or finally() method.

An Observable has the options of chaining with many functions like subscribe(the most common chaining method), map, filter, reduce, forEach, … and the list is pretty long.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.