Laprecedencia de operadores determina el orden en el cual los operadores son evaluados uno respecto del otro. Los operadores con mayor precedencia se convierten en los operandos de los operadores con menor precedencia.

Pruébalo

console.log(3 + 4 * 5); // 3 + 20// Expected output: 23console.log(4 * 3 ** 2); // 4 * 9// Expected output: 36let a;let b;console.log((a = b = 5));// Expected output: 5

Precedencia y Asociatividad

Considere la expresión descrita debajo. Note queOP1 yOP2 son ambos ejemplos de operadores.

a OP1 b OP2 c

SiOP1 yOP2 tienen diferente niveles de precedencia (véase la tabla debajo), el operadorcon la precedencia más alta va primero y la asociatividad no importa. Observe como la multiplicacióntiene mayor precedencia que la suma y se ejecuta primero, a pesar de que la suma se escribe primero en el código.

console.log(3 + 10 * 2); // muestra 23console.log(3 + (10 * 2)); // muestra 23 porque los paréntesis son superfluosconsole.log((3 + 10) * 2); // muestra 26 porque los paréntesis cambian el orden

La asociatividad a la izquierda (de izquierda a derecha) significa que es procesado como(a OP1 b) OP2 c, mientras que la asociatividad a la derecha (de derecha a izquierda) significa que es interpretado comoa OP1 (b OP2 c). Los opearadores de asignación son de asociatividad a la derecha, entonces se puede escribir:

a = b = 5; // es igual a escribir a = (b = 5);

con el resultado esperado de quea yb obtienen el valor 5. Estoes porque el operador de asignación retorna el valor que es asignado. Primero,b es establecido en 5. Luegoa también es establecida en 5, el valor de retornodeb = 5, también conocido como el operando de la derecha de la asignación.

Como otro ejemplo, el operador de exponenciación tiene la particularidad de tener asociatividad a la derecha,a diferencia de los restantes operadores aritméticos que poseen asociatividad a la izquierda. Es interesante notar que,el order de evaluación siempre es de izquierda a derecha sin importar la asociatividad y la precedencia.

function echo(nombre, num) {    console.log("Evaluando el lado " + nombre);    return num;}// Nótese el operador división (/)console.log(echo("izquierdo", 6) / echo("derecho", 2));

Evaluando el lado izquierdoEvaluando el lado derecho3

function echo(nombre, num) {    console.log("Evaluando el lado " + nombre);    return num;}// Nótese el operador potencia (**)console.log(echo("izquierdo", 2) ** echo("derecho", 3));

Evaluando el lado izquierdoEvaluando el lado derecho8

La diferencia en asociatividad entra en juego cuando hay múltiples operadores con lamisma precedencia. Con un único operador u operadores con diferente precedencia,la asociatividad no afecta la salida, como puede verse en el ejemplo de arriba. En el ejemplodebajo, observe como la asociatividad afecta la salida cuando múltiples operadores idénticosson usados.

function echo(nombre, num) {    console.log("Evaluando el lado " + nombre);    return num;}// Nótese el operador división (/)console.log(echo("izquierdo", 6) / echo("medio", 2) / echo("derecho", 3));

Evaluando el lado izquierdoEvaluando el lado medioEvaluando el lado derecho1

function echo(nombre, num) {    console.log("Evaluando el lado " + nombre);    return num;}// Nótese el operador potencia (**)console.log(echo("izquierdo", 2) ** echo("medio", 3) ** echo("derecho", 2));

Evaluando el lado izquierdoEvaluando el lado medioEvaluando el lado derecho512

function echo(nombre, num) {    console.log("Evaluando el lado " + nombre);    return num;}// Nótese los paréntesis alrededor de las potencias de la izquierda y el medioconsole.log((echo("izquierdo", 2) ** echo("medio", 3)) ** echo("derecho", 2));

Evaluando el lado izquierdoEvaluando el lado medioEvaluando el lado derecho64

Viendo los fragmentos de códigos de arriba,6 / 2 / 3 es lo mismo que(6 / 2) / 3 porque la división es asociativa a la izquierda. La potencia, por otro lado,es asociativa a la derecha, entonces2 ** 3 ** 2 es lo mismo que2 ** (3 ** 2). Por lo tanto, hacer(2 ** 3) ** 2 cambia el ordeny el resultado en el 64 que se ve en la tabla de arriba.

Recuerde que la precedencia viene antes de la asociatividad. Entonces, mezclandodivisión y potencia, esta última precede a la división. Por ejemplo,2 ** 3 / 3 ** 2 resulta en 0.8888888888888888 porque es lo mismo que hacer(2 ** 3) / (3 ** 2).

Nota sobre agrupamiento y operadores de cortocircuito

En la tabla debajo,Agrupamiento se lista con la mayor precedencia.Sin embargo, esto no siempre significa que la expresión dentro de los símbolosde agrupación( … ) es evaluada primero, especialmente cuando se trata decortocircuitos.

Cortocircuitar es una jerga para la evaluación condicional. Por ejemplo, en la expresióna && (b + c), sia esfalsy, entoncesla expresión(b + c) no será evaluada, incluso si está dentro deparéntesis. Se podría decir que el operador de conjunción lógica ("&&") está"cortocircuitado". Junto con la conjunción lógica, otros operadores cortocircuitadosson la disyunción lógica ("||"), la coalescencia nula ("??"), el encadenamiento opcional ("?."),y el operador condicional ternario. A continuación, algunos ejemplos.

a || (b * c); // evalúa primero `a`, luego produce `a` si `a` es "truthy"a && (b < c); // evalúa primero `a`, luego produce `a` si `a` es "falsy"a ?? (b || c); // evalúa primero `a`, luego produce `a` si `a` no es `null` ni `undefined`a?.b.c; // evalúa primero `a`, luego produce `undefined` si `a` es `null` ó `undefined`

Ejemplos

3 > 2 && 2 > 1;// Retorna `true`3 > 2 > 1;// Retorna `false` porque 3 > 2 es `true`, luego `true` es convertido a 1// por coerción de tipos, luego `true` > 1 se convierte en 1 > 1, que es// `false`. Agregar paréntesis hace que las cosas se vean claras: (3 > 2) > 1.

Tabla

La siguiente tabla lista los operadores en orden de mayor precedencia (19) a menor precedencia (1).

Nótese que lasintaxis spread está intencionalmente excluída de la tabla — porque, citandounarespuesta en Stack Overflow, "la sintaxis spread no es un operador y por lo tanto no tiene una precedencia. Es parte de la sintaxis de arreglos literales y llamadas a funciones (y objetos literales)."