Desestructuración y spread

Dos sintaxis de la misma familia, introducidas por ES6 y convertidas en el pan de cada día de cualquiera que escriba JS moderno:

Destructuring (Desestructuración): extrae múltiples valores de arrays/objetos en una sola línea.
Spread ... (Propagación): "esparce" un array u objeto dentro de otro.

Juntas hacen que el código sea mucho más conciso y legible.

Destructuring de objetos

Leído de forma sencilla: "crea las constantes nome y eta con los valores de las propiedades del mismo nombre en utente".

const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };

const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28

Renombrar

Añade : nuevoNombre después de la clave:

const { nome: n, eta: years } = utente;
// crea le variabili n e years

Valor por defecto

Si la propiedad no existe (o es undefined), se usa el valor por defecto:

const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (presente), telefono = 'n/d' (assente)

Destructuring de arrays

Funciona por posición:

const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;
// primo = 'rosso', secondo = 'verde'

const [, , terzo] = colori; // salta i primi due
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']

Spread en arrays

...arr "esparce" los elementos:

const a = [1, 2, 3];
const b = [4, 5];

const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // copia superficiale di a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]

Spread en objetos

Las claves posteriores sobrescriben a las anteriores, lo cual es fundamental para las actualizaciones inmutables:

const utente = { nome: 'Anna', eta: 28 };

const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente NON è stato toccato

const con = { ...utente, attivo: true };
// { nome: 'Anna', eta: 28, attivo: true }

Pruébalo tú mismo

Ejercicio#js.m3.l3.e1

Intentos: 0Cargando...

Dado `user = { name: 'Marco', age: 34, city: 'Torino' }`, extrae mediante destructuring únicamente `name` y `city` en dos constantes y devuelve `\`${name} di ${city}\`` (debe valer 'Marco di Torino').

Cargando editor...

Mostrar pista

const { name, city } = user; luego un template literal con ambos valores.

Solución disponible después de 3 intentos

Ejercicio de repaso

Ejercicio#js.m3.l3.e2