Come destrutturare oggetti ed array in Javascript
La destrutturazione in JavaScript è una tecnica che permette di estrarre elementi da un oggetto, o da un array, ed è stato introdotto con ECMAScript 6 (ES6).
Destrutturare un oggetto in Javascript
Un oggetto è una raccolta di proprietà, ed ogni proprietà è un'associazione (o coppia) tra una chiave (o nome) ed un valore.
Ecco un esempio di oggetto:
const mycar = {
marca: "Lancia",
modello: "Musa",
colore: "nero",
anno: 2010
}Prima di ES6, per estrarre il valore di "marca" dovevo operare, ad esempio, così
var pippo=mycar.marca;
La variabile pippo avrà quindi valore "Lancia". Ed avrei dovuto ripetere la stessa procedura per le altre chiavi dell'oggetto.
Con l'introduzione della destritturazione possiamo utilizzare una sintassi molto più compatta, utilizzando le parentesi graffe, come segue:
const {chiave1, chiave2, ... } = nomeoggettochiave1, chiave2 sono le chiavi dell'oggetto
Nel nostro esempio, se vogliamo estrarre i primi tre elementi, scriveremo ad esempio
const {marca, modello, colore} = mycar;
console.log(marca, modello, colore);Nella console vedremo "Lancia, Musa, nero".
Non è importante l'ordine degli elementi, infatti è la chiave dell'oggetto a fare fede. Ad esempio potremmo destrutturare in questo modo e non cambierebbe nulla.
const {modello, marca, colore} = mycar;
console.log(marca, modello, colore);E' anche possibile assegnare, alle variabili, un nome che non sia la chiave delle proprietà dell'oggetto.
Ad esempio invece di "marca" e "modello" vogliamo usare i nomi "pippo" e "pluto". Procediamo come segue:
const {marca: pippo, modello: pluto} = mycar
console.log(pippo, pluto);Abbiamo quindi visto come scompattare le proprietà di un oggetto, per ottenere delle variabili che abbiamo come valore il valore della proprietà dell'oggetto.
Destrutturare un array in Javascript
Un array, come sappiamo, è una variabile che memorizza più elementi: è una raccolta di dati. Possiamo dichiararla in due modi diversi, che ricordiamo qui di seguito:
//metodo 1
const linguaggi = ["JavaScript", "Php", "Python", "Java", "C++"]
//metodo 2
const linguaggi = new Array()
linguaggi [0] = "JavaScript"
linguaggi [1] = "Php"
linguaggi [2] = "Python"
linguaggi [3] = "Java"
linguaggi [4] = "C++"Per destrutturare un array in JavaScript, cioè per estrapolare dall'array gli elementi che ci interessano, utilizziamo le parentesi quadre (e non graffe come per gli oggetti)
const [var1, var2, ....] = nomearray;var1 e var2 sono nomi che scegliamo liberamente, e rappresentano i primi due elementi dell'array che vogliamo estrarre. I puntini indicano semplicemente che possiamo estrarre tutti gli elementi che vogliamo dell'array
Torniamo al nostro esempio. Se ci interessano solo i primi due elementi, operiamo così:
const [primo, secondo] = linguaggi;
console.log(primo);
console.log(secondo); Con un "console.log" vedremo, stampati sulla console, "JavaScript" e "Php", cioè i due elementi che abbiamo estratto dall'array e che adesso sono due variabili di tipo const (ma potrei volere una var o una let), con nome "primo" e "secondo".
Ad esempio, se ci interessa solo il primo e terzo elemento dell'array, tralasciando quindi il secondo, scriveremo così:
const [primo, , terzo] = linguaggi;
console.log(primo);
console.log(terzo); Infine, se vi ricordate cos'è lo spread operator, è possibile utilizzarlo come nel seguente esempio
const [primo, secondo, ...altri] = linguaggi;
console.log(altri); La variabile "altri" conterrà un array contenente il valore dei restanti elementi dell'array. La console.log visualizzerà infatti questo array
[ "Python", "Java", "C++" ]Considerazione finale: destrutturare non significa distruggere un array/oggetto: l'array/oggetto infatti non viene modificato in alcun modo! Abbiamo solo estratto i suoi elementi.
