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).
ECMAScript est le standard qui définit les spécifications du JavaScript. Dit autrement, c'est une sorte de groupe qui dicte les règles et les fonctions disponibles avec JavaScript. Chaque version d'ECMAScript apporte des nouvelles fonctionnalités qui améliorent le langage.
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.
En programmation, une opération destructive modifie directement la valeur ou la structure d'une donnée, par exemple en modifiant un tableau existant avec la méthode
sort().L'immuabilité, à l'inverse, garantit qu'une donnée ne peut pas être modifiée une fois créée ; toute opération retourne une nouvelle copie de la donnée sans altérer l'original (comme avec la méthode
toSorted()).L'approche fonctionnelle repose sur l'immuabilité, favorisant des fonctions qui ne modifient pas l'état global (on parle de fonctions pures 😉) rendant le code plus prévisible et plus facile à déboguer.
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 !
