5 funzioni JavaScript avanzate che puoi utilizzare per migliorare la qualità del tuo codice

JavaScript è il linguaggio de facto per la creazione di moderne applicazioni Web e mobili. Alimenta un'ampia gamma di progetti, da semplici siti Web ad app dinamiche e interattive.

Per creare prodotti che gli utenti adoreranno e apprezzeranno, è essenziale scrivere un codice che non sia solo funzionale ma anche efficiente e di facile manutenzione. Il codice JavaScript pulito è vitale per il successo di qualsiasi app Web o mobile, che si tratti di un progetto secondario per hobby o di un'applicazione commerciale complessa.

Cosa c'è di così buono nelle funzioni JavaScript?

Una funzione è un componente essenziale per la scrittura del codice di qualsiasi applicazione. Definisce un blocco di codice riutilizzabile che puoi richiamare per eseguire un'attività specifica.

Oltre alla loro riutilizzabilità, le funzioni sono altamente versatili. A lungo termine, semplificano il processo di ridimensionamento e mantenimento di una base di codice. Di

creare e utilizzare le funzioni di JavaScript, puoi risparmiare molto tempo di sviluppo.

Ecco alcune utili funzioni JavaScript che possono migliorare significativamente la qualità del codice del tuo progetto.

1. una volta

Questa funzione once di ordine superiore esegue il wrapping di un'altra funzione per garantire che tu possa chiamarla solo una volta. Dovrebbe ignorare silenziosamente i successivi tentativi di chiamare la funzione risultante.

Considera una situazione in cui desideri effettuare richieste API HTTP per recuperare dati da un database. Puoi allegare il una volta funzione come callback per una funzione listener di eventi, in modo che si attivi una volta e non di più.

Ecco come si potrebbe definire tale funzione:

cost una volta = (funz) => {
permettere risultato;
permettere funcCalled = falso;
ritorno(...arg) => {
Se (!funcChiamata) {
 risultato = func(...args);
 funcCalled = VERO;
 }
ritorno risultato;
 };
};

La funzione once prende una funzione come argomento e restituisce una nuova funzione che puoi chiamare solo una volta. Quando chiami la nuova funzione per la prima volta, esegue la funzione originale con gli argomenti dati e salva il risultato.

Eventuali chiamate successive alla nuova funzione restituiscono il risultato salvato senza eseguire nuovamente la funzione originale. Dai un'occhiata all'implementazione qui sotto:

// Definire una funzione per recuperare i dati dal DB
funzionegetUserData() {
// ...
}
// ottiene una versione della funzione getUserData che può essere eseguita solo una volta
cost makeHTTPRequestOnlyOnce = una volta (getUserData);
cost userDataBtn = documento.querySelector("#btn");
userDataBtn.addEventListener("clic", makeHTTPRequestOnlyOnce);

Utilizzando la funzione once puoi garantire che il codice invii solo una richiesta, anche se l'utente fa clic sul pulsante più volte. Ciò evita problemi di prestazioni e bug che possono derivare da richieste ridondanti.

2. tubo

Questa funzione pipe consente di concatenare più funzioni insieme in una sequenza. Le funzioni nella sequenza prenderanno il risultato della funzione precedente come input e l'ultima funzione nella sequenza calcolerà il risultato finale.

Ecco un esempio nel codice:

// Definisce la funzione pipe
cost pipa = (...funz) => {
ritorno(arg) => {
 funcs.forEach(funzione(funz) {
 arg = funzione (arg);
 });
ritorno arg;
 }
}
// Definire alcune funzioni
cost addUno = (UN) => un + 1;
cost doppio = (X) => X * 2;
cost quadrato = (X) => x*x;
// Crea una pipe con le funzioni
cost myPipe = pipe (addOne, double, square);
// Testare la pipe con un valore di input
consolare.log (miaPipa(2)); // Uscita: 36

Le funzioni pipe possono migliorare la leggibilità e la modularità del codice consentendo di scrivere una logica di elaborazione complessa in modo conciso. Questo può rendere il tuo codice più comprensibile e più facile da mantenere.

3. carta geografica

La funzione map è un metodo della classe Array JavaScript incorporata. Crea un nuovo array applicando una funzione di callback a ciascun elemento dell'array originale.

