Observable vs Subject | Most frequently asked question | Let’s postmortem it

This is very common confusion comes when we start understanding Subject and Observable and in most of the interviews this question generally asked that why we need Subject when we already have Observable.

Subject and Observable both are the part of RxJs library and in recent times it is getting used in almost all projects (Angular/React/Vue/Node etc.).

Let’s understand the difference between Observable and Subject point by point so that in future we don’t find any doubts

Difference #1: Observable needs observer interface to see Observable behaviour while Subject acts as both Observer & Observable.

That means Subject can be used anywhere in the code to emit or subscribe a value but Observable can be only be used freely to subscribe a value but you can’t emit value outside from Observable scope.

Below is the example-

If you see in the above example, you can always call next() on Subject instance anywhere in the code but in case of Observable, you need observer interface to call next() which can’t be access outside Observable scope.

Difference #2: Observable emits a value only when there is a subscriber because they are COLD but Subject always emits a value doesn’t matter subscribe is there or not because they are HOT. So if you emit a message before subscribing to Subject then you will loose the subscription.

Let’s see these cases in below examples-

Below is the outcome-

In the above output you could see Observable message is coming but Subject message not and the reason if next() is called before subscribing Subject.

Lets fix it by just putting next() call below to the subscription of Subject-

Output-

Above issue is fixed now.

Difference 3#: Observables are Single Casting while Subjects are Multi Casting. So this means when Subject emits a value then all its subscribers get the same value while in case of Observable, for each subscription Observable emit a value separately.

Let’s see Single and Multicasting behaviour in below example-

In the above example, you could see we emit Math.random() with Observable and Subject both. And there are 2 subscribers to each Observable instance and Subject instance.

Now lets first see the Output -

In above result, you could see that Subject’s Value1 & Value2 are same while Observable’s Value1 & Value2 are not. And the reason is Observable Single Casting behaviour.

That means when you have 2 or more subscribers to Observable and then you emit a message then for each subscriber, Observable emits a value separately so in this case next() method gets called 2 times since we have 2 subscribers and for each time Math.random() return unique no.

While in case of Subject, Subject only emit a value one time and then all its subscribers receive same value each time.

I hope this article will help you to understand and use Subject and Observable better.

Stay tuned and subscribe my medium channel!!!

--

--

--

Technical Writer | Editor | Coder | Active Stackoveflow contributor | Love to learn More | Email — bansal.suneet@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Add value to your chatbots through phone calls

Contribute to Hacktoberfest by building 15 mini web apps

Week 2 GA | Behave Yourself!

Var, Let, and Const.

Creating a User Interface for Data Modification, Part 2

Vuex and NuxtJs, get Modules Working

A Journey through React Hooks

Alexa Custom Skill Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suneet Bansal

Suneet Bansal

Technical Writer | Editor | Coder | Active Stackoveflow contributor | Love to learn More | Email — bansal.suneet@gmail.com

More from Medium

Want a Boring Angular App? Then Don’t Do This.

Angular Application | Performance Optimization Tips

Angular Application Performance Optimization Tips. In very easy words.

Angular Component Store — powerful and easy

Data flow between Component and ComponentStore

Angular Vs React Js — The Pros and Cons