Imparare JavaScript con demo interattive

Passa in rassegna ogni elemento e lascia entrare solo chi supera il test. Restituisce un nuovo array — l'originale resta intatto.

// Solo i numeri pari
const numeri = [1, 2, 3, 4, 5, 6];
const pari = numeri.filter(n => n % 2 === 0);
// [2, 4, 6]

// Utenti attivi da una lista
const attivi = utenti.filter(u => u.attivo);
// Solo utenti con attivo: true

Ogni elemento entra, viene trasformato, esce dall'altra parte. Il nuovo array ha sempre la stessa lunghezza dell'originale. È il pilastro della programmazione funzionale.

// Raddoppia ogni valore
const doppi = [1, 2, 3].map(n => n * 2);
// [2, 4, 6]

// Da oggetti a stringhe
const nomi = utenti.map(u => u.nome);
// ["Alice", "Bob", "Carlo"]

// Trasformare dati API in oggetti view
const cards = prodotti.map(p => ({
  id: p.id,
  label: p.nome.toUpperCase(),
  prezzo: `€${p.prezzo.toFixed(2)}`
}));

Percorre l'array e si ferma al primo elemento che soddisfa la condizione. Restituisce l'elemento stesso, non un array. Se non trova nulla: undefined.

const utenti = [
  { id: 1, nome: "Alice" },
  { id: 2, nome: "Bob" },
];

const trovato = utenti.find(u => u.id === 2);
// { id: 2, nome: "Bob" }

utenti.find(u => u.id === 99);
// undefined

Come find(), ma restituisce la posizione invece dell'elemento. Utilissimo quando devi aggiornare o rimuovere un elemento sapendo dove sta. Se non trovato: -1.

const frutti = ["mela", "banana", "ciliegia"];

const idx = frutti.findIndex(f => f === "banana");
// 1

// Caso d'uso reale: aggiorna un item nello stato
const i = items.findIndex(x => x.id === idTarget);
if (i !== -1) items[i].letto = true;

Il metodo degli effetti collaterali. Non costruisce nulla, non filtra nulla — esegue una funzione per ogni elemento e basta. Non può essere interrotto, non restituisce valori. Usalo per log, DOM, chiamate API.

const prezzi = [10, 25, 8];

prezzi.forEach((p, i) => {
  console.log(`[${i}] → €${p}`);
});
// [0] → €10
// [1] → €25
// [2] → €8

Quando usare forEach vs map? Se hai bisogno del risultato trasformato, usa map. Se ti interessa solo l'effetto (scrivere nel DOM, loggare, chiamare un setter), usa forEach.

Si chiede: "esiste almeno un elemento che soddisfa questa condizione?" Risponde con true o false. Cortocircuita — appena trova il primo match, si ferma. Perfetto per validazioni rapide.

const voti = [6, 7, 4, 8];

voti.some(v => v < 5);
// true  ← c'è un 4, si ferma lì

// Carrello: qualche prodotto esaurito?
const haBlocchi = carrello.some(p => p.stock === 0);

L'esatto opposto di some(). Vuole che ogni singolo elemento superi il test. Un solo fallimento e restituisce false immediatamente.

const valida = (s) => s.length >= 4 && /[0-9]/.test(s);
const password = ["Ab1!", "Xy9@", "ciao"];

password.every(valida);
// false  ← "ciao" non passa

// Form: tutti i campi compilati?
const pronto = campi.every(c => c.value.trim() !== "");

Il più potente. Il più temuto. Riduce un intero array a un unico valore — numero, stringa, oggetto, un altro array. Porta con sé un accumulatore che cresce ad ogni passo.

// Somma totale
const totale = [10, 20, 30].reduce((acc, n) => acc + n, 0);
// 60

// Raggruppa per categoria
const gruppo = prodotti.reduce((acc, p) => {
  acc[p.cat] = [...(acc[p.cat] || []), p];
  return acc;
}, {});
// { "libri": [...], "film": [...] }

La firma completa è reduce(callback, valoreIniziale). Il valore iniziale è opzionale, ma specificarlo sempre è una buona abitudine — evita comportamenti inattesi su array vuoti.

La domanda più semplice. Esiste questo valore nell'array? Risponde true o false. Usa confronto di uguaglianza stretta — funziona perfettamente con i primitivi (stringhe, numeri), non con gli oggetti.

const ruoli = ["admin", "editor", "viewer"];

ruoli.includes("admin");
// true

ruoli.includes("superuser");
// false

// Guard classico
if (!ruoli.includes(utenteCorrente.ruolo)) {
  throw new Error("Accesso negato");
}

Attenzione: opera sull'array originale. È il coltellino svizzero delle mutazioni — elimina elementi, ne inserisce di nuovi, sostituisce. La firma è splice(inizio, quanti, ...nuovi).

Eliminazione

const a = ["a", "b", "c", "d"];
const rimossi = a.splice(1, 2);
// a        → ["a", "d"]
// rimossi  → ["b", "c"]

Inserimento

const b = ["a", "c"];
b.splice(1, 0, "b"); // 0 rimossi, inserisci "b"
// b → ["a", "b", "c"]

Sostituzione

const c = ["X", "Y", "Z"];
c.splice(1, 1, "★"); // rimuovi 1, metti "★"
// c → ["X", "★", "Z"]

Il contrario di splice(). Restituisce una copia di una porzione dell'array originale, che rimane intatto. La firma è slice(inizio, fine) dove fine è escluso.

Porzione centrale

const arr = ["a", "b", "c", "d", "e"];
arr.slice(1, 4);
// ["b", "c", "d"]  ← indice 4 escluso

Dalla posizione X fino alla fine

arr.slice(3);
// ["d", "e"]

Indice negativo — conta dalla coda

Gli indici negativi partono dalla fine dell'array. -1 è l'ultimo elemento, -2 il penultimo, e così via.

arr.slice(-2);        // ultimi 2 elementi
// ["d", "e"]

arr.slice(-3, -1);    // dal terzultimo al penultimo
// ["c", "d"]

Copia completa dell'array

const copia = arr.slice(); // senza argomenti → tutto
// ["a", "b", "c", "d", "e"]
// copia !== arr  → oggetti distinti in memoria

Questo pattern è molto usato per clonare un array prima di ordinarlo con sort(), che muta l'originale.

const ordinato = [...arr].sort();    // alternativa moderna con spread
const ordinato = arr.slice().sort(); // equivalente classico