Articolo originale: Destructuring in JavaScript – How to Destructure Arrays and Objects di Alvin Okoro

Tradotto e adattato da: Angelo Mirabelli

Lavorare con array e oggetti in JavaScript può essere più divertente se li destrutturate. Questo aiuta quando stai recuperando i dati memorizzati.

In questo articolo imparerai come portare la destrutturazione al livello successivo negli array e negli oggetti in JavaScript.

Sommario:

  • Che cos'è un array?
  • Cos'è un oggetto?
  • Cosa significa destrutturare in JavaScript
  • Destrutturazione in array
  • Destrutturazione in oggetti

Che cos'è un array in JavaScript?

In JavaScript, un array è una singola variabile che memorizza più elementi. È una raccolta di dati. Possiamo dichiarare un array in due modi diversi, che sono:

//metodo 1
const firstArray = ["JavaScript", "Python", "Go"]

//metodo 2
const secondArray = new Array(3)
secondArray[0] = "JavaScript"
secondArray[1] = "Python"
secondArray[2] = "Go"

Nel metodo 1, puoi inizializzare mentre dichiari la tua matrice. Nel metodo 2, dichiari la tua matrice con il numero di elementi da archiviare prima dell'inizializzazione.

Che cos'è un oggetto in JavaScript?

In JavaScript, un oggetto è una raccolta di proprietà e una proprietà è un'associazione tra un nome (o chiave ) e un valore.

Scrivere un oggetto in JavaScript sembra in qualche modo simile a un array, ma invece usiamo parentesi graffe. Diamo un'occhiata al codice seguente che mostra un oggetto di nome auto con le sue proprietà:

const auto = {
    name: "Toyota",
    color: "nero",
    year: 2022,
    engineType: "Automatico"
}

Si noti che ciò che costituisce un oggetto è una chiave seguita dal suo valore.

Ora che conosci le basi dell'aspetto degli array e degli oggetti JavaScript, parliamo di più circa la destrutturazione.

Che cos'è la destrutturazione in JavaScript?

Immagina di voler scegliere delle scarpe dalla tua collezione e di volere le tue preferite, quelle di colore blu. La prima cosa che devi fare è cercare nella tua collezione e estrarre tutto ciò che hai lì.

Ora la destrutturazione è proprio come l'approccio che hai adottato quando cercavi le tue scarpe. La destrutturazione è l'atto di estrarre gli elementi da un array o da un oggetto.

La destrutturazione non solo ci consente di disimballare gli elementi, ma ti dà anche il potere di manipolare e cambiare gli elementi che hai disimballato a seconda del tipo di operazione che desideri eseguire.

Vediamo ora come funziona la destrutturazione negli array e negli oggetti.

Destrutturazione in array

Per destrutturare un array in JavaScript, utilizziamo le parentesi quadre [] per memorizzare il nome della variabile che verrà assegnato al nome dell'array che memorizza l'elemento.

const [var1, var2, ...] = arrayName

I puntini di sospensione subito dopo la dichiarazione di var2 significano semplicemente che possiamo creare più variabili a seconda di quanti elementi vogliamo rimuovere dall'array.

Come assegnare variabili con la destrutturazione

Ora, supponiamo di avere un array di 6 colori ma vogliamo ottenere solo i primi 2 colori in esso contenuti. Possiamo destrutturare per ottenere ciò che vogliamo.

Diamo un'occhiata ora:

const colorArr = ["red", "yellow", "blue", "green", "white", "black"];

const [first, second] = colorArr;
console.log(first, second);

// red, yellow
image

Quando eseguiamo il codice sopra, dovremmo avere red e il yellow stampati sulla console. Stupendo!

Come scambiare il valore di variabili con destructuring

Ora che sai come assegnare variabili con la destrutturazione, diamo un'occhiata a come puoi usare la destrutturazione per scambiare velocemente il valore di variabili.

Diciamo che abbiamo un array di due elemenenti, "food" e "fruits", e usiamo la destrutturazione per assegnare questi valore alle variabili positionOne e positionTwo:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
console.log(positionOne, positionTwo);

// food, fruits

Se in seguito vogliamo scambiare i valori di positionOne e positionTwo senza usare la destrutturazione, dovremmo usare un'altra variabile per tenere temporaneamente il valore di una delle due variabili, e poi fare lo scambio.

Per esempio:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
const temp = positionOne;

positionOne = positionTwo;
positionTwo = temp;
console.log(positionOne, positionTwo);

// fruits, food

Ma con la destrutturazione, possiamo scambiare i valori delle variabili positionOne e positionTwo molto facilmente, senza usare una variabile temporanea:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
[positionOne, positionTwo] = [positionTwo, positionOne];
console.log(positionOne, positionTwo);

// fruits, food

Nota che questo metodo di scambiare le variabili non muta l'array originale. Se stampi edibles nella console, vedrai che il suo valore è sempre ["food", "fruits"].

image-1

Come mutare gli Array con la destrutturazione

Mutare significa mutare la forma o il valore di un elemento. Un valore si dice mutabile se può essere cambiato. Con l'aiuto della destrutturazione negli array, possiamo mutare gli array stessi.

Diciamo di avere lo stesso array edibles, e che lo vogliamo mutare scambiando l'ordine degli elementi "food" e "fruits".

Possiamo farlo con la destrutturazione in un modo simile a come prima abbiamo scambiato il valore di due variabili:

const edibles = ["food", "fruits"];

[edibles[0], edibles[1]] = [edibles[1], edibles[0]];
console.log(edibles);

// ["fruits", "food"]

Destrutturazione in oggetti

Quando si destrutturano oggetti, utilizziamo parentesi graffe con il nome esatto di ciò che abbiamo nell'oggetto. A differenza degli array in cui è possibile utilizzare qualsiasi nome di variabile per decomprimere l'elemento, gli oggetti consentono solo l'uso del nome dei dati archiviati.

È interessante notare che possiamo manipolare e assegnare un nome di variabile ai dati che vogliamo ottenere dall'oggetto. Ora vediamo tutto questo nel codice.

const freeCodeCamp = {
    frontend: "React",
    backend: "Node",
    database: "MongoDB"
}

const {frontend, backend} = freeCodeCamp
console.log(frontend, backend);
// react, node
3-4

La stampa di ciò che abbiamo sulla console mostra il valore di frontend e backend. Vediamo ora come assegnare un nome di variabile all'oggetto che vogliamo decomprimere.

const freeCodeCamp = {
    frontend: "React",
    backend: "Node",
    database: "MongoDB"
}

const {frontend: courseOne, backend: courseTwo} = freeCodeCamp
console.log(courseOne, courseTwo);
// react, node
4-2

Come puoi vedere, abbiamo courseOne e courseTwo come nomi dei dati che vogliamo decomprimere.

L'assegnazione di un nome di variabile ci aiuterà sempre a mantenere pulito il nostro codice, specialmente quando si tratta di lavorare con dati esterni quando vogliamo decomprimerli e riutilizzarli nel nostro codice.

Ricapitolando

Ora hai imparato come lavorare con la destrutturazione di array e oggetti. Hai anche imparato a cambiare le posizioni degli elementi negli array.

Quindi che succede adesso? Prova a esercitarti e porta le tue capacità di destrutturazione al livello successivo.