Opérateurs

Introduction aux opérateurs

Les opérateurs sont des éléments essentiels en programmation JavaScript. Ils permettent d'effectuer différentes opérations, telles que des calculs mathématiques, des manipulations de chaînes de caractères et des comparaisons booléennes. Dans ce chapitre, nous explorerons les différents types d'opérateurs disponibles en JavaScript et apprendrons à les utiliser de manière efficace.

Opérateurs mathématiques

Les opérateurs mathématiques sont utilisés pour effectuer des calculs numériques en JavaScript. Voici une liste des principaux opérateurs mathématiques :

• + : addition
• - : soustraction
• * : multiplication
• / : division
• % : modulo (reste de la division)
• ** : exponentiation (élévation à la puissance)

Voici un exemple d'utilisation des opérateurs mathématiques :

const x = 5;
const y = 3;

const addition = x + y; // 8
const multiplication = x * y; // 15
const division = x / y; // 1.6666666666666667

Opérateurs de chaînes de caractères

Les opérateurs de chaînes de caractères permettent de concaténer des chaînes de caractères en JavaScript. Voici l'opérateur utilisé pour la concaténation :

• + : concaténation

Voici un exemple d'utilisation de l'opérateur de concaténation :

const message1 = "Bonjour";
const message2 = "le monde";

const messageConcatene = message1 + " " + message2; // "Bonjour le monde"

Opérateurs booléens

Les opérateurs booléens sont utilisés pour effectuer des comparaisons et des opérations logiques en JavaScript. Voici une liste des principaux opérateurs booléens :

• == : égal à
• != : différent de
• === : strictement égal à
• !== : strictement différent de
• > : supérieur à
• < : inférieur à
• >= : supérieur ou égal à
• <= : inférieur ou égal à
• ! : négation
• && : ET logique
• || : OU logique

Voici un exemple d'utilisation des opérateurs booléens :

const x = 5;
const y = 3;

const estEgal = x == y; // false
const estDifferent = x != y; // true
const estSuperieur = x > y; // true
const estInferieurOuEgal = x <= y; // false

Priorité des opérateurs

En JavaScript, les opérations impliquant plusieurs opérateurs peuvent nécessiter une certaine priorité pour être évaluées correctement. Voici la priorité des opérateurs en JavaScript, du plus élevé au moins élevé :

1. Parenthèses ()
2. Exponentiation **
3. Multiplication *, Division /, Modulo %
4. Addition +, Soustraction -
5. Concaténation de chaînes de caractères +
6. Comparaisons (<, >, <=, >=)
7. Égalité (==, !=, ===, !==)
8. Opérateurs logiques (&&, ||)

Il est possible de modifier la priorité des opérations en utilisant des parenthèses. Les opérations à l'intérieur des parenthèses sont évaluées en premier.

Voici un exemple pour illustrer l'importance de la priorité des opérateurs :

const resultat = 2 + 3 * 4; // 14
const resultatModifie = (2 + 3) * 4; // 20

Dans le premier exemple, l'opération de multiplication est évaluée avant l'addition, donc le résultat est 2 + (3 * 4) = 14. Dans le deuxième exemple, les parenthèses modifient la priorité, donc l'addition est évaluée en premier, puis le résultat est multiplié par 4, donnant ainsi (2 + 3) * 4 = 20.

Utilisation avancée des opérateurs

En plus des opérateurs mathématiques, de chaînes de caractères et booléens, JavaScript propose d'autres opérateurs qui peuvent être utilisés de manière avancée dans vos programmes. Voici quelques exemples d'opérateurs avancés :

• Opérateur d'assignation : =, +=, -=, *=, /=, %=, **=
• Opérateur ternaire : condition ? valeurSiVrai : valeurSiFaux
• Opérateur de suppression : delete
• Opérateur typeof : typeof variable
• Opérateur void : void expression
• Opérateur in : propriete in objet
• Opérateur instanceof : objet instanceof typeObjet

Dans les sections suivantes, nous explorerons en détail chaque opérateur avancé et apprendrons à les utiliser de manière appropriée.

Bonnes pratiques et recommandations

Lors de l'utilisation des opérateurs en JavaScript, il est important de suivre certaines bonnes pratiques pour garantir un code clair, lisible et sans ambiguïté. Voici quelques recommandations à prendre en compte :

1. Utilisez des parenthèses pour clarifier l'ordre d'évaluation des opérations.
2. Utilisez des espaces autour des opérateurs pour améliorer la lisibilité du code.
3. Utilisez des noms de variables significatifs pour rendre le code plus compréhensible.
4. Évitez les opérateurs de comparaison non stricts (==, !=) lorsque la comparaison du type de données est importante.
5. Commentez votre code pour expliquer l'utilisation des opérateurs dans des sections complexes.

Ces bonnes pratiques vous aideront à écrire un code plus compréhensible et maintenable.

Opérateurs d'assignation

Les opérateurs d'assignation sont utilisés pour attribuer des valeurs à des variables en JavaScript. Voici les principaux opérateurs d'assignation :

