Priorité des opérateurs en JavaScript

L'un des premiers exercices lorsque vous débutez en tant que développeur JavaScript consiste à créer une calculatrice – un exercice très simple mais puissant pour apprendre comment fonctionnent les opérations en JavaScript et comment utiliser les opérateurs correctement façon.

Ce que nous apprenons, c'est que la structure de notre code fera toute la différence, et à quel point il est important de comprendre la priorité des opérateurs – l'ordre dans lequel notre code évalue les opérateurs.

En savoir plus sur la priorité des opérateurs. .

La priorité des opérateurs

La priorité des opérateurs dans JavaScript détermine la priorité des opérateurs dans une opération. Il détermine quels opérateurs ont une priorité plus élevée que les autres, et nous indique ainsi l'ordre d'exécution d'une expression mathématique donnée.

Les opérateurs ayant une priorité plus élevée deviendront les opérandes des opérateurs ayant une priorité inférieure. Cela signifie que l'opérateur ayant la priorité la plus élevée passe en premier dans une opération.

La modification d'un opérateur simple à l'intérieur d'une opération peut modifier le résultat. C'est une erreur d'essayer de créer une opération complexe sans connaître la priorité des opérateurs.

Vous connaissez peut-être la priorité des opérateurs comme « ordre des opérations ». Ce sont les mêmes règles, largement utilisées à la fois en mathématiques et en programmation informatique, réparties dans cet ordre : Parenthèses, Exposants, Multiplication/Division, Addition/Soustraction. Cela nous indique que les parenthèses sont évaluées en premier arrivé en premier et que les additions/soustractions sont effectuées en dernier.

JavaScript a 21 niveaux de priorité des opérateurs. Vous pouvez les consulter ici. Le tableau montre l'opérateur, l'utilisation du symbole, la direction dans laquelle nous devons lire l'opération et la priorité de la plus élevée (21) à la la plus basse (1) priorité.

Imaginez une opération comme la suivante :

(3 + 10) * 2

D'après vous, quel serait le résultat ? Eh bien, si vous avez dit 26vous avez raison. Les parenthèses changent l'ordre de l'opération car cette fonction a une priorité plus élevée.

Imaginez une opération simple où nous voulons soustraire et multiplier :

3 - 5 * 10

L'opérateur de soustraction est affiché en premier, mais la multiplication est évaluée en premier. L'opérateur de multiplication a un niveau de priorité plus élevé sur l'opérateur de soustraction. L'associativité ici n'a pas d'importance – l'opérateur de soustraction sera toujours évalué plus tard.

Lorsqu'il existe des opérateurs de même priorité, l'associativité affecte le processus de l'opération, qu'elle soit traitée de droite à gauche ou de gauche à droite. .

De gauche à droite

L'associativité de gauche (de gauche à droite), le mode de fonctionnement normal, consiste à évaluer l'opération de gauche à droite. Lorsque nous écrivons une instruction simple en JavaScript, nous l'écrivons de gauche à droite.

Imaginez une opération simple, où nous avons trois nombres. Nous allons commencer l'opération avec les deux premiers chiffres, puis passer au dernier.

10 + 20 + 30
// L'associativité de gauche à droite serait :
(10 + 20) + 30
// ensuite:
30 + 30

C'est l'associativité de gauche à droite. Nous l'utilisons dans tous les aspects de notre vie lorsque nous utilisons des nombres. Dans cet exemple, nous obtiendrons toujours le même résultat quoi qu'il arrive car l'addition est associative.

Une opération associative est un calcul qui retournera toujours le même résultat peu importe comment les nombres sont regroupés. La multiplication est également associative, alors que la soustraction et la division ne le sont pas.

Par exemple, les opérations suivantes sont associatives car elles renvoient toujours le même résultat :

10 + (10 + 2)
(10 + 10) + 2

Les opérations suivantes ne sont pas associatives car la façon dont les nombres sont regroupés affecte le résultat :

5 - (4 - 3)
(5 - 4) - 3

De droite à gauche

L'associativité de droite (de droite à gauche) correspond à l'évaluation de l'opération de droite à gauche.

10 + 20 + 30
// L'associativité de droite à gauche serait :
10 + (20 + 30)
// ensuite:
30 + 30

Les opérateurs d'affectation ont toujours une associativité de droite à gauche.

a = b = c = 5

Voici comment fonctionne l'associativité de droite à gauche : a, b et c sont affecté à 5. D'abord, c est mis à 5, puis b, puis a.

La différence d'associativité se produit lorsqu'il y a plusieurs opérateurs de même priorité. Avec de nombreux opérateurs de priorité différente, l'associativité n'affecte pas le résultat final.

Grouping

Grouping est l'opérateur ayant la priorité la plus élevée. Les développeurs JavaScript utilisent en général des parenthèses pour contrôler l'ordre de l'opération. Étant donné que le regroupement a la priorité la plus élevée, ils sont toujours calculés en premier.

