Observables are like Supercharged Functions

A comparative look at observables and functions with examples

Photo by Maarten van den Heuvel on Unsplash

Introduction

RxJS observables are both powerful and heavily used in Angular. However, for most beginner developers, the concept of an Observable can seem overwhelming at first.

In this article, I will show you how observables are very much like the JavaScript functions that you are already familiar with except that observables are are much more powerful and flexible.

I use TypeScript for the code examples in this article but it should be okay to easily convert them to the equivalent JavaScript code.

Convert a function to an Observable

To stress the point that an Observable is just like a typical function we will first create a simple function then convert it to an Observable. We will extend this function as we proceed with the article to show other similarities.

The function below will simply combine or concatenate two string values, first-name and last-name then return the full-name.

public fullnameFunction(): string {
    var firstname = 'Elon';
    var lastname = 'Linga';
    var fullname  = firstname + " " + lastname;
    
    return fullname;
}