5 méthodes à absolument connaître avec JavaScript ES 2023

JavaScript ne cesse de s'améliorer et d'évoluer au fil des années, et pour cause : chaque nouvelle version du langage de programmation le plus populaire des développeurs web apporte son lot de nouveautés grâce à l'ECMAScript (ES).

Dans la version ECMAScript 2023 (ES14), plusieurs nouvelles méthodes très utiles avec les tableaux (les objets Array) ont été introduites.

Ces nouvelles méthodes sont principalement au nombre de cinq :

• array.findLast()
• array.toSorted()
• array.with()
• array.toReversed()
• array.toSpliced()

1. La méthode array.findLast()

La méthode findLast() fonctionne de manière similaire à find() (qui permet de trouver un élément correspondant à notre recherche), mais avec une différence clé : elle parcourt le tableau en sens inverse, c'est-à-dire de la fin vers le début.

Elle est donc très utile pour trouver le dernier élément qui satisfait notre condition.

Syntaxe

const result = array.findLast("element");

Exemple

const numbers = [1, 2, 3, 4, 5, 6, 7];

// Trouver le dernier nombre pair dans le tableau
const dernier = numbers.findLast(num => num % 2 === 0);
console.log(dernier); // 6

2. La méthode array.toSorted()

La méthode toSorted() crée une nouvelle copie triée du tableau sans modifier l'original.

Contrairement à sort(), qui est destructif, toSorted() respecte l'immuabilité, ce qui est une excellente nouvelle pour les développeurs qui privilégient des approches fonctionnelles.

Syntaxe

const sortedArray = array.toSorted(unsortedArray);

Exemple

const unsortedArray = [3, 1, 4, 1, 5, 9];
const sortedArray = unsortedArray.toSorted((a, b) => a - b); // On trie du plus petit au plus grand

console.log(sortedArray); // [1, 1, 3, 4, 5, 9]

3. La méthode array.with()

Cette méthode permet de remplacer un élément spécifique à l'intérieur d'un tableau, tou en créant une copie modifiée sans changer le tableau original (on parle donc d'immuabilité, vous le savez maintenant ! 😬).

Syntaxe

const newArray = array.with(index, newValue);

Exemple

const fruits = ["pomme", "banane", "cerise"];
const newFruits = fruits.with(1, "orange"); // Les tableaux commencent par 0

console.log(newFruits); // ["pomme", "orange", "cerise"]

4. La méthode array.toReversed()

La méthode toReversed() renvoie une version inversée d'un tableau sans modifier l'original.

Contrairement à la méthode reverse() qui modifie directement le tableau, toReversed() crée une copie pour garantir que le tableau d'origine reste inchangé : encore une méthode immuable. 😗

Syntaxe

const reversedArray = array.toReversed();

Exemple

const letters = ['a', 'b', 'c'];
const reversedLetters = letters.toReversed();

console.log(reversedLetters); // ['c', 'b', 'a']

5. La méthode array.toSpliced()

Cette méthode permet de supprimer et/ou d'insérer des éléments dans un tableau, mais comme les autres méthodes introduites avec ES 2023, elle crée une nouvelle copie du tableau sans modifier l'original.

Syntaxe

const splicedArray = array.toSpliced(start, delete, ...newItems);

Exemple

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toSpliced(2, 1, 6, 7);

console.log(newNumbers); // [1, 2, 6, 7, 4, 5]

Quelques petites précisions importantes :

• 2 - On insère des nouveaux éléments en index 2 (donc à la troisième position)
• 1 -  On supprime une seule valeur (donc le 3 du tableau)
• 6, 7 - On ajoute les éléments 6 et 7

Ainsi on se retrouve bien avec un tableau dans lequel 3 est supprimé tout en intégrant 6 et 7 avant les nombres 4 et 5 d'origine.

Conclusion

Ces cinq nouvelles méthodes permettent de manipuler les tableaux tout en préservant leur immuabilité (on l'aura découvert ensemble 😄) ce qui est essentiel.

Si vous voulez aller encore plus loin, allez jeter un oeil à notre formation entière dédiée à JavaScript : c'est une pépite !