TIL - JavaScript Double Ternary

This is might be venturing into JavaScript: The Bad Parts, but I was flummoxed today when ChatGPT answered a question I had with a JavaScript double ternary. I’d never heard of it before. MDN more aptly calls these “conditional chains”.

> const mammal = true
> const dog = false
> const animal = mammal ? dog ? 'shih tzu' : 'whale' : 'spotted wobbegong'
> animal
'whale'

> const mammal = false
> const animal = mammal ? dog ? 'shih tzu' : 'whale' : 'spotted wobbegong'
> animal
'spotted wobbegong'

I believe the proper way to format the above (to make it less horrible), would be

const animal = mammal
  ? dog // if mammal...
    ? 'shih tzu' // ...if dog then 'shih tzu'
    : 'whale' // else 'whale'
  : 'spotted wobbegong' // else 'spotted wobbegong'

Actually, it’s still pretty cruel and unusual. But the different branches would evaluate like this:

const mammal = true
const dog = true
const animal = mammal
  ? dog
    ? 'shih tzu'
    : 'whale'
  : 'spotted wobbegong'
console.log(animal) // 'shih tzu'

const mammal = true
const dog = false
const animal = mammal
  ? dog
    ? 'shih tzu'
    : 'whale'
  : 'spotted wobbegong'
console.log(animal) // 'whale'

const mammal = false
const dog = true
const animal = mammal
  ? dog
    ? 'shih tzu'
    : 'whale'
  : 'spotted wobbegong'
console.log(animal) // 'spotted wobbegong'

const mammal = false
const dog = false
const animal = mammal
  ? dog
    ? 'shih tzu'
    : 'whale'
  : 'spotted wobbegong'
console.log(animal) // 'spotted wobbegong'

MDN says ternary (“conditional”) chains are right-associative and Wikipedia says that means operations are grouped right to left. That’s a lot to ponder, but I think we’d expect this one to be grouped like this:

const animal = mammal ? ( dog ? 'shih tzu' : 'whale' ) : 'spotted wobbegong'