5 avanserte JavaScript-funksjoner du kan bruke for å forbedre kvaliteten på koden din

JavaScript er de facto-språket for å bygge moderne nett- og mobilapplikasjoner. Den driver et bredt spekter av prosjekter, fra enkle nettsteder til dynamiske, interaktive apper.

For å lage produkter som brukere vil elske og sette pris på, er det viktig at du skriver kode som ikke bare er funksjonell, men også effektiv og enkel å vedlikeholde. Ren JavaScript-kode er avgjørende for suksessen til enhver nett- eller mobilapp, enten det er et hobbyprosjekt eller en kompleks kommersiell applikasjon.

Hva er så bra med JavaScript-funksjoner?

En funksjon er en viktig komponent for å skrive kode til enhver applikasjon. Den definerer en del av gjenbrukbar kode som du kan påkalle for å utføre en spesifikk oppgave.

Utover gjenbrukbarheten er funksjonene svært allsidige. I det lange løp forenkler de prosessen med å skalere og vedlikeholde en kodebase. Av opprette og bruke JavaScripts funksjoner, kan du spare mye utviklingstid.

Her er noen nyttige JavaScript-funksjoner som kan forbedre kvaliteten på prosjektets kode betraktelig.

1. en gang

Denne engangsfunksjonen av høyere orden omslutter en annen funksjon for å sikre at du bare kan kalle den én gang. Den skal stille ignorere påfølgende forsøk på å kalle opp den resulterende funksjonen.

Tenk på en situasjon der du ønsker å gjøre HTTP API-forespørsler for å hente data fra en database. Du kan legge ved en gang fungere som tilbakeringing for en hendelseslytterfunksjon, slik at den utløses én gang, og ikke mer.

Slik kan du definere en slik funksjon:

konst en gang = (func) => {
la resultat;
la funcCalled = falsk;
komme tilbake(...args) => {
hvis (!funcCalled) {
 resultat = func(...args);
 funcCalled = ekte;
 }
komme tilbake resultat;
 };
};

En gang-funksjonen tar en funksjon som et argument og returnerer en ny funksjon som du bare kan kalle én gang. Når du kaller den nye funksjonen for første gang, kjører den den opprinnelige funksjonen med de gitte argumentene og lagrer resultatet.

Eventuelle påfølgende kall til den nye funksjonen returnerer det lagrede resultatet uten å kjøre den opprinnelige funksjonen igjen. Ta en titt på implementeringen nedenfor:

