Top 11 (et plus !) des fonctions JavaScript incontournables
Maîtrisez le code ! Devenez un développeur JavaScript plus rapide, plus efficace et plus satisfait en vous familiarisant avec ces fonctions essentielles et omniprésentes du langage.
Que ce soit côté serveur, côté client (ou même pour les engins spatiaux), JavaScript est partout. C'est également un langage très adaptable (il prend en charge des paradigmes de programmation fonctionnelle complexes ainsi que les classes traditionnelles), et sa ressemblance avec d'autres langages de style "C" facilite la transition pour les développeurs issus d'autres environnements.
Si vous cherchez à perfectionner vos compétences en JS, je vous recommande de vous familiariser, de pratiquer et finalement de maîtriser les fonctions de base suivantes disponibles dans le langage. Elles ne sont pas toutes strictement "indispensables" pour résoudre des problèmes, mais elles peuvent grandement faciliter votre travail dans certaines situations, tandis que dans d'autres, elles peuvent réduire la quantité de code que vous devez écrire.
map()
Il serait impardonnable d'écrire un article sur les fonctions JavaScript importantes sans mentionner map() ! 😆😆 Avec filter() et reduce(), map() constitue une sorte de trinité sacrée. Ce sont des fonctions que vous utiliserez constamment tout au long de votre carrière, elles valent donc plus que la peine d'être étudiées. Examinons-les une par une, en commençant par map().
map() fait partie des fonctions qui posent le plus de difficultés aux personnes qui apprennent JavaScript. Pourquoi ? Non pas parce qu'il y a quelque chose d'intrinsèquement complexe, mais parce que la façon dont cette fonction opère est basée sur la programmation fonctionnelle. Et puisque nous ne sommes pas souvent initiés à la programmation fonctionnelle (nos écoles et l'industrie étant dominées par les langages orientés objet), le fonctionnement peut sembler étrange, voire incorrect, à nos esprits conditionnés.
JavaScript est beaucoup plus fonctionnel qu'orienté objet, même si ses versions modernes font de leur mieux pour masquer ce fait. Mais c'est une véritable boîte de Pandore que je pourrais éventuellement ouvrir un autre jour. 🤣 Bien, alors, map() . . .
map() est une fonction très simple ; elle s'applique à un tableau et nous aide à transformer chaque élément en une nouvelle valeur, créant ainsi un nouveau tableau. La méthode précise de transformation d'un élément est fournie par une autre fonction, généralement anonyme.
C'est tout ce qu'il y a à savoir ! La syntaxe peut prendre un certain temps à maîtriser, mais c'est essentiellement ce que nous faisons dans une fonction map(). Pourquoi voudrions-nous utiliser map() ? Cela dépend de ce que nous essayons de réaliser. Par exemple, supposons que nous ayons enregistré les températures de chaque jour de la semaine dernière et que nous les ayons stockées dans un tableau simple. Cependant, on nous informe maintenant que les instruments n'étaient pas très précis et qu'ils ont enregistré une température inférieure de 1,5 degré à ce qu'elle aurait dû être.
Nous pouvons effectuer cette correction en utilisant la fonction map() de la manière suivante :
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23]; const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5); console.log(correctedWeeklyReadings); // affiche [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]
Un autre exemple, très utile, provient du monde de React, où la création de listes d'éléments DOM à partir de tableaux est une pratique courante ; par conséquent, une construction comme celle-ci est fréquente :
export default ({ products }) => {
return products.map(product => {
return (
<div class="product" key={product.id}>
<div class="p-name">{product.name}</div>
<div class="p-desc">{product.description}</div>
</div>
);
});
};
Ici, nous avons un composant React fonctionnel qui reçoit une liste de produits en tant que propriétés. À partir de cette liste (tableau), il construit ensuite une liste de "divs" HTML, en transformant essentiellement chaque objet produit en HTML. L'objet original des produits reste inchangé.
Vous pouvez affirmer que map() n'est rien de plus qu'une boucle for améliorée, et vous auriez tout à fait raison. Mais remarquez que dès que vous avancez cet argument, c'est votre esprit façonné par l'orientation objet qui s'exprime, tandis que ces fonctions et leur justification proviennent de la programmation fonctionnelle, où l'uniformité, la compacité et l'élégance sont hautement valorisées. 🙂
filter()
filter() est une fonction extrêmement pratique que vous utiliserez souvent dans de nombreuses situations. Comme son nom l'indique, cette fonction filtre un tableau en fonction des règles/logiques que vous spécifiez et renvoie un nouveau tableau contenant uniquement les éléments qui répondent à ces critères.
Reprenons notre exemple de la météo. Supposons que nous ayons un tableau contenant les températures maximales pour chaque jour de la semaine dernière ; maintenant, nous voulons savoir combien de jours ont été plus froids. Oui, "plus froid" est un terme subjectif, alors disons que nous recherchons les jours où la température était inférieure à 20. Nous pouvons le faire en utilisant la fonction filter() de la manière suivante :
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
console.log("Le nombre total de jours plus froids dans la semaine était de : " + colderDays.length); // 1
Notez que la fonction anonyme que nous transmettons à filter() doit renvoyer une valeur booléenne : true ou false. C'est ainsi que filter() saura s'il faut inclure ou non cet élément dans le tableau filtré. Vous pouvez écrire autant de logique complexe que vous le souhaitez à l'intérieur de cette fonction anonyme ; vous pouvez effectuer des appels d'API et lire les entrées de l'utilisateur, etc., tant que vous vous assurez qu'à la fin, vous renvoyez une valeur booléenne.
Avertissement : Ceci est une note complémentaire que je me sens obligé de fournir en me basant sur mon expérience en tant que développeur JavaScript. Que ce soit par manque de rigueur ou par erreurs fondamentales, de nombreux programmeurs introduisent des bogues subtils dans leurs programmes lorsqu'ils utilisent filter(). Réécrivons le code précédent pour y inclure le bogue :
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
if(colderDays) {
console.log("Oui, il y a eu des jours plus froids la semaine dernière");
} else {
console.log("Non, il n'y a pas eu de jours plus froids");
}
Avez-vous remarqué quelque chose ? Excellent travail si c'est le cas ! La condition if à la fin vérifie colderDays, qui est en fait un tableau ! Vous seriez surpris du nombre de personnes qui commettent cette erreur lorsqu'elles se précipitent pour respecter les délais ou lorsqu'elles codent de mauvaise humeur (pour une raison quelconque). Le problème avec cette condition est que JavaScript est un langage étrange et incohérent à bien des égards, et la "véracité" des choses en fait partie. Alors que [] == true renvoie false, ce qui vous fait croire que le code ci-dessus n'est pas erroné, la réalité est qu'à l'intérieur d'une condition if, [] est évalué à true ! En d'autres termes, le code que nous avons écrit ne dira jamais qu'il n'y a pas eu de jours plus froids la semaine dernière.
La correction est très simple, comme le montre le code précédant le code ci-dessus. Nous vérifions colderDays.length, ce qui nous garantit un entier (zéro ou plus) et fonctionne donc de manière cohérente dans les comparaisons logiques. Notez que filter() retournera toujours, toujours, toujours un tableau, vide ou non vide, nous pouvons donc nous y fier et écrire nos comparaisons logiques en toute confiance.
Cette digression a été plus longue que prévu, mais des bogues comme celui-ci méritent d'être soulignés en dix mille mots, voire en majuscules si nécessaire. J'espère que vous ne vous ferez pas piéger par cela et que vous vous épargnerez des centaines d'heures de débogage ! 🙂
reduce()
De toutes les fonctions présentées dans cet article, ainsi que de la bibliothèque standard JavaScript, reduce() est l'une des favorites pour remporter la palme de la "confusion et de l'étrangeté". Bien que cette fonction soit essentielle et permette d'obtenir un code élégant dans de nombreuses situations, elle est évitée par la plupart des développeurs JavaScript, qui préfèrent écrire du code plus détaillé.
La raison en est que, et je vais être honnête ici !, reduce() est difficile à appréhender, tant au niveau du concept que de l'exécution. Lorsque vous lisez sa description, vous la relisez plusieurs fois, et pourtant, vous vous demandez si vous l'avez mal comprise ; et lorsque vous la voyez en action et que vous essayez de visualiser son fonctionnement, votre cerveau se tord en mille nœuds ! 🤭
Maintenant, n'ayez crainte. La fonction reduce() est loin d'être aussi complexe et intimidante que, disons, les arbres B+ et leurs algorithmes. C'est juste que ce type de logique est rarement rencontré lors des tâches quotidiennes d'un programmeur moyen.
Alors, après vous avoir fait peur et vous avoir immédiatement dit de ne pas vous inquiéter, je vais enfin vous montrer ce qu'est cette fonction et pourquoi nous pourrions en avoir besoin.
Comme son nom l'indique, reduce() est utilisé pour réduire quelque chose. La chose qu'il réduit est un tableau, et la chose en laquelle il réduit le tableau donné est une valeur unique (nombre, chaîne, fonction, objet, peu importe). Voici une façon plus simple de le dire : reduce() transforme un tableau en une seule valeur. Notez que la valeur renvoyée par reduce() n'est pas un tableau, comme c'est le cas pour map() et filter(). Une fois que vous avez compris cela, vous avez déjà fait la moitié du chemin. 🙂
Il est maintenant évident que si nous voulons transformer (réduire) un tableau, nous devons fournir la logique nécessaire ; et sur la base de votre expérience en tant que développeur JS, vous avez probablement déjà deviné que nous le faisons en utilisant une fonction. Cette fonction est ce que nous appelons la fonction reducer, qui constitue le premier argument de reduce(). Le deuxième argument est une valeur de départ, telle qu'un nombre, une chaîne, etc. (j'expliquerai dans un instant ce qu'est cette "valeur de départ").
Sur la base de notre compréhension jusqu'à présent, nous pouvons affirmer qu'un appel à reduce() ressemble à ceci : array.reduce(reducerFunction, startingValue). Examinons maintenant le cœur de l'ensemble : la fonction réducteur. Comme nous l'avons déjà établi, la fonction reducer est ce qui indique à reduce() comment convertir le tableau en une seule valeur. Elle prend deux arguments : une variable servant d'accumulateur (ne vous inquiétez pas, je vais également expliquer cette partie) et une variable pour stocker la valeur actuelle.
Je sais, je sais . . . C'était beaucoup de terminologie pour une seule fonction qui n'est même pas obligatoire en JavaScript. 😝😝 Et c'est pourquoi les gens évitent reduce(). Mais si vous l'apprenez étape par étape, non seulement vous la comprendrez, mais vous l'apprécierez également à mesure que vous deviendrez un meilleur développeur.
Bon, revenons au sujet qui nous intéresse. La "valeur de départ" transmise à reduce() est... eh bien, la valeur de départ pour le calcul que vous souhaitez utiliser. Par exemple, si vous allez effectuer une multiplication dans la fonction de réduction, une valeur de départ de 1 est logique ; pour l'addition, vous pouvez commencer à 0, et ainsi de suite.
Examinons maintenant la signature de la fonction de réduction. Une fonction de réduction passée à reduce() se présente sous la forme suivante : reducerFunction(accumulator, currentValue). "Accumulateur" est juste un terme sophistiqué pour la variable qui collecte et conserve le résultat du calcul ; c'est exactement comme utiliser une variable nommée total pour additionner tous les éléments d'un tableau en utilisant quelque chose comme total += arr[i]. C'est exactement ainsi que la fonction de réduction dans reduce() est appliquée : l'accumulateur est initialement défini sur la valeur de départ que vous fournissez, puis, un par un, les éléments du tableau sont parcourus, le calcul est effectué et le résultat est stocké dans l'accumulateur, etc.
Alors, quelle est cette "valeur actuelle" dans une fonction de réduction ? C'est la même idée que celle que vous imaginez mentalement si je vous demandais de parcourir un tableau : vous prendriez une variable pour commencer à l'index zéro et la feriez avancer d'un pas à la fois. Pendant que vous faites cela, si je vous demandais de vous arrêter brusquement, vous vous retrouveriez sur l'un des éléments du tableau, n'est-ce pas ? C'est ce que nous entendons par valeur actuelle : c'est la valeur de la variable utilisée pour représenter l'élément du tableau actuellement considéré (pensez à une boucle sur un tableau si cela vous aide).
Cela dit, il est temps de voir un exemple simple et de voir comment tout ce jargon se combine dans un véritable appel à reduce(). Supposons que nous ayons un tableau contenant les n premiers nombres naturels (1, 2, 3 . . . n) et que nous soyons intéressés à trouver la factorielle de n. Nous savons que pour trouver n ! il suffit simplement de tout multiplier, ce qui nous amène à cette implémentation :
const numbers = [1, 2, 3, 4, 5]; const factorial = numbers.reduce((acc, item) => acc * item, 1); console.log(factorial); // 120
Il se passe beaucoup de choses dans ces trois lignes de code, alors décortiquons-les une par une dans le contexte de la (très longue) discussion que nous avons eue jusqu'à présent. Comme il est évident, numbers est le tableau qui contient tous les nombres que nous voulons multiplier. Ensuite, examinez l'appel de numbers.reduce(), qui indique que la valeur de départ de acc doit être 1 (car cela n'influence ni ne détruit aucune multiplication). Ensuite, vérifiez le corps de la fonction de réduction, `(acc, item) => acc * item, qui indique simplement que la valeur de retour pour chaque itération sur le tableau doit être cet élément multiplié par ce qui se trouve déjà dans l'accumulateur. L'itération et le stockage explicite de la multiplication dans l'accumulateur se produisent dans les coulisses, et c'est l'une des principales raisons pour lesquelles reduce() est un tel point d'achoppement pour les développeurs JavaScript.
Pourquoi utiliser reduce() ?
C'est une excellente question et pour être honnête, je n'ai pas de réponse définitive. Tout ce que fait reduce() peut être fait avec des boucles, forEach(), etc. Cependant, ces techniques entraînent beaucoup plus de code, ce qui le rend difficile à lire, surtout si vous êtes pressé. Ensuite, il y a la question de l'immuabilité : avec reduce() et des fonctions similaires, vous pouvez être sûr que vos données d'origine n'ont pas été modifiées ; cela élimine en soi des catégories entières de bogues, en particulier dans les applications distribuées.
Enfin, reduce() est beaucoup plus adaptable, dans le sens où l'accumulateur peut être un objet, un tableau ou même une fonction si nécessaire ; il en va de même pour la valeur de départ et les autres parties de l'appel de fonction : presque tout peut entrer et presque tout peut sortir, ce qui offre une grande flexibilité dans la conception de code réutilisable.
Si vous n'êtes toujours pas convaincu, ce n'est pas grave non plus. La communauté JavaScript elle-même est très divisée sur la "compacité", "l'élégance" et la "puissance" de reduce(), il n'est donc pas grave si vous ne l'utilisez pas. 🙂 Mais assurez-vous de regarder quelques exemples intéressants avant de décider de bannir reduce().
some()
Disons que vous avez un tableau d'objets, chaque objet représentant une personne. Vous voulez savoir s'il y a des personnes dans le tableau qui ont plus de 35 ans. Notez qu'il n'est pas nécessaire de compter le nombre de ces personnes, et encore moins d'en extraire une liste. Ce que nous disons ici équivaut à "un ou plusieurs" ou "au moins un".
Comment feriez-vous ?
Oui, vous pouvez créer une variable drapeau et parcourir le tableau pour résoudre ce problème de la manière suivante :
const persons = [
{
name: 'Personne 1',
age: 32
},
{
name: 'Personne 2',
age: 40
},
];
let foundOver35 = false;
for (let i = 0; i < persons.length; i ++) {
if(persons[i].age > 35) {
foundOver35 = true;
break;
}
}
if(foundOver35) {
console.log("Oui, il y a quelques personnes ici !")
}
Le problème ? Le code ressemble trop à du C ou du Java, à mon avis. "Verbeux" est un autre mot qui me vient à l'esprit. Un utilisateur expérimenté de JS pourrait penser à "moche", "horrible", etc. 😝 Et à juste titre, je dirais. Une façon d'améliorer ce morceau de code est d'utiliser quelque chose comme map(), mais même dans ce cas, la solution est un peu maladroite.
Il s'avère que nous disposons d'une fonction plutôt pratique appelée some() qui est déjà disponible dans le langage de base. Cette fonction est utilisée sur les tableaux et accepte une fonction de "filtrage" personnalisée, renvoyant une valeur booléenne true ou false. Essentiellement, elle fait ce que nous essayons de faire depuis quelques minutes, mais de manière très concise et élégante. Voici comment nous pouvons l'utiliser :
const persons = [
{
name: 'Personne 1',
age: 32
},
{
name: 'Personne 2',
age: 40
},
];
if(persons.some(person => {
return person.age > 35
})) {
console.log("Nous avons trouvé des personnes !")
}
Même entrée, même résultat qu'avant ; mais remarquez la réduction considérable du code ! Remarquez également à quel point la charge cognitive est réduite de manière drastique, car nous n'avons plus besoin d'analyser le code ligne par ligne comme si nous étions nous-mêmes l'interpréteur ! Le code se lit maintenant presque comme un langage naturel.
every()
Tout comme some(), nous avons une autre fonction utile appelée every(). Comme vous pouvez le deviner maintenant, elle renvoie également une valeur booléenne selon que tous les éléments du tableau réussissent ou non le test donné. Bien entendu, le test à réussir est fourni sous la forme d'une fonction anonyme la plupart du temps. Je vais vous épargner la douleur de voir à quoi pourrait ressembler une version naïve du code, voici donc comment every() est utilisé :
const entries = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entries.every(entry => {
return Number.isInteger(entry.id) && entry.id > 0;
})) {
console.log("Toutes les entrées ont un ID valide")
}
Comme il est évident, le code vérifie que tous les objets du tableau ont une propriété ID valide. La définition de "valide" dépend du contexte du problème, mais comme vous pouvez le voir, pour ce code, j'ai considéré des entiers non négatifs. Une fois de plus, nous voyons à quel point le code est simple et agréable à lire, ce qui est le seul objectif de cette (et de ces) fonction(s) similaire(s).
includes()
Comment vérifier l'existence de sous-chaînes et d'éléments de tableau ? Eh bien, si vous êtes comme moi, vous accédez rapidement à indexOf(), puis vous consultez la documentation pour vous familiariser avec ses valeurs de retour possibles. C'est un inconvénient majeur, et les valeurs de retour sont difficiles à retenir (question rapide : que signifie un processus renvoyant 2 au système d'exploitation ?).
Mais il existe une bonne alternative que nous pouvons utiliser : includes(). L'utilisation est aussi simple que le nom, et le code résultant est extrêmement rassurant. Gardez à l'esprit que la correspondance effectuée par includes() est sensible à la casse, mais je suppose que c'est ce que nous attendons tous intuitivement de toute façon. Et maintenant, passons au code !
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, car la première lettre est en minuscules
console.log(name.includes('Ank')); // true, comme prévu
Cependant, n'attendez pas trop de cette humble méthode :
const user = {a: 10, b: 20};
console.log(user.includes('a')); // cela plante, car les objets n'ont pas de méthode "includes"
Elle ne peut pas consulter l'intérieur des objets car elle n'est tout simplement pas définie pour les objets. Mais bon, nous savons que cela fonctionne sur les tableaux, alors nous pouvons peut-être faire quelques ajustements ici. . . 🤔.
const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});
Alors, que se passe-t-il lorsque vous exécutez ce code ? Cela ne plante pas, mais le résultat est également décevant : false. 😫😫 En fait, cela est lié aux objets, aux pointeurs et à la façon dont JavaScript voit et gère la mémoire, ce qui est un univers à part. Si vous souhaitez approfondir ce sujet, n'hésitez pas à vous lancer (peut-être en commençant ici), mais je vais m'arrêter ici.
Nous pouvons faire en sorte que le code ci-dessus se comporte comme prévu si nous le réécrivons de la manière suivante, mais à ce stade, cela devient plus ou moins une blague, à mon avis :
const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true
Cependant, cela montre que nous pouvons faire en sorte qu'includes() fonctionne sur des objets, donc je suppose que ce n'est pas une catastrophe totale. 😄
slice()
Supposons que nous ayons une chaîne et que je vous demande d'en renvoyer une partie qui commence par "r" et se termine par "z" (les caractères réels ne sont pas importants). Comment feriez-vous ? Vous pourriez peut-être créer une nouvelle chaîne et l'utiliser pour stocker tous les caractères nécessaires et la renvoyer. Ou, si vous êtes comme la plupart des programmeurs, vous me donneriez deux indices de tableau en retour : l'un indiquant le début de la sous-chaîne, l'autre marquant la fin.
Ces deux approches conviennent, mais il existe un concept appelé découpage qui offre une solution intéressante dans de telles situations. Heureusement, il n'y a pas de théorie abstruse à suivre ; découper signifie exactement ce que cela semble indiquer : créer une chaîne/un tableau plus petit à partir de celui donné, un peu comme nous créons des tranches de fruits. Voyons ce que je veux dire, à l'aide d'un exemple simple :
const headline = "Et ce soir, en exclusivité, l'invité que nous attendions tous !";
const startIndex = headline.indexOf('invité');
const endIndex = headline.indexOf('attendions');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // invité que nous
Lorsque nous utilisons slice(), nous fournissons deux indices à JavaScript : celui où nous voulons commencer le découpage et celui où nous voulons qu'il s'arrête. Le problème avec slice() est que l'index de fin n'est pas inclus dans le résultat final, c'est pourquoi nous voyons que le mot "attendions" est absent du nouveau titre dans le code ci-dessus.
Les concepts comme le découpage sont plus importants dans d'autres langages, notamment Python. Si vous demandez à ces développeurs, ils vous diront qu'ils ne peuvent pas imaginer la vie sans cette fonctionnalité, et à juste titre lorsque le langage fournit une syntaxe très pratique pour le découpage.
Le découpage est pratique et extrêmement utile, et il n'y a aucune raison de ne pas l'utiliser. Ce n'est pas non plus du sucre syntaxique qui nuit aux performances, car il crée des copies superficielles du tableau/de la chaîne d'origine. Pour les développeurs JavaScript, je recommande fortement de se familiariser avec slice() et de l'ajouter à votre arsenal !
splice()
La méthode splice() ressemble à une cousine de slice(), et à certains égards, nous pouvons dire que c'est le cas. Les deux créent de nouveaux tableaux/chaînes à partir des originaux, avec une petite mais importante différence : splice() supprime, modifie ou ajoute des éléments, mais modifie le tableau d'origine. Cette "destruction" du tableau d'origine peut créer d'énormes problèmes si vous ne faites pas attention ou si vous ne comprenez pas les copies et les références en profondeur. Je me demande ce qui empêchait les développeurs d'utiliser la même approche que pour slice() et de laisser le tableau d'origine intact, mais je suppose que nous pouvons être plus indulgents envers un langage créé en seulement dix jours.
Malgré mes plaintes, examinons le fonctionnement de splice(). Je vais montrer un exemple où nous supprimons quelques éléments d'un tableau, car c'est l'utilisation la plus courante que vous rencontrerez pour cette méthode. Je m'abstiendrai également de donner des exemples d'ajout et d'insertion, car ils sont faciles à rechercher et sont également simples.
const items = ['œufs', 'lait', 'fromage', 'pain', 'beurre']; items.splice(2, 1); console.log(items); // [ 'œufs', 'lait', 'pain', 'beurre' ]
L'appel à splice() ci-dessus indique : commencez à l'index 2 (la troisième position, c'est-à-dire) du tableau et supprimez un élément. Dans le tableau donné, "fromage" est le troisième élément, il est donc supprimé du tableau et le tableau d'éléments est raccourci, comme prévu. Soit dit en passant, les éléments supprimés sont renvoyés par splice() sous la forme ou dans un tableau, donc si nous le voulions, nous aurions pu capturer "fromage" dans une variable.
D'après mon expérience, indexOf() et splice() ont une grande synergie : nous trouvons l'index d'un élément, puis nous le supprimons du tableau donné. Cependant, notez que ce n'est pas toujours la méthode la plus efficace, et que souvent, l'utilisation d'un objet (l'équivalent d'une table de hachage) est beaucoup plus rapide.
shift()
shift() est une sorte de méthode pratique qui est utilisée pour supprimer le premier élément d'un tableau. Notez que la même chose peut être faite avec splice(), mais shift() est un peu plus facile à retenir et intuitive lorsque tout ce que vous avez à faire est de supprimer le premier élément.
const items = ['œufs', 'lait', 'fromage', 'pain', 'beurre']; items.shift() console.log(items); // [ 'lait', 'fromage', 'pain', 'beurre' ]
unshift()
Tout comme shift() supprime le premier élément d'un tableau, unshift() ajoute un nouvel élément au début du tableau. Son utilisation est tout aussi simple et concise :
const items = ['œufs', 'lait'];
items.unshift('pain')
console.log(items); // [ 'pain', 'œufs', 'lait' ]
Cela dit, je ne peux pas m'empêcher d'avertir les nouveaux venus dans le domaine : contrairement aux méthodes populaires push() et pop(), shift() et unshift() sont extrêmement inefficaces (en raison du fonctionnement des algorithmes sous-jacents). Ainsi, si vous travaillez sur de grands tableaux (par exemple, plus de 2 000 éléments), un trop grand nombre de ces appels de fonction peut paralyser votre application.
fill()
Parfois, vous devez modifier plusieurs éléments en une seule valeur ou même "réinitialiser" l'ensemble du tableau, pour ainsi dire. Dans ces situations, fill() vous évite les boucles et les erreurs ponctuelles. Il peut être utilisé pour remplacer tout ou partie du tableau par la valeur donnée. Examinons quelques exemples :
const heights = [1, 2, 4, 5, 6, 7, 1, 1]; heights.fill(0); console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0] const heights2 = [1, 2, 4, 5, 6, 7, 1, 1]; heights2.fill(0, 4); console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]
Autres fonctions à mentionner
Bien que la liste ci-dessus représente ce que la plupart des développeurs JavaScript finissent par rencontrer et utiliser dans leur carrière, elle n'est en aucun cas exhaustive. Il existe de nombreuses autres fonctions (méthodes) mineures mais utiles en JavaScript qu'il ne serait pas possible de toutes les présenter dans un seul article. Cela dit, voici quelques-unes de celles qui me viennent à l'esprit :
- reverse()
- sort()
- entries()
- fill()
- find()
- flat()
Je vous encourage à au moins les rechercher afin d'avoir une idée de l'existence de telles commodités.
Conclusion
JavaScript est un langage étendu, malgré le petit nombre de concepts de base à apprendre. Les nombreuses fonctions (méthodes) dont nous disposons constituent l'essentiel de cette ampleur. Cependant, étant donné que JavaScript est un langage secondaire pour la plupart des développeurs, nous n'approfondissons pas assez et nous passons à côté de nombreuses fonctions magnifiques et utiles qu'il offre. En fait, il en va de même pour les concepts de programmation fonctionnelle, mais c'est un sujet pour un autre jour ! 😅
Chaque fois que vous le pouvez, consacrez du temps à explorer le langage de base (et si possible, les célèbres bibliothèques utilitaires telles que <a href="https://