Precedencia de operadores en JavaScript

La precedencia de operadores define el orden en que los operadores se evalúan cuando hay múltiples operadores en una expresión.

Como es lógico, los operadores con mayor precedencia se evalúan antes que los operadores con menor precedencia.

Por ejemplo, en la expresión 3 + 4 * 5, la multiplicación se realiza antes que la suma debido a que el operador de multiplicación tiene una precedencia mayor que el operador de suma.

Tabla de precedencia de operadores en JavaScript

Aquí tenéis una tabla con los operadores más comunes en JavaScript, ordenados por su precedencia, desde la más alta hasta la más baja:

Es decir, los que estén más arriba en esa tabla, se evalúan antes que los que tiene por debajo.

Asociatividad

La asociatividad define el orden en que se evalúan los operadores con la misma precedencia. Puede ser de izquierda a derecha o de derecha a izquierda.

Por ejemplo, en la expresión 5 - 3 + 2, la operación se realiza de izquierda a derecha porque la resta y la suma tienen la misma precedencia.

La mayoría de los operadores en JavaScript tienen asociatividad izquierda a derecha. Es decir, si se encuentran múltiples operadores del mismo tipo, se evalúan de izquierda a derecha.

const resultado = 5 - 3 + 2;

// se evalua como
const resultado = (5 - 3) + 2; // 4

Pero algunos operadores tienen asociatividad derecha a izquierda (lo que significa que se evalúan de derecha a izquierda). Los dos patitos raros son:

• El operador el operador de asignación (=)
• El operador de exponentes (**).

let a, b, c;
a = b = c = 10;

//Se evalua como 
a = (b = (c = 10))

console.log(a); // y todos son 10 y felices

Ejemplos de precedencia en JavaScript

Operadores aritméticos

Consideremos la expresión:

const resultado = 3 + 4 * 5;

Debido a que el operador * tiene una precedencia mayor que el operador +, la multiplicación se realiza antes que la suma:

const resultado = 3 + (4 * 5); // 3 + 20 = 23

Operadores unarios y binarios

En la expresión:

const valor = -3 ** 2;

El operador ** tiene una precedencia mayor que el operador -, por lo que la expresión se evalúa como:

const valor = -(3 ** 2); // -(9) = -9

Operadores de comparación y lógicos

Consideremos la expresión:

const esValido = 5 < 10 && 10 < 15;

Los operadores && tienen menor precedencia que los operadores de comparación <. La expresión se evalúa como:

const esValido = (5 < 10) && (10 < 15); // true && true = true

Operador ternario

El operador ternario tiene una precedencia menor que los operadores aritméticos, por lo que se evalúa después de las operaciones aritméticas:

const resultado = 10 + 5 > 10 ? 'Mayor' : 'Menor';

Aquí, la expresión 10 + 5 > 10 se evalúa primero, y luego se aplica el operador ternario:

const resultado = (10 + 5 > 10) ? 'Mayor' : 'Menor'; // 'Mayor'