How to Use the Observable Pattern in JavaScript

Lately, I’ve been trying to become more familiar with design patterns. One thing I’ve realized along the way is that it’s not easy to recognize where a specific pattern might be useful. It usually comes down to having that light bulb moment where you suddenly say to yourself “Hey! This might be a good place to use a certain design pattern.” Define the problem.
Since design patterns are used to solve specific problems in software, let’s try to define such a problem and work to solve it using a design pattern in JavaScript.
With the rise of frameworks like React, we often hear about ‘application/component state.’ When the state is updated, components will re-render accordingly. In React, components are just a representation of what the user interface should look like.
What if we wanted to try and implement that same sort of functionality using only vanilla JavaScript? There are any number of ways to do it, but in our case, let’s explore how using a design pattern could help with our implementation.
So, let’s define the problem we are trying to solve: we need to be able to update multiple page elements when our application state
Source: https://managewp.org/articles/18384/how-to-use-the-observable-pattern-in-javascript

source https://williechiu40.wordpress.com/2019/02/19/how-to-use-the-observable-pattern-in-javascript/