Oggi vi farò un piccolo gioco di prestigio, con Javascript. Uno di quei giochi che riuscirò a fare senza alcun mio intervento. E, come per tutti i giochi di magia, qualcuno di voi già conoscerà il trucco, ma altri si domanderanno come ho fatto, senza essere on-line, senza toccare il proprio computer a fare questa magia… Leggete fino alla fine e vi svelerò il segreto…
L’ovvio, il logico e lo scontato
Aprite tutti la console dello sviluppatore del browser e riportate questo codice nella console:
const cassetto = [
'forchette',
'coltelli',
'cucchiai'
]Cloniamo il primo elemento alla fine dell’array.
cassetto.push(x[0]) Guarda cosa contiene la variabile cassetto… Ovvio!
[
'forchette',
'coltelli',
'cucchiai',
'forchette'
]Modifichiamo il primo elemento:
cassetto[0] = 'cucchiaini'Guarda adesso cosa contiene la variabile cassetto.
Ok il risultato è scontato, vi ritroverete con un array di 4 elementi ciascuno con il suo valore:
[
'cucchiaini',
'coltelli',
'cucchiai',
'forchette'
]Il gioco di prestigio
Adesso diamo una bella mescolata al mazzo…
… ancora un’altra mescolata e ricominciamo il gioco.
Nella console di sviluppo digitate:
const forchette = { label: "forchette" }
const cucchiai = { label: "cucchiai" }
const coltelli = { label: "coltelli" }
const cassetto = [
forchette,
cucchiai,
coltelli
]Cloniamo il primo elemento alla fine dell’array.
cassetto.push(cassetto[0])Guarda cosa contiene la variabile cassetto…
Il risultato sarà, ancora una volta, ovviamente:
[
{ label: "forchette" },
{ label: "cucchiai" },
{ label: "coltelli" },
{ label: "forchette" }
]Perfetto, adesso modifichiamo il valore del primo elemento dell’array.
cassetto[0].label = 'cucchiaini'Guarda cosa contiene la variabile cassetto
Sim sala bim!
Sia il primo elemento che l’ultimo elemento dell’array contengono come valore della proprietà label "cucchiaini"!
Com’è possibile??? Ma non abbiamo modificato solo il primo elemento del cassetto?
Ti è piaciuta questa magia? Sì? Bene!!!
Io però non sono un mago (sono un Full Stack Developer, co-fondatore di Axio Studio e mi piace divertirmi con il codice).
La spiegazione
Non essendo un mago, non faccio giochi di magia e come per ogni apparente magia esiste una spiegazione logica ed oggettiva.
In javascript ogni variabile la possiamo considerare un cassetto in grado di ospitare un tipo primitivo.
I tipi primitivi
In Javascript i tipi primitivi sono String, Number, BigInt, Boolean, Null, Undefined, and Symbol. Ovvero è possibile definire come primitivi tutti quei tipi di dato che non sono oggetti e non implementano metodi o proprietà.
La modifica di un tipo primitivo altera direttamente il valore riportato nel cassetto.
Per esempio l’incremento di una variabile che contiene un dato di tipo Number ( A += 1 ) modificherà il valore nel cassetto etichettato come “A” aggiungendo un’unità al suo valore iniziale.
Quanto ho appena scritto non spiega il trucco di magia, appena eseguito, ma crea una base di partenza per la soluzione.
I tipi complessi, gli Object
Gli Object sono dei tipi speciali in Javascript (tutto, ad esclusione dei tipi primitivi, è un Object).
Un Object può essere visto come un cassetto in cui ci sono diversi scompartimenti, ciascuno etichettato con un suo nome o numero.
Immagina il cassetto delle posate in cucina, hai lo scompartimento per le forchette, quello per i coltelli, per i cucchiai e così via.
Per semplificare la spiegazione immagina di avere una sola posata per tipo in ciascuno scompartimento… Ora però arriva la parte difficile…
Riferimento per valore e per puntatore
La variabile, una casella, può contenere solo un tipo primitivo, quindi per immagazzinare un dato complesso Javascript conterrà un valore numerico che descrive in quale punto della memoria è presente quell’oggetto.
Facendo riferimento a questo oggetto:
const forchette = { label: "forchette" }
const cucchiai = { label: "cucchiai" }
const coltelli = { label: "coltelli" }
const cassetto = [
forchette, // slot #1
cucchiai, // slot #2
coltelli // slot #3
]Quindi in nello slot 1 del cassetto è presente un post-it sul quale c’è scritto lo slot in cui troveremo le forchette (per ipotesi ci sarà scritto slot numero 123).
Quando si aggiunge in un nuvo slot la copia di slot #1, si sta banalmente ricopiando il post-it di slot 1 su un nuovo post-it e collocato nello slot #4, quindi sia lo slot #1 sia lo slot #4 faranno riferimento al solito slot 123 che conterrà il medesimo oggetto forchette.
In conclusione
Javascript è un linguaggio di programmazione estremamente flessibile e permissivo che però nasconde, come per molti altri linguaggi di programmazione, alcune insidie.
Approcciarsi direttamente a framework di alto livello, come jQuery, Vue.js, Angular, React, ecc. senza conoscere i costrutti basilari e le peculiarità del linguaggio, può indurre il programmatore a delle considerazioni errate e a bug applicativi talvolta gravi.
La gestione degli array e degli oggetti in JavaScript è un po’ controversa quando si è agli inizi, ma comprendendone le logiche, ,mi è stato tutto più chiaro.
E tu quale costrutto, struttura, logica o dinamica di questo linguaggio di scripting/programmazione hai ritenuto insensato ad un certo punto della tua carriera?