2 + 8 + 9 + (10 - 5)

Nous pouvons placer des parenthèses les unes dans les autres, c'est ce qu'on appelle des parenthèses imbriquées. JavaScript évalue toujours l'ensemble interne de parenthèses en premier.

(2 + 2) + ((9 - 5) - 2)

Les regroupements sont presque toujours évalués en premier, mais parfois ce n'est pas vrai . Lorsque nous avons une évaluation conditionnelle, le regroupement peut même ne pas être évalué.

Imaginez l'opération suivante :

a && (b + c)

Si la valeur a est fausse, le L'expression de regroupement (b + c) ne sera jamais évaluée. C'est ce qu'on appelle le court-circuit.

Opérateurs logiques

Le court-circuit est très courant dans JavaScript et se produit généralement à cause des opérateurs logiques.

Court-circuit signifie qu'à l'intérieur d'une opération ORsi le premier opérande est vrai, JavaScript ne regardera jamais le deuxième opérande.

if (20 === nombre || 10 === nombre) renvoie vrai;

Les opérateurs logiques sont généralement utilisé pour les comparaisons booléennes. Ils sont utilisés dans les instructions logiques pour comparer la différence entre les valeurs.

Nous avons quatre opérateurs logiques en JavaScript, chacun de ces opérateurs a également son numéro de priorité :

•  ! — NON
• && — ET
• || — OU
• ?? — Nullish Coalescing

Les opérateurs logiques sont généralement utilisés pour les comparaisons booléennes. Lorsqu'elles sont utilisées dans des comparaisons booléennes, elles renvoient une valeur booléenne. Les opérateurs logiques renvoient la valeur de l'un des opérandes utilisés dans l'opération. Ils sont toujours évalués de gauche à droite et l'opérateur ayant la priorité la plus élevée est l'opérateur logique NON (!) .

L'opérateur logique NON (!) a la priorité la plus élevée de tous les opérateurs logiques. Cet opérateur prend le vrai au faux. Lorsque cet opérateur est utilisé avec une valeur non booléenne, il renvoie false si son opérande unique peut être converti en true ; sinon, il renvoie true.

const bool = true;

if (!bool) { 
  console.log("faux!");
} else {
  console.log("true!");
}



const arr = [[19659067]"opérateur", "précédence"];

if (!arr) {
  console.log("faux!");
} else {
  console.log("vrai!");
}

Le AND logique (&&) renvoie vrai si un ensemble d'opérandes est vrai et renvoie faux sinon. La plupart du temps, cet opérateur est utilisé avec des valeurs booléennes, et chaque fois qu'il l'est, il renvoie toujours une valeur booléenne. Si cet opérateur est utilisé avec des valeurs non booléennes, il renverra une valeur non booléenne.

const bool = true;
const arr = ["opérateur", "précédence"];

if (arr && bool) {
  console.log("vrai !");
} else {
  console.log("faux !");
}



if (arr && bool && 1 > 2) {
  console.log("vrai !");
} else {
  console.log("faux!");
}

Le OU logique (||) renvoie vrai si à l'intérieur d'un ensemble d'opérandes, au moins un ou plusieurs de ses opérandes sont vrais ; sinon il retourne faux. Si cet opérateur est utilisé avec des valeurs non booléennes, il renverra une valeur non booléenne.

const bool = true;
const arr = ["opérateur", "précédence"];

if (arr ||  1 > 2) {
  console.log("vrai !");
} else {
  console.log("faux!");
}



if (1 >[19659136]2 || 2 > 3) {
  console.log("vrai !");
} else {
  console.log("faux!");
}

L'opérateur de fusion nul (??) est l'opérateur le moins utilisé de tous les opérateurs logiques. Cet opérateur renvoie l'opérande de droite lorsque l'opérande de gauche est nul ou indéfini.

const bool = null ?? true ;
console.log(bool);



const bool = 1 ??[19659059]vrai;
console.log(boool);

Conclusion

La priorité des opérateurs en JavaScript est un concept vital. Cela nous aide à créer des opérations d'une meilleure manière. Nous créons des opérations pour prendre des décisions. Sur la base d'une entrée, nous voulons une sortie spécifique à chaque fois. Nous devons viser à créer le code le plus fonctionnel possible.

JavaScript est un bon langage, mais nous devons faire attention à ne pas faire d'erreurs. Surtout lorsque vous travaillez avec des opérations, la priorité de l'opérateur joue un rôle très important. La priorité des opérateurs nous indique quels opérateurs doivent et seront placés en premier dans une opération : les opérateurs avec une priorité plus élevée seront les premiers, suivis par les opérateurs avec une priorité inférieure. En se souvenant du concept de priorité des opérateurs, nous pouvons éviter beaucoup d'erreurs.