Array.from()

8 JavaScript Tricks per un Codice Pulito ed Efficiente

ingegnerianelweb

JavaScript è un linguaggio estremamente flessibile e in continua evoluzione. Esistono funzioni e metodi spesso poco conosciuti che possono semplificare di molto il lavoro di sviluppo. Di seguito troverai 8 trucchi utili, sintetizzati in brevi esempi di codice, che potrai subito integrare nei tuoi progetti per renderli più puliti e performanti.

1. Convertire stringhe e altri iterabili in array con Array.from()

const str = "Uvais";
const arr = Array.from(str);
console.log(arr);
// Output: ["U", "v", "a", "i", "s"]

Come funziona

  • Array.from() converte qualunque oggetto iterabile (come una stringa) in un array.
  • Questo può tornare molto utile per manipolare separatamente i caratteri di una stringa, oppure per clonare facilmente strutture simili ad array (come ad esempio gli arguments di una funzione o i nodi di un NodeList nel DOM).

2. Funzioni freccia (Arrow Functions)

function add(a, b) {
  return a + b;
}

// Versione arrow function
const addArrow = (a, b) => a + b;

Come funziona

  • Le arrow functions semplificano la sintassi delle funzioni in JavaScript.
  • Quando il corpo della funzione è una singola espressione che ritorna un valore, non c’è bisogno di scrivere la parola chiave return.
  • Attenzione: le arrow function ereditano il this dal contesto lessicale esterno e non possiedono un proprio this. È quindi importante conoscerne i pro e i contro rispetto alle funzioni tradizionali.

3. Visualizzare i dati in forma tabellare con console.table()

const person = {
  name: "John",
  age: 25,
  profession: "Programmer"
};

console.table(person);

Come funziona

  • Se vuoi mostrare i dati in forma tabellare nella console del browser (o di Node.js), console.table() è la soluzione ideale.
  • Invece di stampare semplici righe di testo, otterrai una tabella con intestazioni e valori, utile per analizzare meglio gli oggetti o gli array.

4. Svuotare rapidamente un array impostando la length a 0

let numbers = [1, 2, 3, 4, 5, 6];
numbers.length = 0;
console.log(numbers);
// Output: []

Come funziona

  • In JavaScript, la proprietà length di un array è modificabile.
  • Impostare numbers.length = 0; è un modo veloce per svuotare completamente l’array senza dover usare altri metodi come splice() o ricreare l’array.
  • È una tecnica semplice e pulita, soprattutto quando vuoi resettare una lista di dati.

5. Convertire stringhe JSON in oggetti JavaScript con JSON.parse()

const jsonStr = '{"name": "John", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person);
// Output: { name: 'John', age: 25 }

Come funziona

  • JSON.parse() trasforma una stringa in formato JSON in un oggetto JavaScript.
  • Questo è essenziale quando si ricevono dati da un’API o da un file JSON, e si vuole poi manipolarli nel proprio codice in modo nativo.

6. Trasformare gli elementi di un array con map()

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(numbers);  // [1, 2, 3, 4]
console.log(doubled);  // [2, 4, 6, 8]

Come funziona

  • Il metodo map() crea un nuovo array trasformando gli elementi in base a una funzione di callback.
  • A differenza di forEach(), map() restituisce un nuovo array senza modificare l’originale. Ciò favorisce la immutabilità dei dati, un concetto molto importante in alcune architetture e librerie (come React).

7. Rimuovere duplicati in un array con Set

const arrayDupli = [1, 12, 2, 13, 4, 4, 13, 12, 11];
const mainArr = [...new Set(arrayDupli)];
console.log(mainArr);
// Output: [1, 12, 2, 13, 4, 11]

Come funziona

  • Creando un Set a partire da un array, i duplicati vengono eliminati automaticamente, perché un Set non può contenere valori ripetuti.
  • L’uso dell’operatore spread [...new Set(arrayDupli)] permette di riconvertire il Set in un array normale, ora privo di duplicati.

8. Scambiare valori di due variabili con la destrutturazione

let x = 7, y = 13;
[x, y] = [y, x];
console.log(x, y); 
// Output: 13 7

Come funziona

  • La destrutturazione di array in JavaScript permette di estrarre valori in modo rapido.
  • In questo esempio, [x, y] = [y, x] scambia i valori delle variabili senza bisogno di variabili temporanee o di altre righe di codice.
  • È una soluzione più pulita e leggibile rispetto al tradizionale swap con una variabile di appoggio.