Top 11 (e altro ancora!) Funzioni JavaScript da conoscere

di

Codice intelligente! Diventa uno sviluppatore JavaScript più veloce, più produttivo e più felice padroneggiando queste funzioni più importanti e ricorrenti nella lingua.

Che si tratti di backend o frontend (o anche astronavi), JavaScript è ovunque. È anche un linguaggio abbastanza flessibile (il che significa che ha modelli di programmazione funzionale hardcore e buone vecchie classi) e la sua somiglianza con altri linguaggi “simil-C” rende facile la transizione per gli sviluppatori di altri linguaggi.

Se lo desidera fai salire di livello il tuo gioco JS, ti suggerisco di conoscere, esercitarti e infine padroneggiare le seguenti funzioni di base disponibili nella lingua. Non tutti questi sono strettamente “necessari” per risolvere i problemi, ma in alcuni casi possono fare molto lavoro pesante per te, mentre in altri possono ridurre la quantità di codice che devi scrivere.

carta geografica()

Sarebbe un’eresia scrivere un articolo su importanti funzioni JavaScript e non menzionare map()! 😆😆 Insieme a filter() e reduce(), map() forma una sorta di santissima trinità. Queste sono funzioni che utilizzerai più e più volte nella tua carriera, quindi vale la pena dare un’occhiata. Affrontiamoli uno per uno, iniziando con map().

map() è tra quelle funzioni che danno più problemi alle persone che imparano JavaScript. Come mai? Non perché ci sia qualcosa di intrinsecamente complesso, ma perché il modo in cui funziona questa funzione è un’idea presa da quella che viene chiamata Programmazione Funzionale. E dal momento che non siamo esposti alla programmazione funzionale – le nostre scuole e l’industria sono piene di linguaggi orientati agli oggetti – il funzionamento sembra strano o addirittura sbagliato ai nostri cervelli prevenuti.

JavaScript è molto più funzionale di Object-oriented, sebbene le sue versioni moderne stiano facendo del loro meglio per nascondere questo fatto. Ma è un intero barattolo di vermi che potrei aprire forse un altro giorno. 🤣 Ok, quindi, map() . . .

map() è una funzione molto semplice; si attacca a un array e ci aiuta a convertire ogni elemento in qualcos’altro, risultando in un nuovo array. Come esattamente convertire un elemento viene fornito come un’altra funzione, che per convenzione è anonima.

Questo è tutto quello che c’è da fare! La sintassi potrebbe richiedere un po’ di tempo per abituarsi, ma essenzialmente è quello che stiamo facendo in una funzione map(). Perché potremmo voler usare map()? Dipende da cosa stiamo cercando di ottenere. Ad esempio, supponiamo di aver registrato la temperatura per ogni giorno dell’ultima settimana e di averla memorizzata come un semplice array. Tuttavia, ora ci viene detto che gli strumenti non erano molto precisi e hanno riportato 1,5 gradi in meno di temperatura rispetto a quanto avrebbero dovuto.

Possiamo fare questa correzione usando la funzione map() in questo modo:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);

console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]

Un altro esempio molto pratico viene dal mondo di React, dove la creazione di elenchi di elementi DOM da array è un modello comune; quindi, qualcosa del genere è comune:

export default ({ products }) => {
    return products.map(product => {
        return (
            <div className="product" key={product.id}>
                <div className="p-name">{product.name}</div>
                <div className="p-desc">{product.description}</div>
            </div>
        );
    });
};

Qui abbiamo un componente React funzionale che riceve un elenco di prodotti come oggetti di scena. Da questo elenco (array), crea quindi un elenco di “div” HTML, convertendo essenzialmente ogni oggetto prodotto in HTML. L’oggetto originale dei prodotti rimane intatto.

Puoi sostenere che map() non è altro che un ciclo for glorificato e avresti perfettamente ragione. Ma nota che non appena fai questa argomentazione, è la tua mente addestrata orientata agli oggetti che sta parlando, mentre queste funzioni e la loro logica provengono dalla Programmazione Funzionale, dove l’uniformità, la compattezza e l’eleganza sono molto apprezzate. 🙂

filtro()

