Esercizi Destructuring JavaScript

Ecco degli esercizi con soluzione per praticare il destructuring in JavaScript.

Esercizio 1: Destructuring di un Array

Utilizzare il destructuring per estrarre i valori di un array in variabili separate.

const numeri = [1, 2, 3, 4, 5];

// Destructuring dell'array
const [primo, secondo, terzo] = numeri;

console.log(primo); // 1
console.log(secondo); // 2
console.log(terzo); // 3

Esercizio 2: Salto degli Elementi nel Destructuring di un Array

Utilizzare il destructuring per estrarre il primo e il quarto valore di un array.

const numeri = [1, 2, 3, 4, 5];

// Destructuring con salto degli elementi
const [primo, , , quarto] = numeri;

console.log(primo); // 1
console.log(quarto); // 4

Esercizio 3: Destructuring di un Oggetto

Utilizzare il destructuring per estrarre i valori di un oggetto in variabili separate.

const persona = {
  nome: "Mario",
  eta: 30,
  città: "Roma",
};

// Destructuring dell'oggetto
const { nome, eta, città } = persona;

console.log(nome); // Mario
console.log(eta); // 30
console.log(città); // Roma

Esercizio 4: Destructuring di un Oggetto con Alias

Utilizzare il destructuring per estrarre i valori di un oggetto in variabili con nomi diversi.

const persona = {
  nome: "Mario",
  eta: 30,
  città: "Roma",
};

// Destructuring con alias
const { nome: nomePersona, eta: anni, città: cittàPersona } = persona;

console.log(nomePersona); // Mario
console.log(anni); // 30
console.log(cittàPersona); // Roma

Esercizio 5: Destructuring di Parametri di Funzione

Utilizzare il destructuring per estrarre i parametri di un oggetto passato a una funzione.

function stampaDettagli({ nome, eta, città }) {
  console.log(`Nome: ${nome}`);
  console.log(`Età: ${eta}`);
  console.log(`Città: ${città}`);
}

const persona = {
  nome: "Mario",
  eta: 30,
  città: "Roma",
};

stampaDettagli(persona);
// Nome: Mario
// Età: 30
// Città: Roma

Esercizio 6: Destructuring con Valori Predefiniti

Utilizzare il destructuring per estrarre i valori di un oggetto con valori predefiniti per le variabili.

const persona = {
  nome: "Mario",
  città: "Roma",
};

// Destructuring con valori predefiniti
const { nome, eta = 25, città } = persona;

console.log(nome); // Mario
console.log(eta); // 25 (valore predefinito)
console.log(città); // Roma

Esercizio 7: Destructuring di Array Annidati

Utilizzare il destructuring per estrarre i valori da un array annidato.

const numeri = [1, [2, 3], 4, 5];

// Destructuring di array annidato
const [primo, [secondo, terzo], quarto] = numeri;

console.log(primo); // 1
console.log(secondo); // 2
console.log(terzo); // 3
console.log(quarto); // 4

Esercizio 8: Destructuring di Oggetti Annidati

Utilizzare il destructuring per estrarre i valori da un oggetto annidato.

const persona = {
  nome: "Mario",
  eta: 30,
  indirizzo: {
    città: "Roma",
    via: "Via Roma",
    numero: 10,
  },
};

// Destructuring di oggetto annidato
const {
  nome,
  indirizzo: { città, via, numero },
} = persona;

console.log(nome); // Mario
console.log(città); // Roma
console.log(via); // Via Roma
console.log(numero); // 10