Operator precedence with JavaScript's ternary operator

Question

I can’t seem to wrap my head around the first part of this code ( += ) in combination with the ternary operator.

h.className += h.className ? ' error' : 'error'

The way I think this code works is as follows:

h.className = h.className + h.className ? ' error' : 'error'

But that isn't correct, because that gives a error in my console.

How should I interpret this code correctly?

Answer 1

Use:

h.className = h.className + (h.className ? ' error' : 'error')

You want the operator to work for h.className. Better be specific about it.

Of course, no harm should come from h.className += ' error', but that's another matter.

Also, note that + has precedence over the ternary operator: JavaScript Operator Precedence