filter() è una funzione molto utile che ti ritroverai ad applicare più e più volte in molte situazioni. Come suggerisce il nome, questa funzione filtra un array in base alle regole/logica fornite e restituisce un nuovo array contenente elementi che soddisfano tali regole.

Riutilizziamo il nostro esempio meteorologico. Supponiamo di avere un array contenente le temperature massime per ogni giorno della scorsa settimana; ora vogliamo scoprire quanti di quei giorni sono stati più freddi. Sì, “più freddo” è un termine soggettivo, quindi diciamo che stiamo cercando giorni in cui la temperatura era inferiore a 20. Possiamo farlo usando la funzione filter() in questo modo:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total colder days in week were: " + colderDays.length); // 1

Nota che la funzione anonima che passiamo a filter() deve restituire un valore booleano: vero o falso. Questo è il modo in cui filter() saprà se includere o meno quell’elemento nell’array filtrato. Sei libero di scrivere qualsiasi quantità di logica complessa all’interno di questa funzione anonima; puoi effettuare chiamate API e leggere gli input dell’utente e così via, purché ti assicuri che alla fine restituirai un valore booleano.

Attenzione: questa è una nota a margine che mi sento obbligato a fornire in base alla mia esperienza come sviluppatore JavaScript. Che sia dovuto a trascuratezza o fondamenti errati, molti programmatori creano piccoli bug nei loro programmi quando usano filter(). Riscriviamo il codice precedente per contenere il bug:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

if(colderDays) {
    console.log("Yes, there were colder days last week");
} else {
    console.log("No, there were no colder days");
}

Notare qualcosa? Ottimo lavoro se lo facessi! La condizione if verso la fine controlla colderDays, che in realtà è un array! Sarai sorpreso di quante volte le persone commettano questo errore mentre corrono per rispettare le scadenze o programmare di buon umore (per qualsiasi motivo). Il problema con questa condizione è che JavaScript è un linguaggio strano e incoerente in molti modi, e la “verità” delle cose è uno di questi. Mentre [] == true restituisce false, facendoti pensare che il codice precedente non sia rotto, la realtà è che all’interno di una condizione if, [] valuta true! In altre parole, il codice che abbiamo scritto non dirà mai che non ci sono stati giorni più freddi la scorsa settimana.

La correzione è molto semplice, come indicato nel codice precedente al codice precedente. Controlliamo colderDays.length, che è garantito per darci un numero intero (zero o superiore) e quindi funzionare in modo coerente nei confronti logici. Nota che filter() restituirà sempre, sempre, sempre un array, vuoto o non vuoto, quindi possiamo fare affidamento su questo e scrivere i nostri confronti logici con sicurezza.

È stata una deviazione più lunga di quanto avessi pianificato, ma vale la pena evidenziare bug come questo in diecimila parole, tutte maiuscole se necessario. Spero che tu non venga morso da questo e ti risparmi centinaia di ore di sforzi di debug! 🙂

ridurre()

Di tutte le funzioni in questo articolo, così come nella libreria JavaScript standard, reduce() è tra le prime per le corone di “confuso e strano”. Sebbene questa funzione sia molto importante e si traduca in un codice elegante in molte situazioni, viene evitata dalla maggior parte degli sviluppatori JavaScript e preferiscono invece scrivere codice più dettagliato.

Il motivo è che – e sarò onesto qui! — reduce() è difficile da capire, sia nel senso del concetto che dell’esecuzione. Quando leggi la sua descrizione, l’hai riletto più volte e ancora dubiti di aver letto male; e quando lo vedi in azione e provi a visualizzare come funziona, il tuo cervello si attorciglia in mille nodi! 🤭

Ora, non spaventarti. La funzione reduce() non è affatto vicina in complessità e intimidazione a, diciamo, B+ Alberi e i loro algoritmi. È solo che questo tipo di logica si incontra raramente durante il lavoro quotidiano del programmatore medio.

Quindi, dopo averti spaventato a morte e averti subito detto di non preoccuparti, vorrei finalmente mostrarti che cos’è questa funzione e perché potremmo averne bisogno.

