Formation Apprendre le JavaScript : Le sucre syntaxique

En JavaScript il existe pas mal de syntaxes alternatives qui vont nous permettre d'écrire du code plus simplement. Cette simplification est appelée "sucre syntaxique"

L'incrémentation

Vous pouvez incrémenter rapidement une valeur en utilisant la syntax ++ ou --

i++ // équivalent à i = i + 1
i-- // équivalent à i = i - 1

Vous pouvez mettre le ++ et -- avant le nom de la variable pour changer la valeur de retour (mais cela ne change pas le fonctionnement de l'incrémentation)

let i = 0
++i // retourne 1, là ou i++ retourne 0

Enfin, vous pouvez aussi utiliser des opérations mathématiques lors de l'assignation

i += 4 // Equivalent à i = i + 4
i /= 3 // Equivalent à i = i / 3
i *= 3 // Equivalent à i = i * 3

Les conditions

Tout d'abord le ternaire permet de simplifier une condition avec la syntaxe suivante

<condition> ? <valeur si condition vrai> : <valeur si condition fausse>

Cela permet de simplifier cette condition

let message
if (age >= 18) {
    message = 'Vous pouvez entrer' 
} else {
    message = 'Vous ne pouvez pas entrer'
}

Ce qui donnera avec du ternaire

const message = age >= 18 ? 'Vous pouvez entrer' : 'Vous ne pouvez pas entrer'

On peut aussi dériver l'utilisation des opérateurs booléens pour éviter de faire une condition

const b = a || 3 // Ne vaudra 3 que si la valeur de a est falsy
const c = a && 3 // Ne vaudra 3 que si la valeur de a est truthy

// Ces opérateurs peuvent aussi être utilisé lors de l'assignation
a ||= 3 // Equivalent à a = a || 3
a &&= 3 // Equivalent à a = a && 3

Il existe un opérateur supplémentaire qui permet de tester si la valeur est null ou undefined plutôt que falsy. Cet opérateur est appelé un opérateur de coalescence des nuls (Nullish coalescing operator)

const b = a ?? 3 // Ne vaudra 3 que si la valeur de a est null ou undefined

Enfin, l'opérateur ?. permettra de faire de l'optional chaining et d'accéder à une propriété sur un objet s'il existe, en renvoyant undefined si la valeur est null ou undefined.

Cela permet de simplifier ce genre de syntaxe

// On doit vérifier si les ancêtre existe avant d'accéder à la propriété
if (person && person.job && person.job.salary) {
    console.log(person.job.salary.value)
}

Pour devenir

console.log(person?.job?.salary?.value)

La déstructuration

L'affectation par décomposition (destructuring en anglais) permet de créer des variables à partir des propriétés d'un objet ou des valeurs d'un tableau plus facilement.

const [note1, note2] = [12, 16, 18, 19] // note1 = 12, note2 = 16

const person = {firstname: 'John', lastname: 'Doe'} 
const {firstname, lastname} = person // firstname = 'John', lastname: 'Doe'

Cette destructuration peut être particulièrement utile lorsqu'une fonction attend comme paramètre un objet

function isMajeur ({age, country}) {
    // ...
}

Il est aussi possible d'utiliser le spread operator ... pour extraire tous les éléments restant dans une variable. Dans le cas des tableaux ce spread operateur doit être utilisé pour le dernier élément seulement.

const [note1, note2, ...rest] = [12, 16, 18, 19] // rest = [18, 19]
const [...rest, note4] = [12, 16, 18, 19] // Uncaught SyntaxError: Rest element must be last element

const person = {firstname: 'John', lastname: 'Doe', age: 18} 
const {firstname, ...personWithoutFirstname} = person // personWithoutFirstname = {lastname: 'Doe', age: 18}

Cette syntaxe peut être utilisée pour remplacer certaines méthodes que l'on a vu sur les tableaux

const [firstItem, ..._] = [1, 2, 3, 4, 5, 6]

Décomposition

La décomposition permet d'utiliser un itérable à la place de plusieurs arguments (dans le cas des fonctions) ou de plusieurs éléments (dans le cas des tableaux) ou de paires clés-valeurs (pour les objets)

Dans le cas des fonctions :

function sum (...items) {
    return items.reduce((acc, item) => item + acc, 0)
}

items(1, 2, 3, 4)
const numbers = [1, 2, 6, 8]
sum(...numbers) // 17

Dans le cas des tableaux cet opérateur peut permettre de simplifier plusieurs opérations comme la fusion de tableaux ou la création de nouveaux tableaux

const a = [1, 2]
const b = [3, 4]
const c = [...a, ...b] // [1, 2, 3, 4]
const d = [...a, 3, 4] // [1, 2, 3, 4]
// On peut aussi créer un clone d'un tableau pour éviter de le modifier "en place"
const reversedA = [...a].reverse()

Le fonctionnement dans le cas des objets est similaire

const a = {x: 3, y: 2}
const b = {...a, width: 10, height: 10} // {x: 3, y:2, width: 10, height: 10}