En utilisant divers conseils JavaScript et raccourcis de syntaxe, ces fonctions vous aideront à résoudre de nombreux problèmes courants.

JavaScript est le langage de facto pour la création d'applications Web et mobiles modernes. Il alimente un large éventail de projets, des sites Web simples aux applications dynamiques et interactives.

Pour créer des produits que les utilisateurs aimeront et apprécieront, il est essentiel que vous écriviez un code qui soit non seulement fonctionnel mais aussi efficace et facile à entretenir. Un code JavaScript propre est essentiel au succès de toute application Web ou mobile, qu'il s'agisse d'un projet secondaire de loisir ou d'une application commerciale complexe.

Qu'y a-t-il de si bon dans les fonctions JavaScript?

Une fonction est un composant essentiel pour écrire du code dans n'importe quelle application. Il définit un morceau de code réutilisable que vous pouvez invoquer pour effectuer une tâche spécifique.

Au-delà de leur réutilisabilité, les fonctions sont très polyvalentes. À long terme, ils simplifient le processus de mise à l'échelle et de maintenance d'une base de code. Par

instagram viewer
créer et utiliser les fonctions de JavaScript, vous pouvez économiser beaucoup de temps de développement.

Voici quelques fonctions JavaScript utiles qui peuvent améliorer considérablement la qualité du code de votre projet.

1. une fois

Cette fonction once d'ordre supérieur encapsule une autre fonction pour vous assurer que vous ne pouvez l'appeler qu'une seule fois. Il doit ignorer silencieusement les tentatives ultérieures d'appel de la fonction résultante.

Considérez une situation dans laquelle vous souhaitez effectuer des requêtes d'API HTTP pour extraire des données d'une base de données. Vous pouvez joindre le une fois fonctionner comme un rappel pour une fonction d'écoute d'événement, de sorte qu'il se déclenche une fois, et pas plus.

Voici comment définir une telle fonction :

constante une fois = (fonction) => {
laisser résultat;
laisser foncCalled = FAUX;
retour(...arguments) => {
si (!fonctionCalled) {
 result = func(...args);
 foncCalled = vrai;
 }
retour résultat;
 };
};

La fonction once prend une fonction comme argument et renvoie une nouvelle fonction que vous ne pouvez appeler qu'une seule fois. Lorsque vous appelez la nouvelle fonction pour la première fois, elle exécute la fonction d'origine avec les arguments donnés et enregistre le résultat.

Tous les appels ultérieurs à la nouvelle fonction renvoient le résultat enregistré sans exécuter à nouveau la fonction d'origine. Jetez un oeil à la mise en œuvre ci-dessous:

// Définit une fonction pour récupérer les données de la BD
fonctiongetUserData() {
// ...
}
// obtient une version de la fonction getUserData qui ne peut s'exécuter qu'une seule fois
constante makeHTTPRequestOnlyOnce = une fois (getUserData);
constante userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("Cliquez sur", makeHTTPRequestOnlyOnce);

En utilisant la fonction once, vous pouvez garantir que le code n'envoie qu'une seule demande, même si l'utilisateur clique plusieurs fois sur le bouton. Cela évite les problèmes de performances et les bogues pouvant résulter de requêtes redondantes.

2. tuyau

Cette fonction de canal vous permet d'enchaîner plusieurs fonctions dans une séquence. Les fonctions de la séquence prendront le résultat de la fonction précédente comme entrée et la dernière fonction de la séquence calculera le résultat final.

Voici un exemple en code :

// Définir la fonction pipe
constante tuyau = (...fonctions) => {
retour(argument) => {
 funcs.forEach(fonction(fonction) {
 arg = fonction (arg);
 });
retour argument ;
 }
}


// Définir quelques fonctions
constante addOne = (un) => un + 1;
constante doublé = (X) => X * 2;
constante carré = (X) => x * x;


// Crée un tube avec les fonctions
constante myPipe = pipe (addOne, double, square);
// Teste le tube avec une valeur d'entrée
console.log (monPipe(2)); // Sortie: 36

Les fonctions de canal peuvent améliorer la lisibilité et la modularité du code en vous permettant d'écrire une logique de traitement complexe de manière concise. Cela peut rendre votre code plus compréhensible et plus facile à maintenir.

3. carte

La fonction map est une méthode de la classe JavaScript Array intégrée. Il crée un nouveau tableau en appliquant une fonction de rappel à chaque élément du tableau d'origine.

