How to Create Own Observable from Scratch – Looping

1+

How to Create Own Observable?

Welcome to second part of the series named Create own Observable from Scratch. If you haven’t check the previous article on Arrays then check it here. In that article, we cover the backbone of Arrays understanding. That will be handy here.

How to Create Own Observable from Scratch – Looping

However, In this article, we will see some concept on Observable and why we need this. In addition, observables is that they are like asynchronous arrays. Just like forEach method. It takes a callback function, and it executes it once for each item in the array. But this is done synchronously.

Synchronously 😕? Why we take this example then?

Yes, firstly we understand the basic implementation of forEach method. Then we will jump on the asynchronous call too.


Nothing new is here. Multiple time you’ll use this. Okay take a breath and move to asynchronous implementation.

What happen in above code 🤔?

Let me explain the code. We’ve passed a callback function to addEventListener, which is called each time a click event happens on the element with the id someDomElement. It’s almost like that handler is called once for each time a click event happens…

addEventListener acts like a forEach function for this DOM element, which is called each time a click event happens. The only conceptual difference between this example and Array.prototype.forEach is that the event listener happens asynchronously.

As we know that we can compose observables, and use functions like map and filter, similar to what we did with arrays in part 1. Now we are ready to focus on implementation of observable. But some more thing is remain. I ensure that in the next article you’ll feel free to implement observable with confidence.

Let us assume that we are working on Netflix like application. It has lots of movies. Here’s a not-so-random selection of four movies, as they might be represented in the application which inexplicably recommends only 1980s films. Since JSON is cumbersome, let’s also represent those movies with colored circles.

Movies represented as colored circles for convenience.
Movies represented as colored circles for convenience.

As we see that in above data, there is no any relationship between them. No any context also present. But let me allow these data into array for container.

Placing these movies into an array gives them a logical relationship. For instance, could be a user’s favorite movies.
Placing these movies into an array gives them a logical relationship. For instance, could be a user’s favorite movies.

But why we put them into container 🤔?

Nice, If you arise these type of questions. This array could represent the favorited movies of our favorite fictional user, Mary. Or they could represent the four most popular movies of the 80s. The point is, we now have some logical context for thinking about these movies since we have containerized them in an array. It means something to us when we look at that array. Hey, those are Mary’s favorite films!

But one more thing also which you should take in consideration. Array.prototype provides methods like map and filter, we can now perform aggregate operations on the movies by composing methods on their container.

By placing the movies inside of a collection, we can now compose operations on that collection, such as map, filter, concat, etc.
By placing the movies inside of a collection, we can now compose operations on that collection, such as map, filter, concat, etc.

Okay, But what about events 🤭?

Yes, Javascript didn’t give us a way to containerize events! But what if we need to make an xhr request to get each one of those movies from our API layer? How can we containerize values that arrive over time?

Here Observable comes in the play. This is the fundamental benefit of observables, they let us containerize and compose asynchronous events. It give us containerize an async stream of events. In this case, a user’s list of favorited movies.

Observable comes with plenty of operators, you must see this also.

Try to avoid loop, if possible 😵

Why?

Ok, let us assume that you have a task. You have to filter a collection of movies by director, and mapping to only their names and year:


Great, But wait.

Do you know that this technique is synchronous or asynchronous?

Well that’s the main point. Arrays have map and filter, but I just said observables have those as well. Ohh 😨, then why we use Observable? Currently, You only know that a container is being filtered, then mapped. Could be async, could be sync. Right?

That’s why choosing to write declarative code over imperative code.

However, see the below code now:

Big surprise there! Loops are about as imperative as it gets, and they are practically etched into the synchronous world. You cannot hope to reason about loops at a higher level, because you’ll always be bogged down with implementation details.

As we’ll see, observables free us from this burden when we are dealing with async data. Now lets wrap things up and move to conclusion of this part.

Summary

  • Collections like arrays and observables make it easier for us to compose operations, like map and filter
  • We can free ourselves from implementation details by using a more declarative, composable approach like map and filter, as opposed to writing imperative loops

In next part, we will look at the Observer pattern, as implemented by #RxJS, and then we’ll start writing some creational methods for our observable class.

 

 

 

1+
Summary
How to Create Own Observable from Scratch – Looping
Article Name
How to Create Own Observable from Scratch – Looping
Description
Welcome to second part of the series named Create own Observable from Scratch. If you haven't check the previous article on Arrays then check it here.
Author
Publisher Name
Das JS
Publisher Logo