JavaScript and RxJS Password Strength Indicator
Each subscribe(...) invocation results in creating and returning a new Subscription unless special measures are taken (like .publish(), .share()...)


  Subscribing to observables
  
  Remember, observables are lazy. If you don’t subscribe nothing is going to happen. It’s good to know that when you subscribe to an observer, each call of subscribe() will trigger it’s own independent execution for that given observer. Subscribe calls are not shared among multiple subscribers to the same observable. — Luuk Gruijs


Each Subscription


eats up a bit of resources;
is processed separately from the others;
and needs to be unsubscribed separately to release the resources.


Therefore, if you have no special reasons, you should subscribe the least number of times. In your case, a single subscription is sufficient. You can still use separate functions to delegate them the actual work (setClassNames(), setWarning(), setStrength()).



const { fromEvent } = rxjs
const { map, filter } = rxjs.operators

document.addEventListener('DOMContentLoaded', () =&gt; {
  const passwordInput = document.getElementById('password')
  const passwordHelp = document.getElementById('passwordHelp')
  const passwordStrength = document.getElementById('passwordStrength')

  const passwordChanged$ = fromEvent(passwordInput, 'input')
    .pipe(
      map(x =&gt; x.target.value),
      map(zxcvbn)
    )

  const setClassNames = password =&gt; {
    const state = password.score &gt; 2 ? 'success' : 'danger';
    passwordInput.className = `input is-${state}`
    passwordStrength.className = `progress is-${state}`
  };
  const setWarning = password =&gt; { passwordHelp.innerHTML = password.feedback.warning };
  const setStrength = password =&gt; { passwordStrength.setAttribute('value', password.score + 1) };

  passwordChanged$
    .subscribe(password =&gt; {
      setClassNames(password);
      setWarning(password);
      setStrength(password);
    });
})