Les opérateurs

Pour manipuler les valeurs et les variables, le langage utilise des opérateurs. Un opérateur a au moins un opérande (une valeur sur lequel il fait une opération), souvent 2, et rarement 3.

Opérateurs unaires

Un opérateur unaire, comme son nom l'indique, a un seul opérande, exemples :

• typeof,
• !,
• ++,
• --

// Extrait de code "o1"
typeof undefined // "undefined"
typeof true // "boolean"
typeof 'hello' // "string"
typeof 42 // "number"
typeof Symbol('un symbol') // "symbol"
typeof 3493029430349380n // "bigint"
typeof {} // "object"

typeof null // "object" Bug de ES1 qui ne sera jamais corrigé
typeof function () {} // "function" Une fonction est un objet avec un super pouvoir :
// il est invocable avec les parenthèses () : 'callable object' dans la spec,
// mais reste un objet : on peut lui ajouter, modifier, supprimer des propriétés

Valeurs falsy

JavaScript connait aujourd’hui 8 valeurs qui donneront false si elles sont converties en Boolean :

null
undefined
Number.NaN
0
- 0
0n
''
false

Toutes les autres valeurs vaudront true si elles sont converties en Boolean.

Par conséquent :

Boolean({}) // true: Objet vide ne fait pas partie des valeurs falsy
Boolean([]) // true : Array vide ne fait pas partie des valeurs falsy
Boolean(typeof whatever) // vaudra forcément true,
// puisque typeof whatever retourne une chaîne non-vide

+ Opérateur d’Addition ou de Concaténation

+ Peut être un opérateur de concaténation ou d'addition selon les opérandes : si l'un d'entre eux est une string (chaîne de caractères) ou est un objet qui sera converti en string lors de sa transformation en primitive, alors ce sera une concaténation, sinon, ce sera une addition.

La concaténation (du latin catena qui veut dire chaîne) est l'action de mettre bout à bout deux éléments (maillons) de chaînes de caractères pour en former une plus grande :

Exemple de concaténation :

const concat = 'Hello ' + 'World!'
console.log(concat) // "Hello World!"

Opérateurs de Comparaison

• > et < pour supérieur à et inférieur à ;
• >= et <= pour supérieur ou égal à et inférieur ou égal à;
• == (égalité) et === (égalité stricte)

Exemple :

const now = new Date() // Création d'un objet date avec la date (et l'heure) courante
// et stockage dans la variable now
const time = now.getHours() // Récupération de l'heure de la date courante
// et stockage dans la variable time
const isMorning = now.getTime() < 12 // Est-ce qu'il est moins de 12 heures ?
// Si oui, isMorning aura la valeur true
// Si non, isMorning aura la valeur false

Note : Il existe une et une seule valeur en JS qui n'est pas égale à elle-même : NaN

Number.NaN == Number.NaN // false

NaN veut dire Not a Number mais est de type... number. C'est la valeur que donne JavaScript à une expression dont il ne peut pas calculé le résultat sous forme numérique :

Exemple :

const str = 'Une chaîne de caractère'
const num = 7

const impossible = str / num

console.log(impossible) // NaN

Opérateurs logiques

Il existe 4 opérateurs logiques en JavaScript : || (OR c’est-à-dire « ou »), && (AND - « et »), ! (NOT) et depuis ES2020 ?? (Nullish coalescing operator ou « Opérateur de coalescence des nuls »)

N.B. : Attention, l’utilisation de ||, && et ?? ne renvoie pas forcément un booléen !!!

L’opérateur !

L'opérateur logique NON (NOT) ! est un opérateur unaire qui renvoie l'opposé logique de la valeur fournie par son opérande. true devient false et vice versa. S’il est utilisé avec une valeur non-booléenne, il renvoie false si l’opérande est évalué à une valeur falsy, true sinon.

Les autres opérateurs logiques

Les autres opérateurs sont des opérateurs binaires.

L’opérateur ||

L’opérateur || renverra la valeur de l’opérande de gauche s’il est truthy, la valeur de l’opérande de droite sinon.

const nan = Number.NaN
const zero = 0
const wun = 1

const nanOrZero = nan || zero
nanOrZero // 0

const zeroOrNan = zero || nan
zeroOrNan // NaN

const wunOrZero = wun || zero
wunOrZero // 1

const zeroOrWun = zero || wun
zeroOrWun // 1

On peut chaîner les opérateurs ||, et dans ce cas, sera renvoyée la première valeur truthy (en partant de la gauche) ou bien la dernière valeur :

const nan = Number.NaN
const zero = 0
const falseBool = false
const wun = 1

const result = nan || wun || zero || falseBool
result // 1

const result2 = wun || nan || zero || falseBool
result2 // 1

const result3 = falseBool || nan || zero
result3 // 0

L’opérateur &&

L’opérateur && renverra l’opérande de gauche s’il est falsy, l’opérande de droite sinon.

const nan = Number.NaN
const zero = 0
const wun = 1

const nanOrZero = nan && zero
nanOrZero // NaN

const zeroOrNan = zero && nan
zeroOrNan // 0

const wunOrZero = wun && zero
wunOrZero // 0

const zeroOrWun = zero && wun
zeroOrWun // 0

On peut chaîner les opérateurs &&, et dans ce cas, sera renvoyée la première valeur falsy (en partant de la gauche) ou bien la dernière valeur :

const nan = Number.NaN
const zero = 0
const trueBool = true
const wun = 1
const obj = { hodor: 'Hodor' }

const result = nan && wun && zero && trueBool
result // NaN

const result2 = wun && nan && zero && trueBool
result2 // NaN

const result3 = wun && trueBool && obj
result3 // { hodor: 'Hodor' } (obj)

const result4 = trueBool && wun && nan
result4 // NaN

Le nouvel opérateur de coalescence des nuls ??

L’opérateur ?? renverra l’opérande de gauche s’il n’est pas nullish, l’opérande de droite sinon :

const myNull = null
const myUnd = undefined
const zero = 0
const falseBool = false

const value = myNull ?? 'default value 1'
const value2 = myUnd ?? 'default value 2'
const zeroOrWhat = zero ?? 'default value 3'
const falseOrWhat = falseBool ?? 'default value 4'

value // 'default value 1'
value2 // 'default value 2'
zeroOrWhat // 0
falseOrWhat // false

N.B. : Cet opérateur n’est pas combinable sans parenthèse avec les deux précédents :

let myNull = null
let wun = 1

const value = (myNull ?? wun) || 'default value 1'  // 1
const value2 = myNull ?? (wun && 'default value 2') // 'default value 2'
const value3 = myNull ?? wun && 'default value 3'   // Error: Nullish coalescing operator(??) requires parens when mixing with logical operators.

L'opérateur conditionnel

L'opérateur conditionnel est le seul opérateur ternaire en JavaScript est un "raccourci" pour une instruction if : il a trois opérandes : la condition, la valeur ou expression si la condition est remplie, et la valeur ou expression si la condition n'est pas remplie.

// Extrait de code o4
const numberSignAsString = anyNumber < 0 // condition
  ? 'négatif' // valeur si la condition est remplie
  : 'positif' // valeur si la condition n'est pas remplie

Il peut s'écrire sur une seule ligne :

// Extrait de code o4
const numberSignAsString = anyNumber < 0 ? 'négatif' : 'positif'

Et il est équivalent à :

// Extrait de code o5
let numberSignAsString
if (anyNumber < 0) { // condition
  numberSignAsString = 'négatif' // si la condition est remplie
}
else {
  numberSignAsString = 'positif' // si la condition n'est pas remplie
}