RN Lezione 2: Array, oggetti e metodi ES6+

Obiettivi

• Usare map, filter, forEach sugli array
• Manipolare oggetti (come i dict Python)
• Usare destrutturazione e spread operator
• Risolvere esercizi di consolidamento JS

---

1. Array: map, filter, forEach, find

In JavaScript si usano metodi funzionali sugli array invece dei cicli for.

map — trasformare ogni elemento

Come una list comprehension in Python.

# Python
numeri = [1, 2, 3, 4, 5]
doppi = [n * 2 for n in numeri]        # [2, 4, 6, 8, 10]
quadrati = [n ** 2 for n in numeri]    # [1, 4, 9, 16, 25]

// JavaScript
const numeri = [1, 2, 3, 4, 5];
const doppi = numeri.map(n => n * 2);       // [2, 4, 6, 8, 10]
const quadrati = numeri.map(n => n ** 2);   // [1, 4, 9, 16, 25]

// Con arrow function su più righe
const doppi2 = numeri.map(n => {
    return n * 2;
});

filter — selezionare elementi

# Python
maggiori = [n for n in numeri if n > 2]     # [3, 4, 5]
pari = [n for n in numeri if n % 2 == 0]    # [2, 4]

// JavaScript
const maggiori = numeri.filter(n => n > 2);       // [3, 4, 5]
const pari = numeri.filter(n => n % 2 === 0);     // [2, 4]

// === è l'uguaglianza stretta (meglio di ==)

forEach — eseguire per ogni elemento

# Python
for n in numeri:
    print(n)

// JavaScript
numeri.forEach(n => console.log(n));

// Con indice
numeri.forEach((n, i) => console.log(`Posizione ${i}: ${n}`));

find — trovare il primo elemento che matcha

const prodotti = [
    { nome: 'Mela', prezzo: 1.5 },
    { nome: 'Pane', prezzo: 2.0 },
    { nome: 'Latte', prezzo: 1.8 },
];

const trovato = prodotti.find(p => p.nome === 'Pane');
console.log(trovato);   // { nome: 'Pane', prezzo: 2.0 }

const esiste = prodotti.some(p => p.prezzo < 1.0);
console.log(esiste);    // false (nessun prodotto sotto 1.0)

---

2. Oggetti (come i dict Python)

# Python
studente = {
    "nome": "Mario",
    "eta": 17,
    "classe": "4A",
    "voti": [8, 7, 9]
}
print(studente["nome"])       # Mario
print(studente.get("nome"))   # Mario (safe)

// JavaScript
const studente = {
    nome: 'Mario',      // ← chiavi senza virgolette!
    eta: 17,
    classe: '4A',
    voti: [8, 7, 9]
};

console.log(studente.nome);       // Mario (con .)
console.log(studente['nome']);    // Mario (come Python)

Aggiungere e modificare proprietà

studente.media = 8.0;           // Aggiunge
studente.eta = 18;              // Modifica
delete studente.classe;         // Rimuove

---

3. Destrutturazione — estrarre valori

Destrutturazione array

const coordinate = [10, 20, 30];

// Python: x, y, z = coordinate
const [x, y, z] = coordinate;
console.log(x);   // 10

// Ignorare elementi
const [primo, , terzo] = coordinate;
console.log(terzo);   // 30

// Valore di default
const [a, b, c = 0, d = 0] = [1, 2];
console.log(d);   // 0 (default)

Destrutturazione oggetti

const utente = { nome: 'Mario', eta: 17, classe: '4A' };

// Python: nome = utente["nome"]; eta = utente["eta"]
const { nome, eta } = utente;
console.log(nome);   // Mario

// Rinominare
const { nome: nomeUtente } = utente;
console.log(nomeUtente);   // Mario

// Default
const { nome, cognome = 'Rossi' } = utente;

Destrutturazione nei parametri funzione

// Invece di:
const saluta = (props) => {
    console.log(`Ciao ${props.nome}, hai ${props.eta} anni`);
};

// Meglio:
const saluta = ({ nome, eta }) => {
    console.log(`Ciao ${nome}, hai ${eta} anni`);
};

saluta({ nome: 'Mario', eta: 17 });

---

4. Spread operator (...)

Unisce o copia array/oggetti in modo elegante.

Con array

const numeri = [1, 2, 3];
const piùNumeri = [...numeri, 4, 5];
// [1, 2, 3, 4, 5]

// Copiare un array (non il riferimento!)
const copia = [...numeri];

// Unire array
const a = [1, 2];
const b = [3, 4];
const uniti = [...a, ...b];  // [1, 2, 3, 4]

Con oggetti

const base = { nome: 'Mario', eta: 17 };
const completo = { ...base, classe: '4A', scuola: 'Fermi' };
// { nome: 'Mario', eta: 17, classe: '4A', scuola: 'Fermi' }

// Sovrascrivere
const aggiornato = { ...base, eta: 18 };
// { nome: 'Mario', eta: 18 }

// Copiare un oggetto
const copia = { ...base };

Python equivalente: {**dict1, **dict2} o {**dict1, chiave: valore}

---

5. Esempio pratico: gestione studenti

// Dati iniziali
const studenti = [
    { id: 1, nome: 'Mario', voti: [8, 7, 9] },
    { id: 2, nome: 'Sofia', voti: [6, 8, 7] },
    { id: 3, nome: 'Luca', voti: [9, 9, 8] },
];

// Calcolare media per ogni studente
const conMedia = studenti.map(s => {
    const somma = s.voti.reduce((acc, v) => acc + v, 0);
    const media = somma / s.voti.length;
    return { ...s, media: media.toFixed(2) };
});

console.log(conMedia);
// [
//   { id: 1, nome: 'Mario', voti: [8,7,9], media: '8.00' },
//   { id: 2, nome: 'Sofia', voti: [6,8,7], media: '7.00' },
//   { id: 3, nome: 'Luca', voti: [9,9,8], media: '8.67' }
// ]

// Filtrare studenti con media >= 8
const eccellenti = conMedia.filter(s => s.media >= 8);
console.log(eccellenti.map(s => s.nome));   // ['Mario', 'Luca']

---

6. Tabella riassuntiva

Operazione	Python	JavaScript
Trasforma lista	[x*2 for x in l]	l.map(x => x*2)
Filtra	[x for x in l if x>2]	l.filter(x => x>2)
Cicla	for x in l:	l.forEach(x => ...)
Cerca	next(x for x in l if ...)	l.find(x => ...)
Lunghezza	len(l)	l.length
Unisci dict	{**d1, **d2}	{...o1, ...o2}
Estrai	k, v = d.items()	const {k, v} = obj

---

7. Esercizio autonomo

🎯 Esercizio: “Carrello della spesa”

Crea un file .js da eseguire con Node.js che:

1. Definisce un array di prodotti: { id, nome, prezzo, categoria }
2. Usa map per creare una lista di soli nomi
3. Usa filter per trovare i prodotti sotto 2€
4. Usa find per cercare un prodotto per nome
5. Usa forEach per stampare “Prodotto: NOME — PREZZO€”
6. Calcola il totale con reduce

Dati di partenza:

const prodotti = [
    { id: 1, nome: 'Mela', prezzo: 1.20, categoria: 'Frutta' },
    { id: 2, nome: 'Pane', prezzo: 2.50, categoria: 'Forno' },
    { id: 3, nome: 'Latte', prezzo: 1.80, categoria: 'Latticini' },
    { id: 4, nome: 'Pasta', prezzo: 1.10, categoria: 'Pasta' },
];