Opérateurs de repos et de propagation expliqués en JavaScript

Le repos et la propagation utilisent tous deux trois points, ils peuvent donc prêter à confusion. Prenons le temps de comprendre ces opérateurs JavaScript utiles.

Les opérateurs de repos et de propagation sont deux des fonctionnalités avancées introduites dans ES6, nous permettant de répartir et de mélanger plusieurs éléments. Ces deux opérateurs n’ont pas reçu autant d’attention dans le développement récent, mais ils jouent un rôle important dans l’écriture de code propre et efficace. Par exemple, ils offrent une alternative intéressante à la méthode concat, introduite dans ES3.

Ces deux opérateurs nécessitent souvent des précisions car ils semblent similaires puisqu’ils sont tous deux désignés par trois points, mais ils remplissent des fonctions distinctes.

Dans cet article, nous discuterons des opérateurs de repos et de propagation en JavaScript, de leurs différences, quand les utiliser et comment les appliquer séquentiellement dans nos projets pour créer un code efficace.

Introduction à l’opérateur de repos et de propagation

Comme indiqué dès le début, les opérateurs rest et spread sont deux opérateurs différents, mais ils ont un symbole commun : les trois points en JavaScript. Waouh ! J’essaie toujours de comprendre, n’est-ce pas ? Pourquoi utilisent-ils tous les deux trois points en JavaScript s’ils ne sont pas identiques ? Eh bien, c’est là que les choses se compliquent, mais je l’expliquerai au fur et à mesure.

Qu’est-ce qu’un opérateur de repos ?

Un opérateur de repos est un type de paramètre qui obtient tous les paramètres restants d’un appel de fonction via un tableau. Cela nous permet de gérer une variété d’entrées en tant que paramètres dans une fonction. Parce qu’il est utilisé pour combiner de nombreux éléments, l’opérateur rest est très utile lors de la déstructuration de tableaux et d’objets.

Voyons un exemple d’opérateur de repos. Ici, nous allons ajouter la somme des nombres en utilisant un opérateur de repos, qui est le ...:

