> ## Content Index
> Fetch the complete content index at: https://mindsers.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Décomposition et déstructuration en Javascript
- URL: https://mindsers.blog/fr/post/decomposition-et-destructuration-en-javascript/
- Published: 2016-11-23T05:00:00.000Z
- Updated: 2023-11-20T07:30:58.000Z
- Author: Nathanaël Cherrier
- Tags: javascript, coding-tech, es6, rest, spread, decomposition, #lang-fr

La décomposition et la déstructuration sont deux termes spécifiques pour exprimer la même chose. La décomposition s’applique aux tableaux et la déstructuration aux objets.

Maintenant que nous avons cerné les différences de nommage, le terme décomposition étant le seul retenu dans les RFCs et autres spécifications d’Ecma International, nous n’utiliserons plus que celui-ci dans le reste de cet article.

La décomposition consiste à "décomposer" les structures complexes (tableau, objet) pour en extraire les valeurs qui nous intéressent. L’intérêt est de rendre ce genre de manipulation plus simple et le code plus lisible.

```js
let [ valeur1, valeur2 ] = tableau
let { valeur1, valeur2 } = objet

```

La syntaxe est différente s’il s’agit d’un tableau ou d’un objet.

## Décomposer des tableaux

Un cas concret de décomposition des tableaux est lorsque nous souhaitons récupérer les valeurs d’un tableau.

```js
let args = ['fruits', 'pomme', 'poire', 'abricot']
let type = args[0]
let firstEl = args[1]
let secondEl = args[2]
let thirdEl = args[3]

```

Sans décomposition voici comment on récupère des valeurs d’un tableau pour pouvoir les utiliser.

```js
let args = ['fruits', 'pomme', 'poire', 'abricot']
let [type, firstEl, secondEl, thirdEl] = args

```

La même chose avec la décomposition.

Les deux codes sont similaires, le résultat est le même. Dans les deux cas les variables `type`, `firstEl`, `secondEl`, `thirdEl` sont créées.

Si nous nous arrêtons là, cette syntaxe n’a pas trop d’intérêt si ce n’est peut-être nous faire économiser trois lignes. Mais la décomposition vous réserve bien d'autres surprises qui vous feront gagner beaucoup de temps.

Nous ne comparerons pas à chaque fois avec des exemples sans décomposition, mais essayez de réfléchir à comment vous coderiez la même fonctionnalité sans décomposition.

**Cas :** Si je ne veux récupérer que le type et le second élément.

```js
let args = ['fruits', 'pomme', 'poire', 'abricot']
let [type,, secondEl] = args

```

Il suffit d’ajouter une virgule entre `args[0]` et `args[2]` mais sans préciser de nom de variable dans laquelle mettre `args[1]`.

**Cas :** Si `args` est vide mes variables `type` et `secondEl` seront créées, mais auront pour valeur `undefined`. Pour pouvoir continuer à travailler avec, il faudrait que je teste mes variables. Mais je peux aussi leur attribuer des valeurs par défaut.

```js
let args = []
let [type = 'legume', firstEl = 'salade'] = args

```

Comme `args` est vide, `type` vaudra "légume" et `firstEl` vaudra "salade".

**Cas :** Si je veux récupérer le type de mes éléments dans une variable, mais qu’il est plus pratique pour moi que la liste des éléments soient dans un tableau pour pouvoir boucler dessus.

```js
let args = ['fruits', 'pomme', 'poire', 'abricot']
let [type, ...elements] = args

```

Ici `type` vaudra "fruits" et `elements` vaudra `['pomme', 'poire', 'abricot']`.

