Expressions et opérateurs

conc

Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.

Une liste complète et détaillée des opérateurs JavaScript est disponible dans la référence JavaScript.

Opérateurs

JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.

• Les opérateurs d'affectation
• Les opérateurs de comparaison
• Les opérateurs arithmétiques
• Les opérateurs binaires
• Les opérateurs logiques
• Les opérateurs de chaînes
• L'opérateur (ternaire) conditionnel
• L'opérateur virgule
• Les opérateurs unaires
• Les opérateurs relationnels

JavaScript utilise des opérateurs binaires et unaires, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :

opérande1 opérateur opérande2

Par exemple : « 3+4 » ou « x*y ».

Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :

opérateur opérande

ou

opérande opérateur

Comme « x++ » ou « ++x ».

Opérateurs d'affectation

Un opérateur d'affectation assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.

D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :

Décomposition

Lors d'affectations plus complexes, on peut utiliser l'affectation par décomposition. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.

var toto = ["un", "deux", "trois"];

// sans décomposition
var un = toto[0];
var deux = toto[1];
var trois = toto[2];

// avec la décomposition
var [un, deux, trois] = toto;

Opérateurs de comparaison

Un opérateur de comparaison compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs === et !== , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :

var var1 = 3;
var var2 = 4;

Opérateurs arithmétiques

Les opérateurs arithmétiques ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat Infinity). Ainsi :

1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // true

En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :

Opérateurs binaires

Les opérateurs binaires voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.

Le tableau qui suit résume les opérateurs binaires JavaScript :

Opérateurs binaires logiques

Les opérateurs binaires logiques fonctionnent de cette façon :

• Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés :

  Avant : 11100110111110100000000000000110000000000001
  Après :             10100000000000000110000000000001

• Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)
• L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.

Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :

Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux).

Opérateurs binaires de décalage

Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.

Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.

Les opérateurs de décalage sont énumérés dans le tableau qui suit.

Opérateurs logiques

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs && et || renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.

Les exemples d'expressions qui peuvent être converties à false sont celles qui sont évaluées à null, 0, NaN, la chaîne de caractères vide (""), ou undefined.

Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&).

var a1 =   true && true;     // t && t renvoie true
var a2 =   true && false;    // t && f renvoie false
var a3 =  false && true;     // f && t renvoie false
var a4 =  false && (3 == 4); // f && f renvoie false
var a5 = "Chat" && "Chien";  // t && t renvoie Chien
var a6 =  false && "Chat";   // f && t renvoie false
var a7 = "Chat" && false;    // t && f renvoie false

Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).

var o1 =   true || true;     // t || t renvoie true
var o2 =  false || true;     // f || t renvoie true
var o3 =   true || false;    // t || f renvoie true
var o4 =  false || (3 == 4); // f || f renvoie false
var o5 = "Chat" || "Chien";  // t || t renvoie Chat
var o6 =  false || "Chat";   // f || t renvoie Chat
var o7 = "Chat" || false;    // t || f renvoie Chat

Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).

var n1 = !true;   // !t renvoie false
var n2 = !false;  // !f renvoie true
var n3 = !"Chat"; // !t renvoie false

Evaluation rapide

Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :

• false && n'importe quoi sera évalué à false.
• true || n'importe quoi sera évalué à true.

Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.

Opérateurs de chaînes de caractères

En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :

console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console

L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :

var maChaîne = "alpha";
maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
                   // et cette valeur sera affectée à maChaîne

Opérateur conditionnel ternaire

L'opérateur conditionnel est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :

condition ? val1 : val2

Si condition vaut true, l'opérateur vaudra val1. Sinon il vaudra val2. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.

On peut par exemple avoir :

var statut = (âge >= 18) ? "adulte" : "mineur";

Cette instruction assigne la valeur "adulte" à la variable status si la variable âge est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".

La virgule comme opérateur

L'opérateur virgule (,) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.

Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :

for (var i = 0, j = 9; i <= j; i++, j--)
  console.log("a[" + i + "][" + j + "]= " + a[i][j]);

Opérateurs unaires

delete