Il parcourt chaque élément du tableau d'entrée, le transmet comme entrée à la fonction de rappel et insère chaque résultat dans un nouveau tableau.

Ce qu'il est important de noter, c'est que le tableau d'origine n'est en aucune façon modifié tout au long de ce processus.

Voici un exemple d'utilisation carte:

constante nombres = [1, 2, 3, 4, 5];
constante nombresdoublés = nombres.map(fonction(nombre) {
retour nombre * 2;
});
console.log (doubledNumbers);
// Sortie: [2, 4, 6, 8, 10]

Dans cet exemple, la fonction map effectue une itération sur chaque élément du tableau de nombres. Il multiplie chaque élément par 2 et renvoie les résultats dans un nouveau tableau.

Généralement, les fonctions cartographiques éliminent le besoin de utiliser des boucles en JavaScript, en particulier les boucles infinies: les boucles infinies peuvent entraîner une surcharge de calcul importante, entraînant des problèmes de performances dans une application. Cela rend la base de code plus concise et moins sujette aux erreurs.

4. prendre

Cette fonction de sélection vous permet d'extraire de manière sélective des propriétés spécifiques d'un objet existant et de générer un nouvel objet avec ces propriétés à la suite du calcul.

Par exemple, considérez une fonctionnalité de rapports dans une application, en utilisant la fonction de sélection, vous pouvez personnaliser sans effort différents rapports basés sur les informations utilisateur souhaitées en spécifiant explicitement les propriétés que vous souhaitez inclure dans divers rapports.

Voici un exemple dans le code :

constante choisir = (objet,... touches) => {
retour keys.reduce((résultat, clé) => {
si (object.hasOwnProperty (clé)) {
 résultat[clé] = objet[clé] ;
 }
retour résultat;
 }, {});
};

La fonction pick prend un objet et n'importe quel nombre de clés comme arguments. Les clés représentent les propriétés que vous souhaitez sélectionner. Il renvoie ensuite un nouvel objet qui contient uniquement les propriétés de l'objet d'origine avec les clés correspondantes.

constante utilisateur = {
 nom: 'Martin',
 âge: 30,
 e-mail: '[email protected]',
};
console.log (choisir (utilisateur, 'nom', 'âge'));
// Sortie: { nom: 'Martin', âge: 30 }

Essentiellement, une fonction de sélection peut encapsuler une logique de filtrage complexe dans une seule fonction, ce qui rend le code plus facile à comprendre et à déboguer.

Cela peut également favoriser la réutilisation du code, puisque vous pouvez réutiliser la fonction de sélection dans votre base de code, réduisant ainsi la duplication de code.

5. zipper

Cette fonction zip combine des tableaux en un seul tableau de tuples, correspondant aux éléments correspondants de chaque tableau d'entrée.

Voici un exemple d'implémentation d'une fonction zip :

fonctionzipper(...des tableaux) {
constante longueurmax = Mathématiques.min(...tableaux.map(déployer => tableau.longueur));
retourDéployer.depuis(
 { longueur: longueur maximale },
 (_, indice) => tableaux.map(déployer => tableau[index])
 );
};


constante un = [1, 2, 3];
constante b = ['un', 'b', 'c'];
constante c = [vrai, FAUX, vrai];
console.log (zip (a, b, c));
// Sortie: [[1, 'a', vrai], [2, 'b', faux], [3, 'c', vrai]]

La fonction zip accepte les tableaux d'entrée et calcule leur plus grande longueur. Il crée et renvoie ensuite un tableau unique à l'aide de la méthode JavaScript Array.from. Ce nouveau tableau contient des éléments de chaque tableau d'entrée.

Ceci est particulièrement utile si vous avez besoin de combiner instantanément des données provenant de plusieurs sources, ce qui vous évite d'avoir à écrire du code redondant qui, autrement, encombrerait votre base de code.

Travailler avec des fonctions JavaScript dans votre code

Les fonctions JavaScript améliorent considérablement la qualité de votre code en fournissant un moyen simplifié et compact de gérer une grande partie de la logique de programmation pour les petites et les grandes bases de code. En comprenant et en utilisant ces fonctions, vous pouvez écrire des applications plus efficaces, lisibles et maintenables.

L'écriture d'un bon code permet de créer des produits qui non seulement résolvent un problème particulier pour les utilisateurs finaux, mais le font d'une manière facile à modifier.