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

# You don't know spread operator !
- URL: https://www.sfeir.dev/front/you-dont-know-spread-operator/
- Published: 2024-02-21T10:29:34.000Z
- Updated: 2024-02-21T10:29:34.000Z
- Description: Rapide cours sur le fonctionnement d'un outil que les développeurs utilisent tous les jours : le spread operator.
- Author: Valentin Parsy
- Tags: Front, JavaScript

## Un exercice de JavaScript

Dans cet article, je vous propose un petit challenge !

Lorsque j'utilise le "spread operator" (opérateur de décomposition) sur un Number X je veux que le résultat soit un tableau qui compte de 1 à X.

![](https://storage.ghost.io/c/0b/31/0b31478e-a66a-46f1-8c34-d44388e21192/content/images/2024/02/0z8hf4grikvwed044qoe.jpg)

Exemple dans la console

## Premiers pas vers une solution

La première chose à faire est évidemment de tester ce code. On remarque alors que ce code renvoie une erreur : "**Uncaught TypeError: X is not iterable"**  
Une occurrence très rare d'erreur JavaScript compréhensible 😁

Qu'est ce qu'un **iterable** ?  
[Un iterable est un objet qui défini un **comportement d'itération**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators%5Fand%5FGenerators?ref=sfeir.dev). Cela veut dire que cet object contient une propriété *Symbol.iterator* qui contient un **iterator**.  
Cet **iterator** doit respecter le [**protocol d'iteration**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration%5Fprotocols?ref=sfeir.dev#the%5Fiterator%5Fprotocol) : c'est une fonction qui retourne un object qui contient une propriété *next* qui est une fonction qui retourne une object avec deux propriété *value* et *done* ; *value* étant la valeur de l'itération en cours et *done* un boolean indiquant si l'itération est terminée ou non.  
Cela parait compliqué ? Reprenez la définition et construisez l'object au fur et à mesure. On arrive à ce résultat : 

![](https://storage.ghost.io/c/0b/31/0b31478e-a66a-46f1-8c34-d44388e21192/content/images/2024/02/Capture.PNG)

l'object résultat de cette description

Le spread operator est simplement un **consommateur d'iterable** : lorsque vous lui fournissez un iterable il va appeler la fonction *next* de l'iterator jusqu'a ce que la valeur de *done* soit à *true* en retournant la valeur de *value* à chaque itération.

### Vérifions avec un Array

Un Array en JavaScript est un iterable car il possède une propriété Symbol.iterator. Voici un exemple de comme utiliser cet iterator : 

![](https://storage.ghost.io/c/0b/31/0b31478e-a66a-46f1-8c34-d44388e21192/content/images/2024/02/wg4tk254640lb3tjmc7j.jpg)

Exemple dans la console de l'obtention et de l'utilisation d'un iterator

## La réponse à l'exercice

Maintenant que nous savons ce qu'est un iterable, comment transformer notre donnée de manière à ce qu'elle puisse être consommée par un spread operator ?  
Nous pouvons par exemple définir la propriété Symbol.iterator de tous les Number.  
**Transformons tous les Number en iterables !** 

![](https://storage.ghost.io/c/0b/31/0b31478e-a66a-46f1-8c34-d44388e21192/content/images/2024/02/uwfhb43kg2abzaek28sk.jpg)

Le code complet dans la console de solution à l'exercice

## Conclusion

De toute évidence on ne changera **jamais** le prototype d'une primitive dans un projet professionnel mais la connaissance acquise à travers cet exemple démontrant le fonctionnement de l'itération en JavaScript est, je pense, très importante.  
D'autres opérateurs utilisent cette propriété comme, par exemple, la boucle *for...of*.

**NB** : Cet article s'inspire du travaille du Dr. Axel Rauschmayer. Je conseille à tous développeur JavaScript/TypeScript de suivre son travail sur son site [2ality](https://2ality.com/?ref=sfeir.dev).