Ejemplo de precedencia de operador de Javascript

Precedencia del operador determina cómo se analizan los operadores entre sí. Los operadores con mayor precedencia se convierten en operandos de los operadores con menor precedencia.

Precedencia y asociatividad

Considere una expresión que se pueda describir mediante la siguiente representación. Tenga en cuenta que tanto OP₁ y OP₂ son espacios en blanco para los operadores operativos.

a OP1 b OP2 c

Si OP1 y OP2 tienen diferentes niveles de precedencia (consulte la tabla siguiente), el operador con mayor precedencia va primero y la asociatividad no importa. Observe cómo la multiplicación tiene mayor precedencia que la suma y se ejecuta primero, aunque la suma se escribe primero en el código.

console.log(3+10*2);// logs 23
console.log(3+(10*2));// logs 23 because parentheses here are superfluous
console.log((3+10)*2);// logs 26 because the parentheses change the order

Asociatividad izquierda (de izquierda a derecha) significa que se procesa como (a OP1 b) OP2 c, mientras que la asociatividad derecha (de derecha a izquierda) significa que se interpreta como a OP1 (b OP2 c). Los operadores de asignación son asociativos a la derecha, por lo que puede escribir:

a = b =5;// same as writing a = (b = 5);

con el resultado esperado que a y b obtenga el valor 5. Esto se debe a que el operador de asignación devuelve el valor asignado. Primero, b se establece en 5. Entonces el a también se establece en 5, el valor de retorno de b = 5, también conocido como operando derecho de la asignación.

Como otro ejemplo, el operador de exponenciación único tiene asociatividad por la derecha, mientras que otros operadores aritméticos tienen asociatividad por la izquierda. Es interesante notar que el orden de evaluación es siempre de izquierda a derecha independientemente de la asociatividad y la precedencia.

functionecho(name, num)
    console.log("Evaluating the "+ name +" side");return num;// Notice the division operator (/)
console.log(echo("left",6)/echo("right",2));

Evaluating the left side
Evaluating the right side
3

functionecho(name, num)
    console.log("Evaluating the "+ name +" side");return num;// Notice the exponentiation operator (**)
console.log(echo("left",2)**echo("right",3));

Evaluating the left side
Evaluating the right side
8

La diferencia de asociatividad entra en juego cuando hay varios operadores de la misma precedencia. Con solo un operador u operadores de diferentes precedencias, la asociatividad no afecta la salida, como se ve en el ejemplo anterior. En el siguiente ejemplo, observe cómo la asociatividad afecta la salida cuando se utilizan varios del mismo operador.

functionecho(name, num)
    console.log("Evaluating the "+ name +" side");return num;// Notice the division operator (/)
console.log(echo("left",6)/echo("middle",2)/echo("right",3));

Evaluating the left side
Evaluating the middle side
Evaluating the right side
1

functionecho(name, num)
    console.log("Evaluating the "+ name +" side");return num;// Notice the exponentiation operator (**)
console.log(echo("left",2)**echo("middle",3)**echo("right",2));

Evaluating the left side
Evaluating the middle side
Evaluating the right side
512

functionecho(name, num)
    console.log("Evaluating the "+ name +" side");return num;// Notice the parentheses around the left and middle exponentiation
console.log((echo("left",2)**echo("middle",3))**echo("right",2));

Evaluating the left side
Evaluating the middle side
Evaluating the right side
64

Mirando los fragmentos de código anteriores, 6 / 3 / 2 es lo mismo que (6 / 3) / 2 porque la división es asociativa por la izquierda. La exponenciación, por otro lado, es asociativa a la derecha, por lo que 2 ** 3 ** 2 es lo mismo que 2 ** (3 ** 2). Por lo tanto, haciendo (2 ** 3) ** 2 cambia el orden y da como resultado los 64 que se ven en la tabla anterior.

Recuerde que la precedencia precede a la asociatividad. Entonces, mezclando división y exponenciación, la exponenciación viene antes de la división. Por ejemplo, 2 ** 3 / 3 ** 2 da como resultado 0.8888888888888888 porque es lo mismo que (2 ** 3) / (3 ** 2).

Nota sobre agrupación y cortocircuito

En la siguiente tabla, Agrupamiento aparece como el que tiene la prioridad más alta. Sin embargo, eso no siempre significa la expresión dentro de los símbolos de agrupación ( … ) se evalúa primero, especialmente cuando se trata de cortocircuitos.

El cortocircuito es una jerga para la evaluación condicional. Por ejemplo, en la expresión a && (b + c), si a es falsedad, luego la subexpresión (b + c) ni siquiera será evaluado, incluso si está entre paréntesis. Podríamos decir que el operador de disyunción lógica (“O”) está “cortocircuitado”. Junto con la disyunción lógica, otros operadores en cortocircuito incluyen la conjunción lógica (“Y”), la unión nula, el encadenamiento opcional y el operador condicional. A continuación se muestran algunos ejemplos más.

a ||(b * c);// evaluate `a` first, then produce `a` if `a` is "truthy"
a &&(b < c);// evaluate `a` first, then produce `a` if `a` is "falsy"
a ??(b || c);// evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined`
a?.b.c;// evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined`

Ejemplos de

3>2&&2>1// returns true3>2>1// Returns false because 3 > 2 is true, then true is converted to 1// in inequality operators, therefore true > 1 becomes 1 > 1, which//  is false. Adding parentheses makes things clear: (3 > 2) > 1.

Mesa

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

Tenga en cuenta que la sintaxis de propagación no se incluye intencionalmente en la tabla, porque, para citar un una respuesta en Stack Overflow, “La sintaxis de propagación no es un operador y por tanto no tiene precedencia. Es parte del array sintaxis literal y de llamada a función (y literal de objeto) “.