• = : assigne une valeur à une variable.
• += : ajoute une valeur à une variable et affecte le résultat à la variable.
• -= : soustrait une valeur à une variable et affecte le résultat à la variable.
• *= : multiplie une variable par une valeur et affecte le résultat à la variable.
• /= : divise une variable par une valeur et affecte le résultat à la variable.
• %= : calcule le reste de la division d'une variable par une valeur et affecte le résultat à la variable.
• **= : élève une variable à la puissance d'une valeur et affecte le résultat à la variable.

Voici des exemples d'utilisation des opérateurs d'assignation :

let x = 5;
x += 3; // équivaut à x = x + 3, donc x vaut maintenant 8

let y = 10;
y -= 2; // équivaut à y = y - 2, donc y vaut maintenant 8

let z = 4;
z *= 2; // équivaut à z = z * 2, donc z vaut maintenant 8

let a = 10;
a /= 2; // équivaut à a = a / 2, donc a vaut maintenant 5

let b = 7;
b %= 3; // équivaut à b = b % 3, donc b vaut maintenant 1

let c = 2;
c **= 3; // équivaut à c = c ** 3, donc c vaut maintenant 8

Les opérateurs d'assignation permettent de raccourcir l'écriture lors de la mise à jour des valeurs des variables.

Opérateur ternaire

L'opérateur ternaire est un opérateur conditionnel qui permet d'effectuer une évaluation conditionnelle en une seule ligne. Voici sa syntaxe :

condition ? valeurSiVrai : valeurSiFaux;

Si la condition est vraie, alors la valeurSiVrai est renvoyée. Sinon, la valeurSiFaux est renvoyée.

Voici un exemple d'utilisation de l'opérateur ternaire :

const age = 18;
const estMajeur = (age >= 18) ? "Majeur" : "Mineur";
console.log(estMajeur); // Affiche "Majeur"

Dans cet exemple, si l'âge est supérieur ou égal à 18, la valeur "Majeur" est attribuée à la variable estMajeur. Sinon, la valeur "Mineur" est attribuée.

L'opérateur ternaire est utile pour effectuer des évaluations conditionnelles concises et lisibles.

Opérateur de suppression

L'opérateur de suppression (delete) est utilisé pour supprimer une propriété d'un objet ou un élément d'un tableau en JavaScript. Voici sa syntaxe :

delete objet.propriete;
delete tableau[indice];

Voici un exemple d'utilisation de l'opérateur de suppression :

const personne = {
  nom: "John",
  age: 30,
};

delete personne.age; // Supprime la propriété "age" de l'objet personne
console.log(personne); // Affiche { nom: "John" }

const nombres = [1, 2, 3, 4, 5];
delete nombres[2]; // Supprime l'élément d'indice 2 du tableau nombres
console.log(nombres); // Affiche [1, 2, <1 empty item>, 4, 5]

L'opérateur de suppression est utilisé pour modifier la structure d'un objet ou d'un tableau en supprimant des propriétés ou des éléments spécifiques.

Opérateur typeof

L'opérateur typeof est utilisé pour obtenir le type de données d'une variable en JavaScript. Voici sa syntaxe :

typeof variable;

L'opérateur typeof renvoie une chaîne de caractères indiquant le type de données de la variable.

Voici un exemple d'utilisation de l'opérateur typeof :

const x = 5;
console.log(typeof x); // Affiche "number"

const message = "Bonjour";
console.log(typeof message); // Affiche "string"

const estActif = true;
console.log(typeof estActif); // Affiche "boolean"

L'opérateur typeof est utile pour effectuer des vérifications sur le type de données d'une variable avant d'effectuer certaines opérations.

Opérateur void

L'opérateur void est utilisé pour évaluer une expression et renvoyer undefined. Voici sa syntaxe :

void expression;

L'opérateur void est souvent utilisé pour ignorer la valeur de retour d'une fonction ou pour créer une expression sans valeur.

Voici un exemple d'utilisation de l'opérateur void :

function afficherMessage() {
  console.log("Bonjour !");
}

void afficherMessage(); // Affiche "Bonjour !" et renvoie undefined

Dans cet exemple, l'opérateur void est utilisé pour évaluer la fonction afficherMessage() sans tenir compte de sa valeur de retour.

Opérateur in

L'opérateur in est utilisé pour vérifier si une propriété spécifiée existe dans un objet. Voici sa syntaxe :

propriete in objet;

L'opérateur in renvoie true si la propriété est présente dans l'objet, sinon il renvoie false.

Voici un exemple d'utilisation de l'opérateur in :

const personne = {
  nom: "John",
  age: 30,
};

console.log("nom" in personne); // Affiche true
console.log("pays" in personne); // Affiche false

Dans cet exemple, l'opérateur in est utilisé pour vérifier si les propriétés "nom" et "pays" existent dans l'objet personne.

Opérateur instanceof

L'opérateur instanceof est utilisé pour vérifier si un objet est une instance d'une classe ou d'un constructeur spécifié. Voici sa syntaxe :

objet instanceof classe;

L'opérateur instanceof renvoie true si l'objet est une instance de la classe spécifiée, sinon il renvoie false.

Voici un exemple d'utilisation de l'opérateur instanceof :

