JavaScript - Operator Precedence

Ciao a tutti, aspiranti programmatori! Oggi andremo a immergerci in un argomento che potrebbe sembrare un po' spaventoso all'inizio, ma vi prometto che non è così spaventoso come sembra. Stiamo parlando della precedenza degli operatori in JavaScript. Pensate a esso come la "scala gerarchica" per la matematica nella programmazione. Analizziamo insieme!

Cos'è la Precedenza degli Operatori?

Prima di tuffarci in profondità, iniziamo con le basi. La precedenza degli operatori è simile all'ordine delle operazioni che avete imparato nella lezione di matematica. Ricordate PEMDAS (Parentesi, Esponenti, Moltiplicazione, Divisione, Addizione, Sottrazione)? Beh, JavaScript ha la sua versione di questo!

La precedenza degli operatori determina come gli operatori vengono analizzati rispetto a elkaar. Gli operatori con una maggiore precedenza diventano operandi di operatori con una minore precedenza.

Analizziamo un esempio semplice:

let result = 5 + 3 * 2;
console.log(result); // Output: 11

Potreste pensare che la risposta dovrebbe essere 16 (5 + 3 = 8, poi 8 2 = 16), ma in realtà è 11. Perché? Perché la moltiplicazione ha una maggiore precedenza della somma. Quindi, 3 2 viene calcolato prima (dando 6), e poi 5 viene aggiunto a esso.

Associatività

Ora, parliamo di una parola complicata: associatività. Non preoccupatevi, è più semplice di quanto sembri!

L'associatività determina l'ordine in cui gli operatori della stessa precedenza vengono elaborati. Può essere da sinistra a destra o da destra a sinistra.

Associatività da Sinistra a Destra

La maggior parte degli operatori segue l'associatività da sinistra a destra. Questo significa che vengono valutati da sinistra a destra. Analizziamo un esempio:

let a = 10 - 5 - 2;
console.log(a); // Output: 3

Ecco come JavaScript elabora questo:

1. 10 - 5 = 5
2. 5 - 2 = 3

Associatività da Destra a Sinistra

Alcuni operatori, come l'operatore di assegnazione (=), hanno associatività da destra a sinistra. Vediamo come funziona:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Output: 5 5 5

JavaScript elabora questo da destra a sinistra:

1. c = 5
2. b = c (che è 5)
3. a = b (che è 5)

Tabella della Precedenza degli Operatori

Ora, diamo un'occhiata al "menu" delle precedenze degli operatori in JavaScript. Non preoccupatevi se non capite tutte queste ancora - esamineremo alcuni esempi!

Precedenza	Tipo di Operatore	Associatività	Operatori
19	Gruppo	n/a	( ... )
18	Accesso al Membro	da sinistra a destra	. []
17	Chiamata di Funzione	da sinistra a destra	... ( )
16	Nuovo (con elenco di argomenti)	n/a	new ... ( )
15	Incremento/Decremento Postfix	n/a	... ++ ... --
14	NOT Logico, NOT Bitwise, Plus/Minus Unario, Incremento/Decremento Prefix, typeof, void, delete, await	da destra a sinistra	! ~ + - ++ -- typeof void delete await
13	Esponenziazione	da destra a sinistra	**
12	Moltiplicazione, Divisione, Resto	da sinistra a destra	* / %
11	Addizione, Sottrazione	da sinistra a destra	+ -
10	Shift Bitwise	da sinistra a destra	<< >> >>>
9	Relazionale	da sinistra a destra	< <= > >= in instanceof
8	Uguaglianza	da sinistra a destra	== != === !==
7	AND Bitwise	da sinistra a destra	&
6	XOR Bitwise	da sinistra a destra	^
5	OR Bitwise	da sinistra a destra	|
4	AND Logico	da sinistra a destra	&&
3	OR Logico	da sinistra a destra	||
2	Condizionale	da destra a sinistra	?:
1	Assegnazione	da destra a sinistra	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Comma	da sinistra a destra	,

Esempi

Ora, mettiamo questa conoscenza in pratica con alcuni esempi!

Esempio 1: Operazioni Aritmetiche

let result = 2 + 3 * 4 - 1;
console.log(result); // Output: 13

Ecco come JavaScript valuta questo:

1. 3 * 4 = 12 (la moltiplicazione ha una maggiore precedenza)
2. 2 + 12 = 14
3. 14 - 1 = 13

Esempio 2: Operazioni Logiche

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // Output: true

Analizziamo questo:

1. x < y è vero
2. y < z è vero
3. true && true è vero
4. x > z è falso
5. true || false è vero

Ricorda, && (AND) ha una maggiore precedenza di || (OR).

Esempio 3: Operazioni Miste

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Output: false

Questo sembra complicato, ma analizziamo passo per passo:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 è falso
5. a < b è vero
6. false && true è falso

Esempio 4: Assegnazione e Confronto

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // Output: 5 5 5

let result = x == y === z;
console.log(result); // Output: true

Ricorda, l'assegnazione (=) ha associatività da destra a sinistra, mentre le comparazioni di uguaglianza (==, ===) hanno associatività da sinistra a destra.

1. z = 5
2. y = z (che è 5)
3. x = y (che è 5)
4. x == y è vero
5. true === z è vero (perché z è 5, che è truthy)

Conclusione

Complimenti! Avete appena fatto i primi passi per comprendere la precedenza degli operatori in JavaScript. Ricorda, la pratica fa perfezione. Non abbiate paura di sperimentare con diverse combinazioni di operatori - è così che davvero interiorizzerete questi concetti.

E un consiglio professionale: quando avete dubbi, usate le parentesi! Hanno la massima precedenza e possono rendere il vostro codice più leggibile. Per esempio:

let result = (2 + 3) * 4 - 1;
console.log(result); // Output: 19

In questo modo, state dicendo esplicitamente a JavaScript come volete che l'espressione venga valutata.

Continuate a programmare, continuate a imparare, e, soprattutto, divertitevi! JavaScript è un linguaggio potente, e comprendere questi fondamentali vi preparerà per il successo nel vostro viaggio di programmazione.

Credits: Image by storyset