Déstructuration et spread

Deux syntaxes issues de la même famille, introduites par ES6 et devenues le pain quotidien de quiconque écrit du JS moderne :

Destructuring (Déstructuration) : extrait plusieurs valeurs de tableaux/objets en une seule ligne.
Spread ... (Décomposition) : "étale" un tableau ou un objet dans un autre.

Ensemble, elles rendent le code beaucoup plus concis et lisible.

Destructuring d'objets

Traduit simplement : "crée les constantes nome et eta avec les valeurs des propriétés du même nom de utente".

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

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

Renommer

Ajoute : nouveauNom après la clé :

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

Valeur par défaut

Si la propriété est manquante (ou vaut undefined), la valeur par défaut est utilisée :

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

Destructuring de tableaux

Fonctionne par position :

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 sur les tableaux

...arr "étale" les éléments :

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 sur les objets

Les clés successives écrasent les précédentes — essentiel pour les mises à jour immuables :

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 }

À toi de jouer

Exercice#js.m3.l3.e1

Tentatives : 0Chargement…

Étant donné `user = { name: 'Marco', age: 34, city: 'Torino' }`, extrais par déstructuration uniquement `name` et `city` dans deux constantes et renvoie `\`${name} di ${city}\`` (doit s'évaluer à 'Marco di Torino').

Chargement de l'éditeur…

Afficher l'indice

const { name, city } = user ; puis un gabarit de chaîne avec les deux valeurs.

Solution disponible après 3 tentatives

Exercice de révision

Exercice#js.m3.l3.e2