5 utili trucchi JavaScript per principianti: semplifica il tuo lavoro da sviluppatore

Se stai iniziando a programmare in JavaScript o vuoi semplicemente conoscere qualche trucchetto in più per ottimizzare il tuo codice, sei nel posto giusto! In questo articolo ti mostrerò 5 utili “trucchi” che possono semplificare la vita di ogni sviluppatore, soprattutto se alle prime armi. Sia che tu stia lavorando su un progetto personale o in un contesto professionale, questi consigli ti aiuteranno a scrivere codice più pulito, leggibile ed efficiente.

1. Rimuovere i duplicati da un array

Uno dei problemi più comuni quando si gestiscono array di dati è la presenza di elementi duplicati. Spesso bisogna “filtrare” l’array per ottenere solo i valori unici. Un modo semplice ed efficace per farlo è utilizzare il costrutto Set in combinazione con l’operatore di spread (...).

Esempio di codice:

const array = [1, 2, 3, 2, 1, true, true, false, 'Ratul', 1, 5];
const arrayUnici = [...new Set(array)];
console.log(arrayUnici); // [ 1, 2, 3, true, false, 'Ratul', 5 ]

Perché funziona:

• new Set(array) crea un insieme dei soli valori unici, rimuovendo i duplicati.
• Lo spread operator (...) riconverte il Set in un normale array.

Applicazioni utili:

• Rimozione di valori doppi in liste di prodotti, liste di tag o di categorie.
• Pulizia di dati provenienti da form o API esterne.

2. Convertire un numero decimale in intero in modo rapido

Spesso ci troviamo a dover convertire un numero con decimali in un intero. Un modo “furbo” per farlo in JavaScript è utilizzare l’operatore bitwise OR (| 0). Questo tronca la parte decimale del numero.

Esempio di codice:

const numero = 23.6565;
console.log(numero | 0); // 23

Alternative da considerare:

• Math.floor(numero) restituisce il numero arrotondato per difetto.
• Math.trunc(numero) rimuove la parte decimale (equivalente a | 0 per numeri positivi).

Attenzione:
L’uso di | 0 può dare risultati imprevisti con numeri molto grandi o negativi. In caso di valori fuori range, è consigliabile usare funzioni come Math.trunc(), Math.floor() o parseInt().

3. Ottenere l’ultimo valore di un array

Per accedere all’ultimo elemento di un array, esistono vari approcci. Uno di questi è usare slice() con un valore negativo. Quando usi slice(-1), JavaScript restituisce l’ultimo elemento dell’array come nuovo array. Per la precisione, -1 indica di partire dall’ultimo elemento verso la fine dell’array.

Esempio di codice:

const array = [1, 2, 3, 4, 5];
const ultimoElemento = array.slice(-1);
console.log(ultimoElemento); // [5]

Se hai bisogno degli ultimi due elementi, puoi usare array.slice(-2), per gli ultimi tre array.slice(-3), e così via.

Approccio alternativo (moderno):

const lastItem = array.at(-1);
console.log(lastItem); // 5 (non restituisce un array, ma direttamente l'elemento)

L’uso di at() è supportato nella maggior parte dei browser moderni ed è più leggibile in alcuni contesti.

4. Scegliere un elemento casuale da un array

Potrebbe capitare di dover selezionare un vincitore per una lotteria o un campione casuale da un elenco di valori. L’idea è semplice: generiamo un numero casuale compreso tra 0 e la lunghezza dell’array, e lo usiamo come indice.

Esempio di codice:

const partecipanti = ['Ratul', 'George', 'July', 'Padrik', 'G'];
const vincitore = partecipanti[Math.floor(Math.random() * partecipanti.length)];
console.log(vincitore);

In questo modo, ogni partecipante ha la stessa probabilità di essere estratto.

Consigli utili:

• In combinazione con l’algoritmo di “mescolamento” (shuffle), puoi usare questo approccio per ottenere estrazioni più articolate, come liste di vincitori multipli.
• Ricorda che Math.random() genera un numero compreso tra 0 (incluso) e 1 (escluso).

5. Trovare la parola più lunga in un array di stringhe

Immagina di avere un array di stringhe (es. nomi di frutta) e di voler sapere quale sia la stringa più lunga. Possiamo farlo facilmente con un ciclo o con forEach(), tenendo traccia della parola più lunga mentre iteriamo.

Esempio di codice:

const frutti = ['Mela', 'Pera', 'Pineapple', 'Banana', 'Jack-fruit'];

let piuLunga = '';
frutti.forEach((elemento) => {
  if (elemento.length > piuLunga.length) {
    piuLunga = elemento;
  }
});
console.log(piuLunga); // Jack-fruit

Cosa succede nel codice:

1. Creiamo una variabile piuLunga inizializzata come stringa vuota.
2. Per ogni elemento nell’array, verifichiamo se la lunghezza della stringa corrente è maggiore della lunghezza di piuLunga.
3. Se lo è, aggiorniamo piuLunga con la nuova stringa.
4. Alla fine del ciclo, piuLunga conterrà la parola più lunga trovata nell’array.

Conclusione

Questi 5 trucchi JavaScript possono sembrare semplici, ma sono estremamente utili per snellire il tuo lavoro quotidiano di sviluppo. Che tu voglia rimuovere duplicati, estrarre l’ultimo valore di un array o trovare la parola più lunga, c’è un trucchetto pronto ad aiutarti. Sperimenta con questi metodi, integrali nel tuo workflow e vedrai come il tuo codice diventerà più pulito ed efficiente.

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.