function sum(...numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

const result =console.log (sum(1, 2, 3, 4)); 
// This returns 10 (1 + 2 + 3 + 4)

Dans l’exemple de code ci-dessus, nous avons créé une fonction sum. Entre parenthèses, nous avons ajouté le paramètre rest qui permettra à la fonction d’accepter n’importe quel nombre d’arguments et de les rassembler dans un tableau appelé nombres. Ensuite, nous avons créé une variable total et attribué une valeur initiale de 0 à cette variable, qui finira par stocker la somme de tous les nombres.

La boucle parcourra chaque élément du tableau de nombres, puis le const num déclarera une variable num qui représente le nombre actuel en cours de traitement dans la boucle. A l’intérieur de la boucle, la ligne suivante, total+=num ajoute le numéro actuel num au total sum. Une fois les boucles terminées, la fonction renverra le total, qui est la somme de tous les nombres.

La dernière ligne appelle la fonction, qui prend quatre entrées. Tous les arguments sont rassemblés dans le tableau de nombres au sein de la fonction. Ces nombres sont ensuite additionnés à l’aide de la boucle et le résultat, qui est 10, est enregistré dans le result variable.

Cet exemple de code résume notre définition du repos : L’opérateur rest combine les éléments ou les arguments d’une fonction dans un tableau.

Qu’est-ce qu’un opérateur de spread ?

L’opérateur de propagation divise un tableau ou un objet en éléments ou propriétés distincts. L’opérateur spread est principalement utilisé si vous souhaitez dupliquer le contenu d’un tableau ou combiner ou combiner plusieurs tableaux/objets ensemble.

Par exemple, si nous avons un tableau de nombres et que nous voulons construire un nouveau tableau avec les éléments du premier tableau que nous avons créé en ajoutant un autre élément à la fin du premier tableau que nous avons formé, nous utiliserons l’opérateur spread (encore une fois, c’est ...) puisque ce que nous voulons faire ici, c’est combiner deux tableaux.

const firstArray = [5, 10, 15, 20, 25, 30];
const newArray=[...firstArray, 35, 40]

Si vous étudiez attentivement le code, vous remarquerez que nous avons effectué une petite concaténation en utilisant l’opérateur spread.

Opérateur de repos ou de propagation : comment les utiliser

Super! Nous avons donc parcouru un long chemin en apprenant ce que sont les deux opérateurs. La prochaine étape consiste à savoir comment les appliquer. Eh bien, cela ne devrait pas vous effrayer, car nous allons vous expliquer comment nous pouvons les utiliser dans notre code. Pour mieux comprendre cela, nous allons utiliser des exemples concrets, mais nous utiliserons du code pour une meilleure compréhension

Opérateur de diffusion

Regardons un exemple simple de propagation. Par exemple, lorsque vous préparez une salade de fruits, vous disposez de différents bols contenant différents fruits et vous souhaitez les combiner dans un grand bol pour mélanger les fruits. Voici un exemple du fonctionnement de l’opérateur spread dans le contexte de cet exemple :

const firstBowl = ['pawpaw', 'cucumber', 'watermelon'];
const secondBowl = ['Pineapple', 'Apple', 'banana'];
const thirdBowl = ['cashew nut', 'Date', 'Strawberry'];

const fruitMix =  [...firstBowl, ...secondBowl, ...thirdBowl];

console.log(fruitMix);

Dans l’exemple ci-dessus, l’opérateur de tartinade est utilisé pour diviser le contenu de chaque bol de fruits en fruitMix tableau, qui combinera tous les fruits des différents bols pour réaliser une salade de fruits.

L’opérateur spread peut être utilisé pour combiner des éléments provenant de différentes sources en une seule collection.

Opérateur de repos

Le repos est assez simple puisque nous calculerons l’âge total des invités participant à une fête que nous organisons. Vous savez que certains invités amèneront également leurs enfants, nous aurons donc besoin d’un moyen de gérer différents nombres d’âges. Pour ce faire, nous allons créer une fonction calculateTotalAge. Cette fonction résumera l’âge de l’hôte et des invités. Voir l’exemple de code ci-dessous :

function calculateTotalAgeOfGuest(hostAge, ...guestAges) {
  let totalAge = hostAge;
  for (const age of guestAges) {
    totalAge += age;
  }
  return totalAge;
}

const hostAge = 30;
const guestAges = [25, 28, 10, 5];

const totalAge = calculateTotalAgeOfGuest(hostAge, ...guestAges);

À partir de l’exemple de code ci-dessus, l’opérateur rest collecte tous les âges des invités dans le tableau guestAges. Cela rend beaucoup plus facile le calcul de l’âge total en parcourant le tableau.

L’opérateur de repos collecte plusieurs quantités de quelque chose dans un seul conteneur pour le traitement, comme le calcul de l’âge que nous avons effectué.

Quand utiliser l’opérateur Rest and Spread

Décider quand utiliser l’opérateur de repos ou de propagation dépend uniquement de vos préférences personnelles et du type de projet sur lequel vous travaillez.

Par exemple, l’opérateur spread peut être utilisé dans les appels de fonction, les littéraux de tableau et les littéraux d’objet. Les itérables tels que les tableaux et les chaînes peuvent être étendus en un seul argument ou élément avec l’opérateur spread. Les expressions d’objet seront développées pour créer un nouvel objet. Tandis que l’opérateur rest rassemble tous les éléments ou arguments restants dans un tableau.

En résumé, cela signifie que l’opérateur rest est utilisé pour rassembler des éléments dans un tableau, tandis que l’opérateur spread est utilisé pour répartir le contenu d’un tableau.

Conclusion

Les opérateurs de repos et de propagation peuvent sembler déroutants au premier abord, mais les intégrer dans vos tâches de programmation les rend plus faciles à comprendre. Dans cet article, nous avons approfondi les concepts fondamentaux des opérateurs de repos et de propagation et fourni des informations pratiques sur leur application. À présent, vous devriez avoir bien compris ces deux opérateurs, et nous espérons que cet article s’avérera être une ressource précieuse pour améliorer votre compréhension de leur utilisation.