Precedencia del operador con el operador ternario de JavaScript
Parece que no puedo entender la primera parte de este código ( += ) en combinación con el operador ternario .
h.className += h.className ? ' error' : 'error'
La forma en que creo que funciona este código es la siguiente:
h.className = h.className + h.className ? ' error' : 'error'
Pero eso no es correcto, porque da un error en mi consola.
¿Cómo debo interpretar este código correctamente?
Usar:
h.className = h.className + (h.className ? ' error' : 'error')
Quiere que el operador trabaje para h.className
. Será mejor ser específico al respecto.
Por supuesto, no debería producirse ningún daño h.className += ' error'
, pero eso es otra cuestión.
Además, tenga en cuenta que +
tiene prioridad sobre el operador ternario: Precedencia del operador JavaScript
Piénsalo de esta manera:
<variable> = <expression> ? <true clause> : <false clause>
La forma en que se ejecuta la declaración es básicamente la siguiente:
- ¿Se
<expression>
evalúa como verdadero o como falso? - Si
<expression>
se evalúa como verdadero, entonces el valor de<true clause>
se asigna a<variable>
,<false clause>
se ignora y se ejecuta la siguiente declaración. - Si
<expression>
se evalúa como falso,<true clause>
se ignora y<false clause>
se asigna el valor de<variable>
.
Lo importante a tener en cuenta con el operador ternario en este y otros lenguajes es que cualquier código que se encuentre <expression>
debe producir un resultado booleano cuando se evalúe: verdadero o falso.
En el caso de su ejemplo, reemplace "asignado a" en mi explicación con "agregado a", o similar para cualquier aritmética abreviada que esté utilizando, si corresponde.
Hace +=
lo que quiere, pero en la declaración ternaria a su derecha, verifica si h.className
es falso, cuál sería si no estuviera definido. Si es verdadero (es decir, si ya se ha especificado un nombre de clase), entonces el error se agrega con un espacio (es decir, se agrega una nueva clase); de lo contrario, se agrega sin el espacio.
El código podría reescribirse como usted sugiere, pero debe especificar que h.className
se usará para comparar la veracidad, en lugar de usar su valor real, en el operador ternario, así que asegúrese de no molestarse con la concatenación de valores. al mismo tiempo que haces tu operación ternaria:
h.className = h.className + (h.className ? ' error' : 'error');