Question about some Code in Pomodoro Example Project

I’m looking at the code for the Pomodoro clock example project and I came across some code that I don’t quite understand. I’m looking at this block specifically around line 123.

this.state.timerType == 'Session' ? (
        this.state.intervalID && this.state.intervalID.cancel(),
        this.beginCountDown(),
        this.switchTimer(this.state.brkLength * 60, 'Break')
      ) : (

What exactly is this.state.intervalID && this.state.intervalID.cancel() doing?

I have seen && used as a trick to set default paramaters for a function, but it doesn’t appear that’s happening here. This -> this.state.intervalID evaluates simply to a string of numbers which will be truthy. The cancel call in the second expression is from a small js module called accurateInterval.js and essentially just calls clearTimeout which in turn returns undefined which will be falsey so the whole expression evaluates to falsey. I feel I’m probably missing the point here but that’s the first bit of confusion.

Secondly, I’ve never seen statements separated by commas like this in a ternary conditional. I’m guessing this just executes each line? Why is it comma separated instead of with a semicolon?

The state is initialized with intervalID: '', so it could be falsy and I guess you probably don’t want to run the cancel function then.

Ah that makes sense thank you. Although the phaseControl function (where the above block of code is sitting) is only called here:

beginCountDown() {
    this.setState({
      intervalID: accurateInterval(() => {
        this.decrementTimer(); 
        this.phaseControl();
       }, 1000)
    })
  }

which would be setting an intervalID in every case right?

But it’s not 100% sure that beginCountDown has been run,
because it is a different function.
It increases the coupling, so it is less complex to check it directly when you want to run the function.

Thank you for the replies. I gather that the comma separated expressions in the ternary expression are just evaluating them in succession? And this format is used because ternaries typically contain a single line of code?This syntax is also used here:

timerControl() {
    let control = this.state.timerState == 'stopped' ? (
      this.beginCountDown(),
      this.setState({timerState: 'running'})
    ) : (
      this.setState({timerState: 'stopped'}),
      this.state.intervalID && this.state.intervalID.cancel()
    );
  }

I’m also confused why any of this would be assigned to the variable “control” when it is never used or returned.

As for my first question, I’m understanding you that it increases the coupling and we can’t be 100% sure that beginCountdown has been run, but just to make sure I’m understanding the code, in this specific case

beginCountDown() {
    this.setState({
      intervalID: accurateInterval(() => {
        this.decrementTimer(); 
        this.phaseControl();
       }, 1000)
    })
  }

are we not 100% sure that phaseControl will only be called after the intervalID has been set? Sorry if I’m nitpicking, I want to make sure I’m not missing something. What I’m taking away is that it’s there for best practice in case someone modifies the code and uses it in a way we don’t expect.

The comma operator runs from left to right and returns the last result. This is useful for side effects, e.g. beginning the countdown.

Yes, we probably don’t need it here. Maybe it was for debugging purposes (easy to console.log).

We know, that phaseControl is called after decrementTimer.
We don’t know if the intervalID has been set or if the value is even “correct”.

There are good videos about the JavaScript event loop: