L’utilità delle variabili è quella di fare da contenitore per vari tipi di “oggetti”.
Dobbiamo quindi immaginarci la variabile come una scatola a cui assegniamo un nome. Questa scatola può essere vuota o piena e il suo contenuto può variare nel tempo. Per rendere questo concetto ancora più semplice, immaginiamo che una scatola può contenere solamente un solo tipo di “oggetto”, ma i tipo di oggetti a nostra disposizione sono molti.
Parlando di javascript, i tipi base di “oggetti” che possiamo avere, sono oggetti di tipo testuale, numerico o booleani (valori true o false). Chiamarli “oggetti” può creare confusione, quindi diciamo che i vari tipi che una variabile può contenere sono di tipo buy essay cheap online testuale, numerico o booleano… o se preferiamo, diciamo che una variabile può essere di tipo testuale, numerico o booleano.
Riguardo al primo tipo, è come se ci immaginassimo un foglio con sopra scritto qualcosa. Possiamo scrivere “w la mamma”, “4ever young” o quello che volete. Lo scrivete su un foglio e lo mettete nella scatola chiamata “frase”. In codice risulterebbe così:
var frase = "4ever young";
Se invece di una scritta, volessimo mettere in una variabile un valore numerico, potremmo scrivere
var numero = 6; var numeroConVirgola = 6.123;
I valori booleani possono essere solamente true o false e possono anche loro essere salvati all’interno di una variabile:
var valoreVero = true; var valoreFalso = false;
Qualsiasi tipo di valore voi abbiate messo in una variabile, potete sempre decidere quando prenderlo, semplicemente richiamando il nome della variabile. Potete anche, in ogni momento, decidere di cambiargli valore:
var frase = "4ever young" var numero = 6; var numeroConVirgola = 6.123; var valoreVero = true; var valoreFalso = false; console.log(frase); // "4ever young" console.log(numero); // 6 console.log(numeroConVirgola); // 6.123 console.log(valoreVero); // true console.log(valoreFalso); // false frase = "xxx"; console.log(frase); // "xxx" frase = 4; console.log(frase); // 4 frase = numero; console.log(frase); // 6
Come potete vedere, una variabile che prima era testuale, cambiando il valore che contiene, diventa una variabile di tipo numerico.
Si può anche inserire il valore di una variabile all’interno di un’altra variabile. Quindi il risultato della riga 15 è molto simile a quello della riga 7.
Se all’interno del vostro codice provate a richiamare una variabile che non avete mai creato, riceverete un errore che vi dirà che la variabile non è definita.
console.log(ciao); // Uncaught ReferenceError: ciao is not defined
Se invece create la variabile ma non assegnato alcun valore, non riceverete un errore ma all’interno della vostra variabile il valore sarà undefined
var ciao; console.log(ciao); // undefined
Se all’interno del vostro codice, ad un certo punto non siete sicuri che la vostra variabile sia stata definita o che abbia un valore undefined, potete controllarlo così:
if(typeof ciao != 'undefined')
Se il risultato del vostro if è true allora la vostra variabile esiste e è stato assegnato un valore.
Esiste anche un tipo di variabile che viene utilizzato per memorizzare più valori. Questa “variabile” è detta array.
Potete immaginare un array come una cassettiera. Ogni cassetto contiene un valore differente. Al momento immaginate una cassettiera che abbia una sola fila. In codice potremmo scriverla così:
var cassettiera = [];
Se volessimo poi inserire un valore nella cassettiera potremmo fare così:
cassettiera.push(5);
cassettiera.push(4);
cassettiera.push(true);
cassettiera.push("66");
e per visualizzare quanti elementi ci sono nella cassettiera e per visualizzare il contenuto della cassettiera, il codice è questo
console.log(cassettiera.length); // Output: 4 console.log(cassettiera); // Output: [5, 4, true, "66"]
Quando gestiamo gli array una cosa molto importante da ricordare è che per identificare un elemento al suo interno dobbiamo usare le parentesi quadre e inserire la posizione dell’elemento che ci interessa. La cosa particolare è che nel conteggio delle posizioni dovremo partire da 0, quindi con questo codice avremo i seguenti risultati che ho scritto nei commenti:
console.log(cassettiera[0]); // 5 console.log(cassettiera[1]); // 4 console.log(cassettiera[2]); // true console.log(cassettiera[3]); // "66"
Allo stesso modo, possiamo anche cambiare il valore di un elemento dell’array
cassettiera[0] = "ciao" console.log(cassettiera[0]); // "ciao"
Se, come spesso capita, dovrete ciclare gli elementi all’interno di un array utilizzando un ciclo for, dovrete far attenzione a non superare mai l’indice massimo dell’array che è uguale alla sua lunghezza, meno 1:
var indiceMaxArray = cassettiera.length -1;
e quindi:
var indiceMaxArray = cassettiera.length -1;
for(var index = 0; index <= indiceMaxArray; index++)
{
console.log(cassettiera[index]);
}
o volendo potreste anche scriverlo così:
for(var index = 0; index < cassettiera.length; index++)
{
console.log(cassettiera[index]);
}
Fate attenzione che in questo caso all’interno del ciclo ho usato solamente un < e non <=.
Forse più complesso, ma utile, è l’utilizzo di array a due dimensioni.
Pensiamo di avere una cassettiera con 5 righe e 4 colonne. Quello che dobbiamo fare è prima di tutto definire il nostro e poi impostare che ogni elemento all’interno del nostro array è a sua volta un array
var cassettieraGriglia = []
for(var a = 0; a < 5; a++)
{
cassettieraGriglia.push(new Array(4))
}
console.log(cassettieraGriglia);
// [Array[4], Array[4], Array[4], Array[4], Array[4]]
All’interno del ciclo for abbiamo inserito nell’array 5 elementi. Ognuno di questo elemento è a sua volta un array e lo abbiamo creato con la struttura new Array(4).
Quest’ultima sintassi ci permette di creare un array di lunghezza pari a 4 ma in cui al suo interno, ancora nessun elemento è stato definito. Se avessimo definito 0 al posto del numero 4, l’array sarebbe di lunghezza 0, quindi senza nessun elemento al suo interno.
E’ anche possibile inserire subito dei valori all’interno dell’array, in questo mod:
for(var a = 0; a < 5; a++)
{
cassettieraGriglia.push([4,"ca",true,false])
}
Quindi ora all’interno di ogni array (che a sua volta è all’interno di un array), avremo 4 valori.
Per prendere il primo valore all’interno del primo array, dovremmo scrivere così:
console.log(cassettieraGriglia[0][0]); // 4
Nella prima parentesi andiamo a indicare l’indice dell’array generale “cassettieraGriglia”. In questo modo stiamo raggiungendo il primo array inserito in “cassettieraGriglia”. Con il secondo indice fra parentesi quadre, andiamo quindi a prendere il primo valore del primo array, quindi il valore 4.
Lo stesso codice può essere scritto in due passaggi per essere più leggibile:
var primoArray = cassettieraGriglia[0]; console.log(primoArray[0]); // 4
In questo modo abbiamo prima creato una variabile dove memorizzare il primo array e successivamente abbiamo visualizzato il primo valore contenuto in questa variabile.
Di seguito un esempio leggermente più complesso per inserire nella nostra “cassettiera” dei valori e per visualizzarli subito dopo. La tecnica usata è quella di utilizzare due cicli for innestati:
var cont = 0;
for(var row = 0; row < 5; row++)
{
var newCol = [];
for(var col = 0; col < 4; col++)
{
newCol.push(cont)
cont++;
}
cassettieraGriglia.push(newCol)
}
for(var row = 0; row < 5; row++)
{
var singleLine = "";
for(var col = 0; col < 4; col++)
{
singleLine += cassettieraGriglia[row][col];
if(col < 3)
singleLine += ", "
}
console.log(singleLine);
}
in questo caso, l’output in console, sarà il seguente:
0, 1, 2, 3 4, 5, 6, 7 8, 9, 10, 11 12, 13, 14, 15 16, 17, 18, 19
Direi che per ora questo può bastare per un primo approccio alle variabili.