Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Deliver Synchronous Values with the RxJS of() Operator

    André StaltzAndré Staltz

    RxJS is a lot about the so-called "operators". We will learn most of the important operators, one by one. In this lesson, we will see our first creation operator: of().

    If you want to deliver synchronous values in the sequence, you use of() instead of writing boilerplate.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Now we know the very basics of the observable type. But RXJS is a lot about the so-called 'operators'. If you check the documentation, there are many, many operators available out there. The list is long, but there are actually a reasonable amount of operators that are important to know. That's why this course here exists.

    We're going to start by looking at the creation operators. These are essentially a static function on the observable type. The observable there has 'of', and 'from', and 'create', etc. We're going to start by looking at 'of'. It's a common pattern to produce a sequence of values, this sequence being synchronous -- we saw like that.

    Remember, when we had varbar equals our 'x' observable, create the function with observer. Then we delivered observer 'next 42', and then we delivered observer 'next 100', then '200', and then 'complete'.

    This is a quite common pattern. We just wanted to leave these values and then stop. 'Of' does precisely that. It just allows you to deliver '42', '100', and '200' synchronously, so that is much less much boilerplate to write than the second one here. It does essentially the same, if we now consume this observable by subscribing to it, we get the next value on handler.

    Here it says, next is 'x'. Then we have an error handler, so on 'error of error', and then it has the completion handler. Here we say, 'done on the console log.'

    If you run this, we see '42', '100' and '200', and done. That's what 'of' is about. If you want to deliver synchronous values in the sequence, you use 'of' instead of writing this boilerplate.