How to Create Own Observable from Scratch – Arrays

1+

How to Create Own Observable?

RxJS is moonlight for Angular. And Observable is the heart of modern technique to use. In previous article, we covered the crash course on RxJS by using CDN. It can give you deep introduction of all features of RxJS. We already covered the common mistakes in RxJS doing by developer now a days. If you already go through these articles. Then this new day, we will create own Observable from Scratch.

create own observable from scratch

In the beginning, I was to confused that How and When RxJS will be use. But slowly, I understand the concept of Observable and can read the source code with confidence. If you are facing same then stay with us to scare away the fear.

Are you ready to build your own Observable from Scratch?

If your answer is Yes. Then move forward otherwise go back with the crash course to practicing with same. First of all, you’ve to understand the Arrays to understand the Observable.

Are you ready to build your own Observable from Scratch?
I am ready to build own Observable

Array Operator

Ahh 🤔 Arrays?

If you’re familiar with map, filter, reduce, and flattening nested arrays. You can skip this article and move to second part of this series.

Here is a baby task for you. Take a array of numbers like:


Process the array and +1 with all elements of array arr. Step back and open your favorite IDE and #DoItYourself

Solution:

If your step is same as like given above in Solution. Then you’re in a right path. Let’s see the magic behind the map operator.


Here, you can observe that nothing fancy doing in the code. Array.prototype.map takes a projection function in which looping the element in the array. Therefor apply the projectionFn to each element, and push the results of that into a new array.

Can you optimize the map operator?

Comment your forked fiddle if you optimize the map operator in above task 🤭.

Filter Operator

After process the array, now you want to filter the array. So let’s cover the filter too in this article. Another baby task is for you. Filter the same above array and result should be even number.

Solution:

It is easy peas for you 👍. Let’s move to the code of filter operator .


Again, Its a simple implementation. It use predicate function and check for even number that applies to every element in the array.

Dare to optimize filter operator?

Have you observe that Nothing fancy code is working behind the map and filter operator? Now we can combine the both operator and have some nice composition.


Composition is a fascinating topic. MPJ has a nice series on Youtube which you can find here.

Tired 🥱 of taking about Arrays?

There’s one more observation we need to take from arrays. Once you have that, observables will be trivial.

FlatMap Operator


What output you’ll get? It is hard to read in your project. So what you’ll do with your code. Again nothing fancy code is needed here too.

In line 30-32, We use map operator over gameData array. And It returns array but not easy to read the array for coding due to nested array.

This is probably not what we wanted. Ideally, we’d like to have everything flattened into a single array. We simply need a method which will take an array, and reduce its depth by a factor of one. Since we have a single layer of nesting in this array, we would want to apply this depth-reducing method once.


Logic behind the flatMap is:

Do you have energy 🔥 to optimize it?

This comes up on a regular basis when working with higher-order observables as well (observables of observables). If you’ve ever found yourself dealing with nested observables, and reaching for the flatMap operator, then you’ll know what I mean.

That’s it for now. If you’re comfortable with arrays. Then upcoming road will be easy for you.

If you reach at the end of this article. That mean, its a good and useful article for you. Isn’t it? If yes then tap on heart icon 💗 in right side of article at bottom. Share and comment please.

1+
Summary
create own observable from scratch
Article Name
Create own observable from scratch
Description
If you already go through Rxjs Crash Course articles. Then this new day, We will create own Observable from Scratch. RxJS is moonlight for Angular.
Author
Publisher Name
Das JS
Publisher Logo