La syntaxe ici est assez particulière, car elle utilise ce que l’on appelle un paramètre du reste. [Si vous souhaitez en savoir plus sur les paramètres du reste, lisez cet article.](https://mindsers.blog/fr/post/rest-parameter-et-spread-operator-en-javascript/)

On peut aussi utiliser la décomposition pour des cas auxquels on ne pense pas forcément :

**Cas :** Si je veux intervertir les valeurs de deux variables.

```js
let valA = 'coucou'
let valB = 'byebye'
[valA, valB] = [valB, valA]

```

Logiquement `valA` vaudra "byebye" et `valB` vaudra "coucou".

**Cas :** La décomposition peut-être utilisée pour travailler avec des fonctions qui retournent des tableaux.

```js
let [max, min] = getMaxAndMin([3, 34, 2, 5, 6, 22, 33, 1])

```

L’intérêt ici est encore la lisibilité du code. Il faudra évidement être sûr de l'ordre des valeurs retournées par la fonction utilisée.

**Cas :** Il est possible d’utiliser la décomposition en paramètre de fonction.

```js
function firstIsTrue([ first = false ]) {
  return first === true
}

```

`firstIsTrue()` prend en paramètre un tableau. Seule la première valeur sera transmise à la fonction et si le tableau est vide `first` vaudra `false`.

Pour l’utilisateur de la fonction tout est transparent.

## Décomposer des objets

La décomposition des objets est relativement la même que celle des tableaux avec quelques spécificités. Nous allons donc passer dessus un peu plus vite pour ne voir que les notions intéressantes.

**Cas :** Récupération d’une des clés

```js
let objet = {
  slug: 'test'
  title: 'Ceci est un test'
  content: '...'
  visible: true
}

let { title } = objet

```

Exemple de base où on ne veut que le titre. Vous noterez l’utilisation des accolades à la place des crochets lorsqu’il s’agit d’objet.

**Cas :** Valeur par défaut

```js
let objet = {
  slug: 'test'
  title: 'Ceci est un test'
  content: '...'
  visible: true
}

let { visible = false } = objet

```

On ne veut que la visibilité et qu’elle soit par défaut à `false`.

**Cas :** Utilisation d’un autre nom pour une clé

```js
let objet = {
  slug: 'test'
  title: 'Ceci est un test'
  content: '...'
  visible: true
}

let { content: article } = objet

```

Ici, nous récupérons uniquement la clé `content` que nous stockons dans la variable `article`.

La vraie syntaxe de la décomposition est celle utilisée dans cet exemple. Dans les autres exemples nous utilisons une astuce de ES2015 qui nous évite d'écrire deux fois la même chose quand c’est possible. Retenez juste que `{ visible: visible }` est égale à `{ visible }`.

**Cas :** Cumul de la valeur par défaut et du changement de nom

```js
let objet = {
  slug: 'test'
  title: 'Ceci est un test'
  content: '...'
  visible: true
}

let { visible: isVisible = false } = objet

```

Nous récupérons la clé `visible` que nous stockons dans la variable `isVisible`. Cette variable vaudra par défaut `false`.

**Cas :** Utilisation de la décomposition en paramètre de fonction

Il s’agit clairement du cas qui me pousse le plus à utiliser la décomposition. C’est un gain de temps impressionnant.

Vous avez surement déjà écrit des fonctions avec un paramètre `options` qui rassemble toutes vos options dans un objet. Pensez au temps que vous avez perdu et au nombre de lignes que vous avez écrit pour tester ce seul paramètre avant même de coder du métier.

```js
function test(id, { maxLength = 10, current = 0 } = {})

```

Comme pour la décomposition de tableau, le fait de l’utiliser dans les paramètres d’une fonction est totalement transparent pour l’utilisateur, mais pour vous ça change tout.

`maxLength` et `current` ne seront jamais `undefined`, auront toujours une valeur que ce soit celle de l’utilisateur ou la valeur par défaut. Et ça allégera votre code vu que vous ne ferez plus `options.maxLength` mais juste `maxLength` comme s’il s’agissait d’un simple paramètre comme `id`.

Seul les attributs que vous avez déclarés dans la décomposition seront transmit à votre fonction. L’utilisateur peut bien ajouter 15 000 autres attributs à `options` ils ne seront pas transmis. Ce qui ajoute un léger niveau de sécurité à votre fonction.

## Conclusion

J’espère sincèrement que vous avez été convaincu. La décomposition est, pour moi, une des plus grosses nouveautés de ES2015.

Une fonctionnalité puissante à utiliser sans modération pour rendre votre code plus simple, clair, concis, beau, propre, etc. Et vous savez à quel point j’aime le code propre.

Pour aller plus loin :

- [Comprendre ](https://mindsers.blog/fr/post/fetch-fin-jquery-ajax/)[fetch](https://mindsers.blog/fr/post/fetch-fin-jquery-ajax/)[, le remplaçant de ](https://mindsers.blog/fr/post/fetch-fin-jquery-ajax/)[jQuery.ajax](https://mindsers.blog/fr/post/fetch-fin-jquery-ajax/)[ (JavaScript)](https://mindsers.blog/fr/post/fetch-fin-jquery-ajax/)
- [Comprendre l’opérateur de décomposition et le paramètre du reste en JavaScript](https://mindsers.blog/fr/post/rest-parameter-et-spread-operator-en-javascript/)
- [Comprendre le découplage](https://mindsers.blog/fr/post/decouplez-votre-code/)