Esegue il ciclo di ogni elemento nell'array di input, lo passa come input alla funzione di callback e inserisce ogni risultato in un nuovo array.

Ciò che è importante notare è che l'array originale non viene modificato in alcun modo durante questo processo.

Ecco un esempio di come utilizzare carta geografica:

cost numeri = [1, 2, 3, 4, 5];
cost numeri raddoppiati = numeri.map(funzione(numero) {
ritorno numero * 2;
});
consolare.log (Numeri raddoppiati);
// Uscita: [2, 4, 6, 8, 10]

In questo esempio, la funzione map itera su ciascun elemento nell'array dei numeri. Moltiplica ogni elemento per 2 e restituisce i risultati in un nuovo array.

In generale, le funzioni della mappa eliminano la necessità di utilizzando i loop in JavaScript, in particolare quelli infiniti: i cicli infiniti possono causare un sovraccarico computazionale significativo, portando a problemi di prestazioni in un'applicazione. Ciò rende la base di codice più concisa e meno soggetta a errori.

4. scegliere

Questa funzione pick consente di estrarre in modo selettivo proprietà specifiche da un oggetto esistente e generare un nuovo oggetto con tali proprietà come risultato del calcolo.

Ad esempio, considera una funzionalità di report in un'applicazione, utilizzando la funzione di selezione, puoi personalizzare senza sforzo report diversi in base alle informazioni utente desiderate specificando esplicitamente le proprietà che si desidera includere in vari rapporti.

Ecco un esempio nel codice:

cost scegliere = (oggetto, ...chiavi) => {
ritorno keys.reduce((risultato, chiave) => {
Se (oggetto.hasOwnProperty (chiave)) {
 risultato[chiave] = oggetto[chiave];
 }
ritorno risultato;
 }, {});
};

La funzione pick accetta un oggetto e un numero qualsiasi di chiavi come argomenti. Le chiavi rappresentano le proprietà che si desidera selezionare. Quindi restituisce un nuovo oggetto che contiene solo le proprietà dell'oggetto originale con le chiavi corrispondenti.

cost utente = {
 nome: 'Martino',
 età: 30,
 e-mail: '[email protected]',
};
consolare.log (scegli (utente, 'nome', 'età'));
// Output: { nome: 'Martin', età: 30 }

Essenzialmente, una funzione pick può incapsulare una complessa logica di filtraggio in una singola funzione, rendendo il codice più facile da comprendere e da eseguire il debug.

Può anche promuovere la riusabilità del codice, poiché è possibile riutilizzare la funzione di selezione in tutta la base di codice, riducendo la duplicazione del codice.

5. cerniera lampo

Questa funzione zip combina gli array in un singolo array di tuple, facendo corrispondere gli elementi corrispondenti di ciascun array di input.

Ecco un esempio di implementazione di una funzione zip:

funzionecerniera lampo(...array) {
cost lunghezza massima = Matematica.min(...array.map(vettore => matrice.lunghezza));
ritornoVettore.da(
 { lunghezza: lunghezza massima },
 (_, indice) => array.map(vettore => matrice[indice])
 );
};
cost un = [1, 2, 3];
cost b = ['UN', 'B', 'C'];
cost c = [VERO, falso, VERO];
consolare.log (zip (a, b, c));
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

La funzione zip accetta gli array di input e calcola la loro lunghezza massima. Quindi crea e restituisce un singolo array utilizzando il metodo Array.from JavaScript. Questo nuovo array contiene elementi di ogni array di input.

Ciò è particolarmente utile se è necessario combinare istantaneamente i dati da più fonti, eliminando la necessità di scrivere codice ridondante che altrimenti ingombrerebbe la base di codice.

Lavorare con le funzioni JavaScript nel tuo codice

Le funzioni JavaScript migliorano notevolmente la qualità del codice fornendo un modo semplificato e compatto per gestire gran parte della logica di programmazione per basi di codice piccole e grandi. Comprendendo e utilizzando queste funzioni, è possibile scrivere applicazioni più efficienti, leggibili e gestibili.

Scrivere un buon codice rende possibile creare prodotti che non solo risolvono un particolare problema per gli utenti finali, ma lo fanno in un modo facile da modificare.