L'opérateur delete supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :

delete monObjet;
delete monObjet.propriété;
delete monObjet[index];
delete propriété; // uniquement valide au sein d'une instruction with

où on a monObjet qui est le nom de l'objet, propriété qui est une propriété existante et index un entier indiquant la position d'un élément dans un tableau.

La quatrième instruction n'est valide qu'au sein d'une instruction with et permet de supprimer une propriété d'un objet.

Il est possible d'utiliser l'opérateur delete pour supprimer les variables déclarées implicitement mais pas celles déclarées avec var. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur undefined. L'opérateur delete renvoie true si l'opération de suppression est possible, false sinon.

x = 42;
var y = 43;
monobj = new Number();
monobj.h = 4;    // création de la propriété h
delete x;        // renvoie true (suppression possible si déclaration implicite)
delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
delete monobj;   // renvoie true (suppression possible si déclaration implicite)

Suppression d'éléments d'un tableau

Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime a[3], a[4] restera a[4] (même position et valeur) alors que a[3] sera undefined.

Lorsque l'opérateur delete supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, arbres[3] est supprimé mais il est toujours accessible et renvoie undefined.

var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
delete arbres[3];
if (3 in arbres) {
  // Ceci ne sera pas exécuté
}

Pour qu'un élément continue à exister mais qu'il vaille undefined, on utilisera le mot-clé undefined plutôt que l'opérateur delete. Dans l'exemple qui suit, arbres[3] est modifié pour valoir undefined et l'élément du tableau continue à exister :

var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
arbres[3] = undefined;
if (3 in arbres) {
  // Ceci sera exécuté
}

typeof

L'opérateur typeof peut être utilisé de deux façons distinctes :

1. typeof opérande

2. typeof (opérande)
   

L'opérateur typeof renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). opérande correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.

Soient les définitions de variables suivantes :

var maFonction = new Function("5 + 2");
var forme = "round";
var taille = 1;
var jour = new Date();

L'opérateur typeof renverra les résultats suivants :

typeof maFonction; // renvoie "function"
typeof forme;      // renvoie "string"
typeof taille;     // renvoie "number"
typeof jour;       // renvoie "object"
typeof inexistant; // renvoie "undefined"

En ce qui concerne les mots-clés true et null, l'opérateur typeof renvoie les résultats suivants :

typeof true; // renvoie "boolean"
typeof null; // renvoie "object"

Pour une chaîne de caractères ou un nombre, typeof renvoie les résultats suivants :

typeof 62;            // renvoie "number"
typeof 'Hello world'; // renvoie "string"

L'opérateur typeof, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :

typeof document.lastModified; // renvoie "string"
typeof window.length;         // renvoie "number"
typeof Math.LN2;              // renvoie "number"

Pour les méthodes et les fonctions, l'opérateur typeof renvoie les résultats suivants :

typeof blur;        // renvoie "function"
typeof eval;        // renvoie "function"
typeof parseInt;    // renvoie "function"
typeof shape.split; // renvoie "function"

Pour les objets pré-définis, l'opérateur typeof fonctionne ainsi :

typeof Date;     // renvoie "function"
typeof Function; // renvoie "function"
typeof Math;     // renvoie "object"
typeof Option;   // renvoie "function"
typeof String;   // renvoie "function"

void

L'opérateur void peut être utilisé de deux façons :

1. void (expression)
   

2. void expression
   

L'opérateur void indique qu'une expression doit être évaluée sans retourner de valeur. expression étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.

L'opérateur void peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.

Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, void(0) est évalué à undefined, n'ayant aucun effet.

<A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A>

Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.

<A HREF="javascript:void(document.form.submit())">
Cliquer ici pour envoyer</A>

Opérateurs relationnels

Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.

in

L'opérateur in renvoie true si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :

nomOuNumeroPropriete in monObjet

avec nomOuNumeroPropriete qui est une chaîne de caractères ou une expression numérique correspondant au nom d'une propriété ou un indice de tableau, monObjet est le nom d'un objet.

Les exemples qui suivent utilisent cet opérateur in.

