Observer pattern for dummies with JS.

I remember when I first tried to understand the Observer pattern, I was very confused because at that time I was starting in this thing called Software Development, I was just a self taught beginner with a Business degree trying to become a software developer one day. That was almost 2 years ago. Now I understand it well and I use it a lot in my daily job (yes, I got the job!). This explanation is for those people who want to understand it and after that, apply it. So here is my best try to explain the Observer pattern as easy as I can.

The first example for understand the pattern is the following:

Youtube example, if you’ve an account there and we think about it a bit, we realice that exists two kind of users in Youtube. The video creators and the viewers. We’ll called the video creators as Observable people or Observable Youtube channels, ok?. It could be said that all the rest of us there are the viewers, we’re the ones who see these Youtube videos. Ok, we know that we (the viewers) can subscribe to these Youtube channels or these Observable people (remember that they’re the same) to be notify if one of them had been upload a new video, right? They often repeat this phrase a lot… Ok, so if you understand how this works, now you understand the Observer pattern. The Observer pattern is all this set of operation between the Observables and the subscribers / Observers. The Youtube video creators are the Observable as we said before (or as well called Subject) and we’re the viewers or better called the Observers, we’re the ones who subscribe to these Observables to be notified when they (the Observables) change. As for example when the Observables upload a new video as we saw above.

Ok, so let’s go to saw this in code, I’ll use JavaScript for the example, but it’ll be exact the same Youtube example so you will understand it easily.

// First, we define the YoutubeChannel class that will have the following functionalities (or functions or methods, it's the same): subscribe, unsubscribe and notify. I'll explain more below.
class YoutubeChannel {
  observers = [];
  subscribe(observer) {
    this.observers.push(observer);
  }
// 1*
  unsubscribe(observer) {
    const index = this.observers.findIndex(obs => {
      return obs === observer;
    });
  }
// 2*
  notify(newData) {
    this.observers.forEach(observer => observer.update(newData))
  }
}
// Second, we define the YoutubeSubscriptor class that will receive the updates from YoutubeChannel.
class YoutubeSubscriptor {
// 3*
  update(newData) {
    console.log(`We have received new data, that is: ${newData}`);
  }
}
// Using the classes
const pewDiePie = new YoutubeChannel();
const normalUser = new YoutubeSubscriptor();
pewDiePie.subscribe(normalUser); // 4*
pewDiePie.notify('I have a new video');  // on console will show/print 'We have received new data, that is: I have a new video'

I wrote four points inside the code to explain it if you want to know what they are trying to do.

1* Don’t worry about what the code is doing here, it’s just looking for the observer calling the unsubscribe function in the observers array to unsubscribe.

2* This function/method (it’s the same) notify each observer that it’s in the observers array.

3* This method notify with an update to the subscriptor or Observer and it shows a message.

4* normalUser have been suscribe to the pewDiePie channel

And that’s it. If you have some questions, I’ll be glad to reply them here.

If you want to know more about Design patters with JavaScript, check this https://github.com/Josehdez96/design-patters-with-javascript

If you want to know more about good commit practices, check this other: https://github.com/Josehdez96/good-commit-practices