Come suggerisce il nome, reduce() è usato per, beh, ridurre qualcosa. La cosa che riduce è un array e la cosa a cui riduce l’array dato è un singolo valore (numero, stringa, funzione, oggetto, qualunque cosa). Ecco un modo più semplice per dirlo: reduce() trasforma un array in un singolo valore. Si noti che il valore restituito da reduce() non è un array, come nel caso di map() e filter(). Aver capito questo è già metà della battaglia. 🙂

Ora, è abbastanza ovvio che se vogliamo trasformare (ridurre) un array, dobbiamo fornire la logica necessaria; e in base alla tua esperienza come sviluppatore JS, hai già indovinato che lo facciamo usando una funzione. Questa funzione è ciò che chiamiamo funzione reducer, che costituisce il primo argomento di reduce(). Il secondo argomento è un valore iniziale, come un numero, una stringa, ecc. (spiegherò tra poco cosa diavolo è questo “valore iniziale”).

Sulla base della nostra comprensione finora, possiamo dire che una chiamata a reduce() ha questo aspetto: array.reduce(reducerFunction, startingValue). Ora affrontiamo il cuore dell’intera faccenda: la funzione riduttore. Come già stabilito, la funzione reducer è ciò che dice a reduce() come convertire l’array in un singolo valore. Occorrono due argomenti: una variabile che funga da accumulatore (non preoccuparti, spiegherò anche questo bit) e una variabile per memorizzare il valore corrente.

Lo so, lo so . . . quella era molta terminologia per una singola funzione che non è nemmeno obbligatoria in JavaScript. 😝😝 Ed è per questo che le persone scappano da reduce(). Ma se lo impari passo dopo passo, non solo lo capirai, ma lo apprezzerai anche man mano che diventerai uno sviluppatore migliore.

Ok, quindi, torniamo all’argomento in questione. Il “valore iniziale” passato a reduce() è . . . bene, il valore iniziale per il calcolo che vuoi usare. Ad esempio, se hai intenzione di eseguire la moltiplicazione nella funzione di riduzione, un valore iniziale di 1 ha senso; inoltre, potresti iniziare con 0 e così via.

Ora diamo un’occhiata alla firma per la funzione riduttore. Una funzione reducer passata a reduce() ha la seguente forma: reducerFunction(accumulator, currentValue). “Accumulatore” è solo un nome di fantasia per la variabile che raccoglie e conserva il risultato del calcolo; è esattamente come usare una variabile chiamata total per sommare tutti gli elementi in un array usando qualcosa come total += arr[i]. Questo è esattamente il modo in cui viene applicata la funzione reducer in reduce(): l’accumulatore è inizialmente impostato sul valore iniziale fornito, quindi uno per uno gli elementi nell’array vengono visitati, il calcolo viene eseguito e il risultato viene memorizzato in l’accumulatore e così via. . .

Quindi, qual è questo “valore corrente” in una funzione di riduzione? È la stessa idea che immagineresti mentalmente se ti chiedessi di attraversare un array: prenderesti una variabile per iniziare dall’indice zero e spostarla in avanti di un passo alla volta. Mentre lo fai, se ti chiedo di fermarti improvvisamente, ti ritroveresti su uno degli elementi dell’array, giusto? Questo è ciò che intendiamo per valore corrente: è il valore della variabile utilizzata per rappresentare l’elemento dell’array attualmente in esame (si pensi al ciclo su un array se questo aiuta).

Detto questo, è tempo di vedere un semplice esempio e vedere come tutto questo gergo si riunisce in una vera e propria chiamata a reduce(). Diciamo che abbiamo un array contenente i primi n numeri naturali (1, 2, 3… n) e siamo interessati a trovare il fattoriale di n. Sappiamo che trovare n! abbiamo semplicemente bisogno di moltiplicare tutto, il che ci porta a questa implementazione:

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

