JavaScript - Opérateurs de Priorité

Bonjour à tous, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans un sujet qui pourrait sembler un peu intimidant au départ, mais je vous promets, ce n'est pas aussi effrayant que ça en a l'air. Nous allons parler de la priorité des opérateurs en JavaScript. Pensez-y comme la "hiérarchie" des maths dans la programmation. Mettons-nous à ça ensemble !

Qu'est-ce que la Priorité des Opérateurs ?

Avant de sauter dans le grand bain, penchons-nous sur les bases. La priorité des opérateurs est comme l'ordre des opérations que vous avez appris en cours de mathématiques. Souvenez-vous de PEMDAS (Parenthèses, Exposants, Multiplication, Division, Addition, Soustraction) ? Eh bien, JavaScript a sa propre version de cela !

La priorité des opérateurs détermine comment les opérateurs sont analysés les uns par rapport aux autres. Les opérateurs de plus haute priorité deviennent les opérandes des opérateurs de plus basse priorité.

Regardons un exemple simple :

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

Vous pourriez penser que la réponse devrait être 16 (5 + 3 = 8, puis 8 2 = 16), mais elle est en réalité 11. Pourquoi ? Parce que la multiplication a une priorité plus élevée que l'addition. Donc, 3 2 est calculé en premier (donnant 6), puis 5 est ajouté à cela.

Associativité

Maintenant, parlons d'un mot fancy : l'associativité. Ne vous inquiétez pas, c'est plus simple qu'il n'y paraît !

L'associativité détermine l'ordre dans lequel les opérateurs de même priorité sont traités. Elle peut être soit de gauche à droite, soit de droite à gauche.

Associativité de Gauche à Droite

La plupart des opérateurs suivent l'associativité de gauche à droite. Cela signifie qu'ils sont évalués de gauche à droite. Regardons un exemple :

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

Voici comment JavaScript traite cela :

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

Associativité de Droite à Gauche

Certains opérateurs, comme l'opérateur d'affectation (=), ont une associativité de droite à gauche. Voici comment cela fonctionne :

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

JavaScript traite cela de droite à gauche :

1. c = 5
2. b = c (qui est 5)
3. a = b (qui est 5)

Tableau de Priorité des Opérateurs

Maintenant, regardons le "menu" des priorités des opérateurs en JavaScript. Ne vous inquiétez pas si vous ne comprenez pas tous cela encore - nous allons traverser quelques exemples !

Priorité	Type d'Opérateur	Associativité	Opérateurs
19	Groupe	n/a	( ... )
18	Accès Membre	gauche-droite	. []
17	Appel de Fonction	gauche-droite	... ( )
16	Nouveau (avec liste d'arguments)	n/a	new ... ( )
15	Incrément/Diminution Postfixe	n/a	... ++ ... --
14	Logique NON, NON Bitwise, Plus/Minus Unaires, Incrément/Diminution Préfixe, typeof, void, delete, await	droite-gauche	! ~ + - ++ -- typeof void delete await
13	Exponentiation	droite-gauche	**
12	Multiplication, Division, Modulo	gauche-droite	* / %
11	Addition, Soustraction	gauche-droite	+ -
10	Décalage Bitwise	gauche-droite	<< >> >>>
9	Relatif	gauche-droite	< <= > >= in instanceof
8	Égalité	gauche-droite	== != === !==
7	ET Bitwise	gauche-droite	&
6	OU XOR Bitwise	gauche-droite	^
5	OU Bitwise	gauche-droite	|
4	ET Logique	gauche-droite	&&
3	OU Logique	gauche-droite	||
2	Conditionnel	droite-gauche	?:
1	Affectation	droite-gauche	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Virgule	gauche-droite	,

Exemples

Mettons maintenant cette connaissance en pratique avec quelques exemples !

Exemple 1 : Opérations Arithmétiques

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

Voici comment JavaScript évalue cela :

1. 3 * 4 = 12 (la multiplication a une priorité plus élevée)
2. 2 + 12 = 14
3. 14 - 1 = 13

Exemple 2 : Opérations Logiques

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

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

Décomposons cela :

1. x < y est vrai
2. y < z est vrai
3. true && true est true
4. x > z est faux
5. true || false est true

Souvenez-vous, && (ET) a une priorité plus élevée que || (OU).

Exemple 3 : Opérations Mixtes

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

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

Cela semble compliqué, mais analysons-le pas à pas :

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

Exemple 4 : Affectation et Comparaison

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

Souvenez-vous, l'affectation (=) a une associativité de droite à gauche, tandis que les comparaisons d'égalité (==, ===) ont une associativité de gauche à droite.

1. z = 5
2. y = z (qui est 5)
3. x = y (qui est 5)
4. x == y est true
5. true === z est true (parce que z est 5, ce qui est truthy)

Conclusion

Félicitations ! Vous avez fait vos premiers pas pour comprendre la priorité des opérateurs en JavaScript. Souvenez-vous, la pratique rend parfait. N'ayez pas peur d'expérimenter avec différentes combinaisons d'opérateurs - c'est ainsi que vous vraiment internaliserez ces concepts.

Et voici un conseil pro : lorsque vous avez un doute, utilisez des parenthèses ! Elles ont la plus haute priorité et peuvent rendre votre code plus lisible. Par exemple :

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

De cette manière, vous dites explicitement à JavaScript comment vous voulez que l'expression soit évaluée.

Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! JavaScript est un langage puissant, et comprendre ces fondamentaux vous mettra sur la voie de la réussite dans votre parcours de programmation.

Credits: Image by storyset