Precedencia de Operadores y Asociatividad en JavaScript

Cuando escribimos código en JavaScript, encontramos expresiones que contienen varios operadores. En estos casos, surge una pregunta importante: ¿En qué orden se evalúan los operadores? Para responder, entran en juego dos conceptos clave: la precedencia de operadores y la asociatividad.

Este tema surgió mientras profundizaba en mis estudios sobre JavaScript. Aunque ya conocía el lenguaje, no había explorado a fondo cómo funcionan la precedencia y la asociatividad de los operadores, y descubrí lo esenciales que son para escribir código claro y efectivo. Antes de ello, solo conocía las reglas matemáticas básicas, como que la multiplicación se realiza antes que la suma o que el uso de paréntesis otorga prioridad a las operaciones.

En este artículo, exploraremos qué significan estos conceptos, cómo funcionan en JavaScript y cómo puedes utilizarlos para escribir código más claro y eficiente.

¿Qué es la Precedencia de Operadores?

La precedencia de operadores determina el orden en el que JavaScript evalúa los operadores en una expresión. Los operadores con mayor precedencia se ejecutan antes que los de menor precedencia. Esto es similar a las reglas matemáticas que dictan que las multiplicaciones y divisiones se realizan antes que las sumas y restas.

Por ejemplo:

console.log(5 + 3 * 2); // Resultado: 11

En este caso:

• Primero se evalúa 3 * 2 (porque la multiplicación tiene mayor precedencia).
• Luego se suma el resultado con 5.

Para determinar la precedencia de cada operador, existe una tabla que se que se puede consultar en el siguiente link: tabla oficial de precedencia de operadores en MDN.

¿Cómo leer la tabla de precedencia?

Para responder esta pregunta, usaremos el extracto de una imagen de la tabla del link anterior, organizados por niveles de precedencia (del más alto al más bajo), siendo que cada operador tiene un nivel de prioridad asignado mediante puntos: a mayor número de puntos, mayor prioridad.

En el ejemplo de 5 + 3 * 2usando las reglas de la precedencia, podemos concluir lo siguiente:

• El operador * (multiplicación) tiene 12 puntos.
• El operador + (suma) tiene 11 puntos.

Por lo tanto, la multiplicación se evalúa primero, y luego se realiza la suma. Esto refleja las mismas reglas básicas de las matemáticas que todos conocemos.

Si bien es bueno conocer todas estas reglas, es verdad también que es difícil poder llegar a saberlas todas, por lo que, al igual como en el colegio, podemos usar los paréntesis en caso que queramos que ciertas operaciones tengan prioridad por sobre otras, pues estos tienen la máxima puntuación.

Así por ejemplo, si queremos que la suma se realice primero que la multiplicación, podemos hacer lo siguiente:

console.log((5 + 3) * 2); // Resultado: 16

¿Qué es la Asociatividad?

Cuando dos operadores tienen la misma precedencia, la asociatividad determina el orden de evaluación. Por ejemplo si queremos realizar la siguiente operación: 5 - 3 + 2la resta y suma tienen la misma precedencia, que en la tabla** **es 11. ¿Qué se debe ejecutar primero? ¿5 - 3 o 3 + 2? Pues lo que manda en este caso son las reglas de la asociatividad. Existen 2 tipos:

• Izquierda a derecha: Los operadores se evalúan desde el primero hasta el último (ejemplo, suma y resta).

console.log(10 - 5 - 2); // Resultado: 3
// (10 - 5) se evalúa primero, luego se resta 2.

• Derecha a izquierda: Los operadores se evalúan desde el último hasta el primero (ejemplo, asignación o exponenciación).

let x = y = z = 10;
console.log(x, y, z); // Resultado: 10, 10, 10
// Se evalúa como x = (y = (z = 10)).

Para saber qué tipo de asociatividad aplica a cada operador, en la misma tabla se puede ver:

Conclusión

Entender la precedencia de operadores y la asociatividad en JavaScript permite escribir código más preciso y predecible. Aunque estos conceptos pueden parecer complicados al principio, con práctica y atención a los detalles, se vuelven herramientas esenciales para dominar el lenguaje.