Succedono molte cose in queste sole tre righe di codice, quindi scompattiamole una per una nel contesto della (molto lunga) discussione che abbiamo avuto fino ad ora. Come è ovvio, i numeri sono l’array che contiene tutti i numeri che vogliamo moltiplicare. Quindi, dai un’occhiata alla chiamata numbers.reduce(), che dice che il valore iniziale per acc dovrebbe essere 1 (poiché non influenza o distrugge alcuna moltiplicazione). Successivamente, controlla il corpo della funzione reducer, `(acc, item) => acc * item, che dice semplicemente che il valore restituito per ogni iterazione sull’array dovrebbe essere quell’elemento moltiplicato per quello che è già nell’accumulatore. L’iterazione e l’effettiva memorizzazione della moltiplicazione in modo esplicito nell’accumulatore è ciò che sta accadendo dietro le quinte ed è uno dei motivi principali per cui reduce() è un tale ostacolo per gli sviluppatori JavaScript.

Perché usare reduce()?

È davvero un’ottima domanda e, a dire il vero, non ho una risposta certa. Qualunque cosa reduce() faccia può essere fatta attraverso cicli, forEach(), ecc. Tuttavia, queste tecniche producono molto più codice, rendendo difficile la lettura, specialmente se sei di fretta. Poi c’è la preoccupazione per l’immutabilità: con reduce() e funzioni simili, puoi essere sicuro che i tuoi dati originali non sono stati mutati; questo di per sé elimina intere classi di bug, specialmente nelle applicazioni distribuite.

Infine, reduce() è molto più flessibile, nel senso che l’accumulatore può essere un oggetto, un array o anche una funzione se necessario; lo stesso vale per il valore iniziale e altre parti della chiamata di funzione: quasi tutto può entrare e quasi tutto può uscire, quindi c’è un’estrema flessibilità nella progettazione di codice riutilizzabile.

Se non sei ancora convinto, va benissimo anche questo; la stessa comunità JavaScript è nettamente divisa sulla “compattezza”, “eleganza” e “potenza” di reduce(), quindi va bene se non la usi. 🙂 Ma assicurati di guardarne alcuni esempi accurati prima di decidere di bin reduce().

alcuni()

Diciamo che hai una serie di oggetti, con ogni oggetto che rappresenta una persona. Vuoi sapere se ci sono persone nell’array che hanno più di 35 anni. Nota che non è necessario contare quante di queste persone sono, figuriamoci recuperarne un elenco. Quello che stiamo dicendo qui è l’equivalente di “uno o più” o “almeno uno”.

Come fai a fare questo?

Sì, puoi creare una variabile flag e ripetere l’array per risolvere questo problema in questo modo:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 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("Yup, there are a few people here!")
}

Il problema? Il codice è troppo simile a C o Java, secondo me. “Prolisso” è un’altra parola che mi viene in mente. JS esperto potrebbe pensare a “brutto”, “orribile”, ecc. 😝 E giustamente, direi. Un modo per migliorare questo pezzo di codice è utilizzare qualcosa come map(), ma anche in questo caso la soluzione è un po’ goffa.

Si scopre che abbiamo una funzione piuttosto ordinata chiamata some() già disponibile nel linguaggio principale. Questa funzione funziona con gli array e accetta una funzione di “filtro” personalizzata, restituendo un valore booleano vero o falso. Essenzialmente, sta facendo quello che abbiamo cercato di fare negli ultimi minuti, solo in modo molto succinto ed elegante. Ecco come possiamo usarlo:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

if(persons.some(person => {
    return person.age > 35
})) {
    console.log("Found some people!")
}

Stesso input, stesso risultato di prima; ma nota la massiccia riduzione del codice! Nota anche come si riduce drasticamente il carico cognitivo perché non abbiamo più bisogno di analizzare il codice riga per riga come se fossimo noi stessi l’interprete! Il codice ora si legge quasi come un linguaggio naturale.

ogni()

Proprio come some(), abbiamo un’altra utile funzione chiamata every(). Come puoi ormai intuire, anche questo restituisce un valore booleano a seconda che tutti gli elementi dell’array superino il test dato. Naturalmente, il test da superare viene fornito per la maggior parte del tempo come funzione anonima. Ti risparmierò il dolore di come potrebbe apparire una versione ingenua del codice, quindi ecco come viene utilizzato every():

const entries = [
    {
        id: 1
    },
    
    {
        id: 2
    },
    
    {
        id: 3  
    },
];

if(entries.every(entry => {
    return Number.isInteger(entry.id) && entry.id > 0;
})) {
    console.log("All the entries have a valid id")
}

Come è ovvio, il codice controlla tutti gli oggetti nell’array per una proprietà id valida. La definizione di “valido” dipende dal contesto del problema, ma come puoi vedere, per questo codice, ho considerato numeri interi non negativi. Ancora una volta, vediamo quanto sia semplice ed elegante il codice da leggere, che è l’unico scopo di questa (e simili) funzione/i.

include()

Come si verifica l’esistenza di sottostringhe ed elementi dell’array? Bene, se sei come me, raggiungi rapidamente indexOf() e poi cerchi i documenti per farti conoscere i suoi possibili valori di ritorno. È un notevole inconveniente ei valori restituiti sono difficili da ricordare (presto: cosa significa un processo che restituisce 2 al sistema operativo?).

Ma c’è una bella alternativa che possiamo utilizzare: includes(). L’utilizzo è semplice come il nome e il codice risultante è estremamente commovente. Tieni presente che la corrispondenza viene eseguita da includes() fa distinzione tra maiuscole e minuscole, ma immagino che sia ciò che tutti noi ci aspettiamo comunque. E ora, è tempo di un po’ di codice!

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected

Tuttavia, non aspettarti troppo da questo umile metodo:

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

Non può guardare all’interno degli oggetti poiché semplicemente non è definito per gli oggetti. Ma hey, sappiamo che funziona sugli array, quindi forse possiamo fare qualche trucco qui. . . 🤔.

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

Quindi, cosa succede quando esegui questo codice? Non esplode, ma anche l’output è deludente: falso. 😫😫 In realtà, questo ha a che fare con oggetti, puntatori e come JavaScript vede e gestisce la memoria, che è un mondo a sé stante. Se desideri immergerti più a fondo, sentiti libero di fare il grande passo (magari inizia qui), ma mi fermo qui.

Possiamo far funzionare il codice sopra se lo riscriviamo come segue, ma a questo punto diventa più o meno uno scherzo, secondo me:

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

Tuttavia, mostra che possiamo fare in modo che includes() funzioni sugli oggetti, quindi immagino che non sia un disastro totale. 😄

fetta()

Supponiamo di avere una stringa, e ti chiedo di restituirne una parte che inizia con “r” e finisce con “z” (i caratteri effettivi non sono importanti). Come ti avvicineresti? Forse creeresti una nuova stringa e la useresti per memorizzare tutti i caratteri necessari e restituirli. Oppure, se sei come la maggior parte dei programmatori, mi daresti in cambio due indici di array: uno che indica l’inizio della sottostringa, l’altro che segna la fine.

Entrambi questi approcci vanno bene, ma c’è un concetto chiamato slicing che offre una soluzione chiara in tali situazioni. Per fortuna, non c’è una teoria astrusa da seguire; affettare significa esattamente quello che sembra: creare una stringa/array più piccola da quella data, proprio come creiamo fette di frutta. Vediamo cosa intendo, con l’aiuto di un semplice esempio:

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been

Quando slice(), forniamo due indici a JavaScript: quello in cui vogliamo iniziare l’affettamento e l’altro in cui vogliamo che si fermi. Il trucco con slice() è che l’indice finale non è incluso nel risultato finale, motivo per cui vediamo che la parola “in attesa” manca nel nuovo titolo nel codice sopra.

Concetti come lo slicing sono più importanti in altri linguaggi, in particolare Python. Se chiedi a quegli sviluppatori, diranno che non possono immaginare la vita senza questa funzionalità, e giustamente quando il linguaggio fornisce una sintassi molto ordinata per l’affettatura.

L’affettatura è ordinata ed estremamente comoda e non c’è motivo per non usarla. Inoltre, non è zucchero di sintassi pieno di penalità prestazionali, poiché crea copie poco profonde dell’array/stringa originale. Per gli sviluppatori JavaScript, consiglio vivamente di familiarizzare con slice() e di aggiungerlo al proprio arsenale!

giunzione()

Il metodo splice() suona come un cugino di slice() e, per certi versi, possiamo affermare che lo è. Entrambi creano nuovi array/stringhe da quelli originali, con una piccola ma importante differenza: splice() rimuove, cambia o aggiunge elementi ma modifica l’array originale. Questa “distruzione” dell’array originale può creare enormi problemi se non si sta attenti o non si comprendono copie e riferimenti profondi. Mi chiedo cosa impedisse agli sviluppatori di utilizzare lo stesso approccio di slice() e lasciare intatto l’array originale, ma immagino che possiamo essere più indulgenti nei confronti di una lingua creato in soli dieci giorni.

Nonostante le mie lamentele, diamo un’occhiata a come funziona splice(). Mostrerò un esempio in cui rimuoviamo alcuni elementi da un array, poiché questo è l’uso più comune che troverai per questo metodo. Mi asterrò anche dal fornire esempi di addizione e inserimento perché questi possono essere facilmente consultati e sono anche semplici.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

La chiamata a splice() sopra dice: inizia dall’indice 2 (il terzo posto, cioè) dell’array e rimuovi un elemento. Nell’array dato, ‘cheese’ è il terzo elemento, quindi viene rimosso dall’array e l’array di elementi viene accorciato, come previsto. A proposito, gli elementi rimossi vengono restituiti da splice() nel form o in un array, quindi se lo volessimo, avremmo potuto catturare ‘cheese’ in una variabile.

Nella mia esperienza, indexOf() e splice() hanno una grande sinergia: troviamo l’indice di un elemento e poi lo rimuoviamo dall’array dato. Tuttavia, tieni presente che non è sempre il metodo più efficiente e spesso l’utilizzo di chiavi oggetto (l’equivalente di una mappa hash) è molto più veloce.

spostare()

shift() è un metodo di convenienza e viene utilizzato per rimuovere il primo elemento di un array. Nota che la stessa cosa può essere fatta con splice(), ma shift() è un po’ più facile da ricordare e intuitivo quando tutto ciò che devi fare è eliminare il primo elemento.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift()

Proprio come shift() rimuove il primo elemento da un array, unshift() aggiunge un nuovo elemento all’inizio dell’array. Il suo utilizzo è altrettanto semplice e compatto:

const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]

Detto questo, non posso fare a meno di avvertire i nuovi del gioco: a differenza dei popolari metodi push() e pop(), shift() e unshift() sono estremamente inefficienti (a causa del modo in cui funzionano gli algoritmi sottostanti). Quindi, se stai operando su array di grandi dimensioni (ad esempio, oltre 2000 elementi), troppe di queste chiamate di funzione possono bloccare l’applicazione.

riempire()

A volte è necessario modificare più elementi in un singolo valore o addirittura “ripristinare” l’intero array, per così dire. In quelle situazioni, fill() ti salva da loop ed errori off-by-one. Può essere utilizzato per sostituire parte o tutto l’array con il valore specificato. Vediamo un paio di esempi:

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]

Altre funzioni degne di nota

Sebbene l’elenco sopra riportato sia ciò che la maggior parte degli sviluppatori JavaScript finisce per incontrare e utilizzare nella propria carriera, non è affatto completo. Ci sono così tante altre funzioni (metodi) minori ma utili in JavaScript che non sarà possibile coprirle tutte in un singolo articolo. Detto questo, alcuni che mi vengono in mente sono i seguenti:

  • inversione()
  • ordinare()
  • inserimenti()
  • riempire()
  • trova()
  • piatto()

Ti incoraggio almeno a cercarli in modo da avere un’idea dell’esistenza di comodità come queste.

Conclusione

JavaScript è un linguaggio ampio, nonostante il numero limitato di concetti fondamentali da apprendere. Le numerose funzioni (metodi) a nostra disposizione costituiscono la maggior parte di questa grande dimensione. Tuttavia, poiché JavaScript è un linguaggio secondario per la maggior parte degli sviluppatori, non ci immergiamo abbastanza in profondità, perdendo molte funzioni belle e utili che offre. In realtà, lo stesso vale per i concetti di programmazione funzionale, ma questo è un argomento per un altro giorno! 😅

Ogni volta che puoi, dedica un po’ di tempo ad esplorare il linguaggio di base (e se possibile, famose librerie di utilità come Lodash). Anche pochi minuti trascorsi a fare questo sforzo si tradurranno in enormi guadagni di produttività e in un codice molto più pulito e compatto.