Inverser deux valeurs avec la déstructuration
Par Christophe Porteneuve • Publié le 10 mai 2020 • 3 min

This page is also available in English.

Voici le septième article de notre série quotidienne « 19 pépites de JS pur ». Tu utilises encore une variable temporaire pour en inverser deux autres ? Tu T’y Prends Mal™ !

Dans la série…

Extrait de la liste des articles :

  1. Strings et Unicode
  2. Court-circuiter plusieurs niveaux de boucles
  3. Inverser deux valeurs avec la déstructuration (cet article)
  4. Retirer facilement les « valeurs vides » d’un tableau
  5. Vive les séparateurs numériques !
  6. …au-delà, c’est la surprise ! (mais la liste est déjà calée)…

À l’ancienne

De nombreux algorithmes nécessitent l’inversion de variables. On en retrouve dans les calculs de hash, dans les tris, dans les séquences mathématiques… Bref, on a ce besoin depuis que la programmation existe (et ça fait quand même, rien que sous sa forme moderne, environ 70 ans). Mais les premiers langages de programmation répandus n’ont pas de mécanisme dédié pour ça, on va donc devoir passer par une variable temporaire.

Disons qu’on veut inverser les valeurs de A et B. La danse à trois pas sera toujours la même, et vu qu’on ne parle que d’affectations, la syntaxe sera quasiment identique dans tous les langages répandus :

  1. On « sauvegarde » la valeur initiale de A dans, disons, TMP.
  2. On copie la valeur de B dans A.
  3. On copie la valeur antérieure de A (sauvegardée dans TMP), dans B.

En somme, un code de haute volée propre à gagner des prix :

let tmp = a
a = b
b = tmp

Bon, c’est pas foufou tout ça.

Petit rappel sur la déstructuration

Le terme déstructuration désigne de façon générale le fait d’aller récupérer d’un coup plusieurs données au sein d’une donnée structurée.

En dépit de l’énooooorme respect (et de l’éternelle gratitude) que j’ai pour les traducteur·rice·s français·es du MDN, je n’aime pas leur choix du terme « décomposition » pour ça, alors que le terme « déstructuration » était déjà très installé dans le lexique informatique français. C’est sémantiquement valide, mais ça nage à contre-courant de l’usage…

JavaScript distingue depuis ES2015 deux types de déstructuration :

  • La déstructuration positionnelle, basée comme son nom l’indique sur les positions des valeurs au sein de la donnée source. Celle-ci peut être n’importe quel itérable, et le plus souvent il s’agira d’un tableau. On la reconnaît car elle est encadrée par des crochets ([])
  • La déstructuration nominative, basée sur les noms des propriétés au sein de la donnée source, qui peut être n’importe quel objet. L’ordre n’importe donc pas. On la reconnaît car elle est encadrée par des accolades ({}).

On ne peut pas déstructurer null ou undefined, mais pour tout le reste, ça passe.

Enfin, on peut placer une déstructuration partout où il y a affectation, qu’elle soit…

  • explicite (opérateur d’affectation =, par exemple au sein d’une déclaration), ou
  • implicite (paramètres dans une signature de fonction, ou au sein justement d’une autre déstructuration, car on peut bien entendu les imbriquer)

Exemples de déstructuration positionnelle :

const [first, runnerUp] = ['Alice', 'Bob', 'Claire', 'David']
first // 'Alice'
runnerUp // 'Bob'

const person = {
set fullName(text) {
// Le point-virgule en début de ligne n’est techniquement pas
// nécessaire en début de bloc même en l’absence de points-virgules,
// mais Prettier préfère la jouer safe et diminuer les diffs.
;[this.first, this.last] = text.split(/\s+/)
},
}

Exemples de nominatif :

// Implicite, sur le premier argument passé à la fonction :
function TextField({ name, onChange, value }) {
// …
}

// Explicite, ici à la volée dans une déclaration :
const { first, last } = person

Et du coup…

Allez, on inverse deux variables a et b, OKLM :

;[a, b] = [b, a]

Et voilà.

J’aimerais te dire « j’ai pas plus court », mais en fait certains langages ont un parser suffisamment avancé pour lever d’éventuelles ambiguïtés et permettre ça sans délimiteurs (genre Ruby : a, b = b, a 😍). Mais, hé, on n’a plus de variable temporaire, et l’intention est tout de suite plus claire !

Au fait, on n’est pas du tout limités à deux valeurs, hein ! Imaginons que tu veuilles faire une rotation de valeurs, sur un trio par exemple. Aucun souci :

// Encore une fois, Prettier insiste pour préfixer par un point-virgule
// pour que ce code passe *n’importe où* en l’absence de points-virgules
// par ailleurs.
;[a, b, c] = [b, c, a]

L’émotion 🤗

Envie d’en savoir plus ?

Nos formations envoient du gros pâté, en présentiel ou à distance (FOAD), en inter-entreprises ou en intra rien que pour ta boîte ! Qui plus est, pendant la crise du Covid-19, les salarié·e·s peuvent être formé·e·s gratuitement ! Ce serait vraiment trop bête de ne pas en profiter !

Découvrez notre cours vidéo : JavaScript : this is it ! 🖥

Tout savoir sur le fonctionnement de this en JavaScript, des règles fondamentales aux ajustements des API, en passant par les fonctions fléchées, le binding et bien plus encore…