Semantic Flow Control with Javascript Getters

Image by Yan Cabrera from Pixabay

Scenario

We want a semantic label for a javascript expression containing multiple conditions that can be used for flow control which makes our code more friendly and readable.

Approach

We will use the timer example from the Lit documentation to illustrate.

The timer web component example has two parameters that determine whether the timer is still running and they are end and remaining.

And so to see whether the timer is still running we can use this get expression.

get running() {
    return this.end && this.remaining;
}

And now that we have encoded the logic of whether the timer is still running this way we can perform flow control like this.

  if (this.running) {
      ...
  }