// Definer en funksjon for å hente data fra DB
funksjongetUserData() {
// ...
}
// få en versjon av getUserData-funksjonen som bare kan kjøres én gang
konst makeHTTPRequestOnlyOnce = én gang (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klikk", makeHTTPRequestOnlyOnce);

Ved å bruke én gang-funksjonen kan du garantere at koden bare sender én forespørsel, selv om brukeren klikker på knappen flere ganger. Dette unngår ytelsesproblemer og feil som kan oppstå fra overflødige forespørsler.

2. rør

Denne rørfunksjonen lar deg lenke flere funksjoner sammen i en sekvens. Funksjonene i sekvensen vil ta resultatet av den foregående funksjonen som inngang, og den siste funksjonen i sekvensen vil beregne det endelige resultatet.

Her er et eksempel i kode:

// Definer rørfunksjonen
konst rør = (...funksjoner) => {
komme tilbake(arg) => {
 funcs.forEach(funksjon(func) {
 arg = func (arg);
 });
komme tilbake arg;
 }
}
// Definer noen funksjoner
konst addOne = (en) => et + 1;
konst dobbelt = (x) => x * 2;
konst kvadrat = (x) => x * x;
// Lag et rør med funksjonene
konst myPipe = pipe (legg tilEn, dobbel, firkantet);
// Test røret med en inngangsverdi
konsoll.log (myPipe(2)); // Utgang: 36

Rørfunksjoner kan forbedre lesbarheten og modulariteten til kode ved å la deg skrive kompleks prosesseringslogikk kortfattet. Dette kan gjøre koden din mer forståelig og enklere å vedlikeholde.

3. kart

Kartfunksjonen er en metode for den innebygde JavaScript Array-klassen. Den oppretter en ny matrise ved å bruke en tilbakeringingsfunksjon på hvert element i den originale matrisen.

Den går gjennom hvert element i inngangsmatrisen, sender det som en input til tilbakeringingsfunksjonen, og setter inn hvert resultat i en ny matrise.

Det som er viktig å merke seg er at den originale matrisen ikke endres på noen måte gjennom denne prosessen.

Her er et eksempel på hvordan du bruker kart:

konst tall = [1, 2, 3, 4, 5];
konst doubledNumbers = tall.kart(funksjon(Antall) {
komme tilbake Antall * 2;
});
konsoll.log (dobletall);
// Utdata: [2, 4, 6, 8, 10]

I dette eksemplet itererer kartfunksjonen over hvert element i tallmatrisen. Den multipliserer hvert element med 2 og returnerer resultatene i en ny matrise.

Generelt eliminerer kartfunksjoner behovet for ved hjelp av løkker i JavaScript, spesielt uendelige – uendelige løkker kan forårsake betydelige beregningsmessige overhead, noe som fører til ytelsesproblemer i en applikasjon. Dette gjør kodebasen mer kortfattet og mindre utsatt for feil.

4. plukke

Denne valgfunksjonen lar deg selektivt trekke ut spesifikke egenskaper fra et eksisterende objekt og generere et nytt objekt med disse egenskapene som et resultat av beregningen.

Vurder for eksempel en rapportfunksjon i en applikasjon, ved å bruke plukkefunksjonen kan du enkelt tilpasse ulike rapporter basert på ønsket brukerinformasjon ved å eksplisitt spesifisere egenskapene som du ønsker å inkludere i ulike rapporter.

Her er et eksempel i kode:

konst velg = (objekt, ...nøkler) => {
komme tilbake keys.reduce((resultat, nøkkel) => {
hvis (object.hasOwnProperty (nøkkel)) {
 resultat[nøkkel] = objekt[nøkkel];
 }
komme tilbake resultat;
 }, {});
};

Plukkfunksjonen tar et objekt og et hvilket som helst antall nøkler som argumenter. Nøklene representerer egenskapene du vil velge. Den returnerer deretter et nytt objekt som bare inneholder egenskapene til det opprinnelige objektet med matchende nøkler.

konst bruker = {
 Navn: 'Martin',
 alder: 30,
 e-post: '[email protected]',
};
konsoll.log (velg (bruker, 'Navn', 'alder'));
// Utdata: { navn: 'Martin', alder: 30 }

I hovedsak kan en plukkefunksjon kapsle inn kompleks filtreringslogikk i en enkelt funksjon, noe som gjør koden lettere å forstå og feilsøke.

Det kan også fremme gjenbruk av kode, siden du kan gjenbruke plukkefunksjonen gjennom hele kodebasen, og redusere kodeduplisering.

5. glidelås

Denne zip-funksjonen kombinerer arrays til en enkelt rekke tuples, som matcher tilsvarende elementer fra hver inngangsarray.

Her er et eksempel på implementering av en zip-funksjon:

funksjonglidelås(...matriser) {
konst maxLength = Matte.min(...arrays.map(array => array.length));
komme tilbakeArray.fra(
 { lengde: maks lengde },
 (_, indeks) => arrays.map(array => array[indeks])
 );
};
konst a = [1, 2, 3];
konst b = ['en', 'b', 'c'];
konst c = [ekte, falsk, ekte];
konsoll.log (zip (a, b, c));
// Utdata: [[1, 'a', sann], [2, 'b', usann], [3, 'c', sann]]

Zip-funksjonen aksepterer inndatamatriser og beregner deres lengste lengde. Den oppretter og returnerer deretter en enkelt matrise ved å bruke Array.from JavaScript-metoden. Denne nye matrisen inneholder elementer fra hver inngangsmatrise.

Dette er spesielt nyttig hvis du trenger å kombinere data fra flere kilder umiddelbart, og fjerner behovet for å skrive overflødig kode som ellers ville rotet kodebasen din.

Arbeide med JavaScript-funksjoner i koden din

JavaScript-funksjoner forbedrer kvaliteten på koden din betydelig ved å tilby en forenklet og kompakt måte å håndtere mye av programmeringslogikken for både små og store kodebaser. Ved å forstå og bruke disse funksjonene kan du skrive mer effektive, lesbare og vedlikeholdbare applikasjoner.

Å skrive god kode gjør det mulig å bygge produkter som ikke bare løser et bestemt problem for sluttbrukere, men som gjør det på en måte som er enkel å modifisere.