[3/4] Passez de zéro à héros avec ces méthodes JavaScript
Tags: javascript, beginners, french
Published: 2023-03-15 11:41:02

Les méthodes que nous verrons dans cet article vous permettront de reproduire deux **structures de données** célèbres que sont la pile (**stack**) et la **file** (queue). Ces structures de données permettent de résoudre des problèmes tels que l’**évaluation d’expression**, la vérification **des parenthèses** ou encore les **moteurs de jeu tour par tour**.

&nbsp;
Je vous réfère à cet article pour en apprendre plus sur les problèmes qui se résolvent avec ces structures de données : 🔗 [https://ayushmaan-singh19.medium.com/role-of-stacks-and-queues-in-problem-solving-44372a091040](https://ayushmaan-singh19.medium.com/role-of-stacks-and-queues-in-problem-solving-44372a091040)

&nbsp;
# Données d’exemple

Aujourd’hui nous allons prendre un exemple gourmand en utilisant un tableau regroupant des frites 🍟, une salade verte 🥗 pour la bonne conscience et enfin un petit désert, un chocolat 🍫. Ces éléments seront dans un tableau que l’on appellera le menu.

```tsx
[🍟, 🥗, 🍫]
```

Sans plus tarder, passons à table ! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy63mmmog6g0x7og0g54.jpg)

&nbsp;
# 1. push

La méthode **push** permet d’ajouter un élément à la fin d’un tableau (utile pour la **stack** et la **queue**).

Prenons comme exemple la situation suivante : vous avez commandé vos frites 🍟 et votre salade 🥗 et le serveur arrive à votre table pour commander le dessert. Vous choisissez le chocolat 🍫.

```tsx
[🍟, 🥗].push(🍫);

// Output : 3
// Tableau [🍟, 🥗, 🍫]
```

Le serveur va donc ajouter le chocolat 🍫 au menu (tableau). Il suffit d’appliquer la méthode **push** au **tableau** avec le chocolat 🍫 en paramètre, et le tour est joué, vous avez commandé votre dessert. 

La méthode **push** retourne la taille du tableau après l’ajout de l’élément, donc ici vous avez trois éléments dans votre menu.

&nbsp;
# 2. pop

La méthode **pop** permet de supprimer le dernier élément d’un tableau et d’en récupérer sa valeur (utile pour la **stack**).

Imaginons que le serveur ait pris toute votre commande, mais vous décidez de retirer le chocolat 🍫 de votre menu (dernier élément) car vous avez eu les yeux plus gros que le ventre.

```tsx
[🍟, 🥗, 🍫].pop();

// Output : 🍫
// Tableau [🍟, 🥗]
```

Il suffit d’appliquer la méthode **pop** au tableau. Cette méthode va renvoyer la valeur de l’élément supprimé, ici 🍫. Il ne restera alors que les frites 🍟 et la salade 🥗 dans votre menu.

&nbsp;
# 3. shift

La méthode **shift** permet de retirer le premier élément d’un tableau et de récupérer sa valeur (utile pour la **queue**).

Imaginons que le serveur ait pris toute votre commande, mais vous décidez de retirer les frites 🍟 de votre menu (premier élément) car vous avez déjà mangé un burger hier.

```tsx
[🍟, 🥗, 🍫].shift();

// Output : 🍟
// Tableau [🥗, 🍫]
```

Il suffit d’appliquer la méthode **shift** au tableau. Cette méthode va renvoyer la valeur de l’élément supprimé, ici 🍟. Il ne restera alors que la salade 🥗 et le chocolat 🍫 dans votre menu.

&nbsp;
# 4. unshift

La méthode **unshift** permet d’insérer un élément ou plusieurs éléments au début d’un tableau (utile pour la **queue)**. 

Imaginons que le serveur ait pris votre commande, mais vous décider d’ajouter un cocktail 🍹 et des biscuits apéritifs 🥨. Ces deux éléments doivent apparaître en premier dans le menu.

```tsx
[🍟, 🥗, 🍫].unshift(🍹, 🥨);

// Output : 5
// Tableau [🍹, 🥨, 🍟, 🥗, 🍫]
```

Initialement votre menu était composé de frites 🍟, d’une salade 🥗 et d’un chocolat 🍫. 

Pour ajouter au début du menu le cocktail 🍹 et les biscuits apéritifs 🥨, il suffit de faire unshift sur le tableau et de placer en paramètre les éléments à ajouter (ici 🍹 et 🥨).

Le retour de la méthode **unshift** est la **taille du tableau après ajout** du ou des éléments, ici on est donc à 5 éléments dans le menu.

&nbsp;
# 5. reverse

La fonction **reverse** comme son nom l’indique permet d’inverser l’ordre des éléments d’un tableau (utile pour la **stack** et la **queue**).

Ce soir au restaurant, c’est la soirée sens dessus dessous. Vous commandez un menu et vous le consommez à l’envers ! On commence par le dessert et on fini par l’entrée.

Le serveur vient prendre votre commande et doit l’inverser pour la transmettre à la cuisine.

```tsx
[🍟, 🥗, 🍫].reverse()

// Output [🍫, 🥗, 🍟]
```

Il suffit d’appliquer la méthode **reverse** sur le menu. La méthode renvoie le tableau inversé. Le serveur peut ainsi communiquer votre commande à la cuisine et vous pouvez profiter de cette belle soirée sens dessus dessous.

&nbsp;
# Conclusion

J’espère que vous avez apprécier votre repas et que vous n’avez plus faim ! Dans cet article, nous avons vu les méthodes qui permettent de construire les **structures de données** **stack** et **queue**, qui sont des structures de données très puissante pour **résoudre des problèmes** complexes.

Toutefois, ces méthodes ne doivent pas exclusivement être utilisées dans ce contexte car elles restent très **intéressantes** pour faire des **opérations sur les tableaux**.