// Tableaux
var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
0 in arbres;         // renvoie true
3 in arbres;         // renvoie true
6 in arbres;         // renvoie false
"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
                     // sur la valeur)
"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)

// Objets pré-définis
"PI" in Math;         // renvoie true
var myString = new String("coral");
"length" in myString; // renvoie true

// Objets définis par l'utilisateur
var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
"fabricant" in maVoiture; // renvoie true
"modèle" in maVoiture;    // renvoie true

instanceof

L'opérateur instanceof renvoie true si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :

nomObjet instanceof typeObjet

avec nomObjet qui est le nom de l'objet dont on souhaite comparer le type à typeObjet, typeObjet étant un type d'objet tel que Date ou Array.

instanceof peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.

Dans l'exemple qui suit, le code utilise l'opérateur instanceof afin de déterminer si jour est un objet Date. C'est le cas, les instructions contenues dans le bloc après l'instruction if sont donc exécutées.

var jour = new Date(2007, 01, 22);
if (jour instanceof Date) {
  // instructions à exécuter
}

Précédence des opérateurs

La précédence des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.

Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.

Une version plus détaillée de cette table peut être trouvée dans la référence JavaScript.

Expressions

Un expression correspond à une unité de code valide qui est résolue en une valeur.

D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.

L'expression x = 7 affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur = pour affecter la valeur 7 à la variable x. L'expression elle-même est évaluée à 7.

Le code 3 + 4 correspond au second type d'expression. On utilise ici l'opérateur + pour ajouter trois à quatre sans affecter le résultat (7) à une variable.

Les expressions JavaScript peuvent être rangées selon différentes catégories :

• Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)
• Textuelles : l'expression est évaluée en une chaîne de caractères
• Logiques : l'expression est évaluée en true ou false
• Primaires : Les mots-clés basiques et les expressions générales en JavaScript
• Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation

Expressions primaires

Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.

this

Le mot-clé this permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :

this["nomPropriété"]
this.nomPropriété

Soit une fonction qui valide un objet si sa propriété value est comprise entre deux valeurs :

function valide(obj, valMin, valMax){
  if ((obj.value < valMin) || (obj.value > valMax))
    console.log("Valeur incorrecte !");
}

Il est possible d'appeler valide pour chaque gestionnaire d'événement onChange des éléments du formulaire, et d'utiliser le mot-clé this pour passer l'élément même en argument :

<p>Entrez un nombre entre 18 et 99 :</p>
<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);">

Opérateur de groupement

L'opérateur de groupement ( ) permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.

var a = 1;
var b = 2;
var c = 3;

// précédence par défaut
a + b * c;   // 7
// ce qui correspond à :
a + (b * c); // 7

// on peut utiliser l'opérateur
// pour effectuer l'addition en premier
(a + b) * c;   // 9

// ce qui équivaut à :
a * c + b * c; // 9

Les compréhensions

Les compréhensions sont une fonctionnalité expérimentale de JavaScript et feront partie d'une prochaine version d'ECMAScript. Il existe deux formes de compréhensions :

[for (x of y) x]

Les compréhensions de tableaux.

(for (x of y) y)

Les compréhensions de générateurs.

Les compréhensions existent dans de nombreux langages de programmation et permettent de recomposer des tableaux rapidement à partir de tableaux existants. Par exemple :

[for (i of [1, 2, 3]) i*i ];
// [1, 4, 9]

var abc = ["A", "B", "C"]
[for (lettres of abc) lettres.toLowerCase()];
// [ "a", "b", "c"]

Expressions vers la gauche

Les valeurs à gauches de ces expressions sont la cible d'une affectation.

new

L'opérateur new permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :

var nomObjet = new typeObjet([param1, param2, ..., paramN]);

super

Le mot-clé super est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les classes pour appeler le constructeur parent.

super([arguments]); // invoque le constructeur parent
super.functionParent([arguments]);

Opérateur de décomposition

L'opérateur de décomposition permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.

Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes push, splice, concat, soit utiliser la syntaxe de décomposition qui s'avère plus concise :

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);