javascriptvariable-assignmentconditional-operatoroperator-precedencecompound-assignment

Operator precedence with JavaScript's ternary operator

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?

Solution

  • 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