class Personne {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }
}

const john = new Personne("John", 30);
console.log(john instanceof Personne); // Affiche true
console.log(john instanceof Object); // Affiche true
console.log(john instanceof Array); // Affiche false

Dans cet exemple, l'opérateur instanceof est utilisé pour vérifier si l'objet john est une instance de la classe Personne, de la classe Object (toutes les instances en JavaScript sont des instances de Object) et de la classe Array.

Opérateurs logiques

Les opérateurs logiques sont utilisés pour effectuer des opérations logiques sur des valeurs booléennes en JavaScript. Voici les principaux opérateurs logiques :

• && : opérateur logique ET. Renvoie true si les deux opérandes sont true, sinon renvoie false.
• || : opérateur logique OU. Renvoie true si au moins l'un des opérandes est true, sinon renvoie false.
• ! : opérateur logique NON. Inverse la valeur booléenne de l'opérande.

Voici des exemples d'utilisation des opérateurs logiques :

const x = 5;
const y = 3;
const z = 7;

const resultatEt = (x < y) && (y < z); // false
const resultatOu = (x < y) || (y < z); // true
const resultatNon = !(x < y); // true

Dans cet exemple, l'opérateur logique ET (&&) vérifie si à la fois x est inférieur à y et y est inférieur à z, ce qui est faux. L'opérateur logique OU (||) vérifie si au moins l'un des opérandes est vrai, ce qui est vrai dans ce cas. L'opérateur logique NON (!) inverse la valeur booléenne de l'opérande, donc x < y est faux, mais !(x < y) est vrai.

Les opérateurs logiques sont couramment utilisés dans les expressions conditionnelles et les décisions logiques.

Récapitulatif des opérateurs

Voici un récapitulatif des opérateurs que nous avons étudiés dans ce chapitre :

• Opérateurs mathématiques : +, -, *, /, %, **
• Opérateurs de chaînes de caractères : +
• Opérateurs booléens : ==, !=, ===, !==, >, <, >=, <=, !, &&, ||
• Opérateurs d'assignation : =, +=, -=, *=, /=, %=, **=
• Opérateur ternaire : condition ? valeurSiVrai : valeurSiFaux
• Opérateur de suppression : delete
• Opérateur typeof : typeof variable
• Opérateur void : void expression
• Opérateur in : propriete in objet
• Opérateur instanceof : objet instanceof classe

Il est important de comprendre comment utiliser ces opérateurs de manière appropriée pour effectuer des opérations et des évaluations logiques dans vos programmes JavaScript.

Conclusion

Félicitations ! Vous avez maintenant une compréhension solide des opérateurs en JavaScript. Les opérateurs sont des éléments essentiels de la programmation et vous permettent d'effectuer une variété d'opérations, des calculs mathématiques aux manipulations de chaînes de caractères et aux évaluations logiques.

Dans ce chapitre, nous avons exploré les différents types d'opérateurs, y compris les opérateurs mathématiques, les opérateurs de chaînes de caractères, les opérateurs booléens et les opérateurs avancés tels que les opérateurs d'assignation, l'opérateur ternaire, l'opérateur de suppression, l'opérateur typeof, l'opérateur void, l'opérateur in et l'opérateur instanceof.

Exercices de lecture

Donnez la valeur des différentes variables à la fin de l’exécution du code.

Exemple :

const a = 15;
const b = 8;
const c = 3;
const d = a - b;
const resultat = d * c;

Solution :

1. Déclaration des variables :

   • a est initialisé à 15.
   • b est initialisé à 8.
   • c est initialisé à 3.

2. Soustraction de b à a :

   • d est égal à la soustraction de b à a, soit 15 - 8, ce qui donne 7.

3. Multiplication de d par c :

   • Le résultat de la multiplication de d par c est 7 * 3, soit 21.

4. Affichage du résultat :

   • Le résultat final est affiché dans la console, et il est égal à 21.

Dans cet exercice, les opérations mathématiques sont effectuées successivement pour obtenir le résultat final. Les variables a, b, c, d et resultat sont utilisées pour stocker les valeurs intermédiaires.

L'exercice permet de pratiquer la lecture et la compréhension du code JavaScript.

Exercice 1 :

const x = 5;
const y = 10;
const z = x + y;
const resultat = z * 2 - y;

Exercice 2 :

const a = 3;
const b = 7;
const c = 2;
const d = (a + b) * c;
const resultat = d % a;

Exercice 3 :

const nom = "John";
const age = 25;
const estMajeur = age >= 18;
const message = "Bonjour, je m'appelle " + nom + " et j'ai " + age + " ans.";

Exercice 4 :

const x = 10;
const y = 5;
const estSuperieur = x > y;
const estInferieur = x < y;
const estEgal = x === y;

Exercice 5 :

const prenom = "Alice";
const nom = "Smith";
const nomComplet = prenom + " " + nom;
const longueur = nomComplet.length;

Sources

• MDN - Expressions and operators
• MDN - Comparison operators
• MDN - Logical operators
• W3Schools - JavaScript Comparison and Logical Operators
• W3Schools - JavaScript Bitwise Operators