Variabili e tipi di dati in JavaScript. Parte 3 Corso di JavaScript da Principiante ad Avanzato in 10 post sul blog

Questa è la parte 3 della serie di post sul blog JavaScript che ti aiuterà ad esplorare l’argomento delle variabili e dei tipi di dati in JavaScript. Alla fine di questa serie conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Senza ulteriori indugi, iniziamo con il terzo tutorial.

Variabili e tipi di dati in JavaScript – indice:

1. Variabili
2. Tipi di dati di base in JavaScript

In questo post del blog continueremo da dove ci eravamo lasciati nel secondo post del blog. A questo punto dovresti avere aperto il tuo browser Google Chrome e, più specificamente, avere aperta la console JavaScript. Se per qualche motivo le hai chiuse, sarebbe un buon momento per riaprirle.

Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere “Option + Command + J”, dopo aver aperto Chrome. Se stai usando un dispositivo Windows, puoi usare la scorciatoia da tastiera “Control + Shift + J” per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare nel menu in alto e selezionare Visualizza -> Sviluppatore -> Console JavaScript.

Variabili

Le variabili in JavaScript o in qualsiasi altro linguaggio di programmazione sono estremamente comuni. E c’è un buon motivo per questo. Le variabili hanno un ruolo molto critico nella programmazione. In poche parole, le variabili ti permettono di memorizzare dei dati per spostare i dati, modificarli, aggiornarli o eliminarli nel tuo programma. È un concetto così importante che ci sono 3 modi per creare variabili. Il gergo di programmazione per creare variabili è chiamato “dichiarare variabili”, il che significa fondamentalmente che stiamo dichiarando una variabile nella memoria del computer.

Per creare le variabili utilizzeremo una delle 3 parole chiave e sono: “var”, “let” e “const”. Una delle prime cose che dovresti sapere su queste 3 parole chiave è che fino al 2015, veniva utilizzata solo la parola chiave “var” e le parole chiave “let” e “const” sono state introdotte con uno standard JavaScript chiamato ES6 o ES2015.

Se non hai idea di cosa sia ES6 o ES2015, ecco cosa dovresti sapere. Quando JavaScript è stato lanciato per la prima volta, diverse aziende hanno implementato diverse versioni di JavaScript, e doveva esserci uno standard affinché il tuo codice funzionasse in modo prevedibile e affidabile in tutti i principali browser. Così un’organizzazione chiamata ECMA (European Computer Manufacturing Association) ha elaborato un insieme di standard JavaScript che i browser dovrebbero implementare. In modo che, finché segui quegli standard quando scrivi JavaScript, il tuo codice dovrebbe funzionare in modo prevedibile secondo quegli standard. Questo standard è chiamato EcmaScript e rilasciano gli standard aggiornati dal 1997. E dal 2015, rilasciano questi standard annualmente, e quindi l’ultimo standard rilasciato è chiamato ES2021 al momento della scrittura di questo post del blog.

Ma non tutte le versioni sono uguali, alcune differenze di versione non sono così grandi, mentre altre introducono cambiamenti piuttosto significativi nel linguaggio. Gli ultimi cambiamenti importanti sono avvenuti con ES2015, chiamato anche ES6, poiché è stata la versione sei della standardizzazione ECMAScript. Uno dei cambiamenti significativi ha riguardato le dichiarazioni delle variabili.

Prima di ES6, veniva utilizzata solo la parola chiave “var” ed era l’unico modo per dichiarare variabili, da cui il nome “var”. La parola chiave var presentava flessibilità che poteva causare problemi indesiderati. Poiché era significativamente flessibile nell’uso, era più facile commettere errori con le variabili se non si prestava la dovuta attenzione. Ad esempio, se dichiaravi una variabile chiamata “user1”, non puoi ridefinire una variabile chiamata user1 con le nuove parole chiave “let” e “const”, ma potresti farlo con la parola chiave “var”. E se dimentichi di avere già un user1 nel tuo programma, la seconda volta che dichiari user1 con le informazioni di un altro utente, sovrascriveresti le informazioni del primo utente, il che eliminerebbe effettivamente le informazioni del primo utente.

// questo può causare confusione
var user1 = "John";
var user1 = "Jack";
// se provi a fare la stessa cosa 
// con let o const otterrai un errore
let user1 = "John";
let user1 = "Jack";
// allo stesso modo otterrai anche un errore
// se provi a fare la stessa cosa con la parola chiave const
const user1 = "John";
const user1 = "Jack";

Ma non è che non vedrai mai la parola chiave “var” utilizzata, la vedrai sicuramente, specialmente in alcuni corsi di JavaScript per principianti. Soprattutto se sono di qualche anno fa, ci sono molti tutorial che ti mostreranno ancora il vecchio modo di scrivere JavaScript. Ma la realtà è che non è più la migliore pratica utilizzarla. Invece, la migliore pratica è utilizzare le parole chiave “let” o “const” quando dichiari variabili, a seconda delle tue esigenze. Ma di quali esigenze stiamo parlando? In poche parole, se prevedi di cambiare il valore all’interno di una variabile, vorrai usare la parola chiave “let”, se sai che non cambierai il valore in una variabile, vorrai optare per “const”. Vediamo alcuni esempi di dichiarazioni di variabili utilizzando sia let che const.

// possiamo usare "let" quando vogliamo tenere traccia del livello di gioco dell'utente
// perché sappiamo che cambierà
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// possiamo usare la parola chiave "const" quando dichiariamo l'ID utente
// perché sappiamo che non lo cambieremo
const userId = 1010101999;

Se hai notato dal codice sopra, con le ultime migliori pratiche, scriviamo solo le parole chiave di dichiarazione una volta, e lo facciamo quando dichiariamo per la prima volta la variabile. Quando vogliamo cambiare il valore all’interno della variabile in seguito, non usiamo alcuna parola chiave prima del nome della variabile.

Quando vogliamo accedere ai dati che queste variabili o costanti contengono, possiamo semplicemente usare il loro nome. Ad esempio, se vogliamo mostrare all’utente il suo livello di gioco e il suo ID utente, possiamo farlo con il seguente codice:

// possiamo aggiungere l'ID utente alla fine della frase con un segno più
// spiegheremo questo più avanti nel tutorial
alert("Il tuo ID utente è: " + userId);
// possiamo anche mostrare all'utente il suo livello di gioco come segue
alert("Il tuo attuale livello di gioco è: " + gameLevel);
// in alternativa possiamo visualizzare direttamente 
// il contenuto delle variabili mostrandole all'interno di un avviso
alert(userId);
alert(gameLevel);

Eseguire gli ultimi due blocchi di codice fornirebbe i seguenti output:

Come nominare le tue variabili?

Quando nomini le tue variabili ci sono alcune regole e convenzioni che dovresti considerare. La prima considerazione è quali caratteri puoi usare per nominare le tue variabili? Possono iniziare o finire con un numero? C’è una verità comune non detta per nominare le tue variabili? Rispondiamo a tutto questo e altro ancora.

Diversi linguaggi di programmazione hanno diverse convenzioni per nominare le variabili. In JavaScript la convenzione è di nominarle con quello che si chiama “camel casing”, e funziona così. Se il nome della variabile ha solo una parola, allora scrivi semplicemente quella parola in minuscolo. Se ci sono più parole nel nome della variabile, allora scrivi la prima parola in minuscolo e capitalizzi tutte le parole successive e le scrivi senza spazi o altri segni. Ad esempio, se stiamo creando un gioco, potremmo nominare le variabili in questo modo:

// una variabile con una sola parola
let strength = 50;
// un nome descrittivo che include più parole
let numberOfArrowsLeft = 145;

Oltre a utilizzare caratteri alfabetici, possiamo anche usare numeri, il simbolo del dollaro e il simbolo di sottolineatura nei nomi delle variabili. È importante notare che non puoi iniziare il nome della variabile con un numero, ma puoi terminarlo con un numero.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Nota che solo perché è possibile, non vogliamo nominare le nostre variabili con nomi poco chiari o con simboli. E questo è un altro argomento a sé. Quando nomini le variabili, la convenzione è di avere nomi chiari e descrittivi. Ad esempio, se dobbiamo nominare una variabile per indicare quanti frecce sono rimaste nella borsa di un arciere, dovremmo usare un nome descrittivo come quello che abbiamo usato nell’esempio sopra. Se usassimo solo:

let x = 145;

Questo nome non ci direbbe nulla sul valore che contiene. E anche un paio di giorni dopo aver scritto questo codice, dovremmo leggere il codice circostante per capire cosa potrebbe significare quella variabile. Ecco perché, sia per la tua chiarezza quando scrivi il codice, sia per il tuo futuro io che potrebbe rivedere il codice, è davvero importante abituarsi a nominare le tue variabili in modo chiaro e descrittivo. Questo diventerà ancora più importante quando inizierai a lavorare con altre persone e a mostrare loro il tuo codice.

A questo punto potresti pensare che: È fantastico che possiamo spostare i dati e persino cambiarli usando le variabili. Ma quali dati stiamo trattando qui? Perché abbiamo messo alcune parti tra virgolette e altre no? Per rispondere a tutto questo e altro ancora, vediamo i tipi di dati di base in JavaScript.

Tipi di dati di base in JavaScript

Diversi tipi di dati sono bravi a fare cose diverse. In questo tutorial sui tipi di dati di base in JavaScript vedremo i 3 tipi di dati più basilari che sono comunemente usati in JavaScript. Più avanti nella serie impareremo altri tipi di dati in JavaScript. Una volta che impari questi primi 3 tipi di dati di base, sarà molto più facile imparare gli altri tipi di dati. I 3 tipi di dati che vedremo in questo tutorial sono: Stringhe, Numeri e Booleani. Senza ulteriori indugi, iniziamo con il primo.

Stringhe

Se hai seguito il tutorial dall’inizio, hai già lavorato con il tipo di dato stringa! Quando abbiamo scritto un avviso che diceva “Ciao, Mondo!” stavamo usando il tipo di dato stringa per memorizzare il testo che abbiamo scritto. In JavaScript ci sono 3 modi per rappresentare le stringhe. Il primo è racchiudere il tuo testo tra virgolette doppie. Il secondo è racchiudere il tuo testo tra virgolette singole. E il terzo è racchiudere il tuo testo tra backticks. Tutti e tre appaiono così:

const string1 = "Alcuni testi qui.";
const string2 = 'Alcuni testi qui.';
const string3 = `Alcuni testi qui.`;

Come puoi vedere, quello con i “backticks” sembra piuttosto simile a quello con le virgolette singole, ma è leggermente più rilassato. L’uso dei backticks per creare stringhe è una funzionalità introdotta con ES6, per facilitare il lavoro con i dati testuali. Fornisce numerosi vantaggi rispetto agli altri due. Per convenzione, potresti vedere più spesso l’uso delle virgolette doppie o dei backticks. Puoi trovare i backticks sul tasto a sinistra del numero 1, sulla tua tastiera.

L’uso delle virgolette doppie sembra più familiare ed è più facile da comprendere a prima vista, ma i backticks offrono più vantaggi complessivamente. In questo esempio, tutti e 3 funzionano allo stesso modo poiché è un esempio semplice. Per visualizzare tutti e tre contemporaneamente, o anche nella stessa riga, una cosa che possiamo fare è scrivere i loro nomi e usare il segno più tra di essi, in modo da aggiungere le stringhe l’una all’altra.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Come puoi vedere, tutti e 3 vengono visualizzati subito dopo che uno di essi termina. Questo perché abbiamo semplicemente detto all'interprete di aggiungere le stringhe l'una all'altra. Se vogliamo aggiungere spazi tra di loro, possiamo sempre aggiungere quello spazio con un'altra stringa.</p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Possiamo anche controllare il tipo di dato di una variabile scrivendo “typeof” davanti ad essa. Ad esempio:

alert(typeof string1);

Numeri

Quando lavoriamo con numeri in JavaScript, generalmente utilizziamo il tipo di dato “Number”. È il più semplice per iniziare e non presenta quasi alcuna curva di apprendimento.

Quando digitiamo un numero, esso è rappresentato nel tipo numero. E se assegniamo quel numero a una variabile o a una costante, avranno anche loro il tipo di dato numero.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Oltre ai numeri regolari, JavaScript fornisce anche altre funzionalità che possono aiutarci a scrivere codice più sicuro e prevedibile. Ad esempio, in JavaScript possiamo avere qualcosa chiamato “Infinity”, ed è esattamente ciò che sembra. Inoltre, può essere positivo o negativo. Vediamo come appare con un esempio.

// possiamo dividere per zero e questo non genera un errore
// invece restituisce Inifinity
alert(13 / 0);

// allo stesso modo possiamo ottenere anche l'infinito negativo
alert(-25 / 0);

Come hai già visto con un paio di esempi, possiamo anche eseguire operazioni aritmetiche con i numeri. Dalla semplice addizione, sottrazione, moltiplicazione, divisione fino ad operazioni aritmetiche più specifiche per la programmazione. Impareremo di più su di esse nel prossimo tutorial.

Booleani

I booleani sono estremamente comuni nella programmazione. La maggior parte delle volte non utilizzeremo esplicitamente i loro nomi, ma utilizzeremo la loro semplice proprietà sotto il cofano. Un booleano può avere due valori: “true” e “false” e sono esattamente ciò che sembrano. Molte volte ti troverai a scrivere codice per fare un confronto e una conclusione basata sul risultato di quel confronto.

Molte volte questi confronti derivano da scenari della vita reale e seguono una logica semplice. La luce è accesa o spenta? Sta piovendo fuori? Hai fame? Questo numero è più grande dell’altro numero? Questo paragrafo è più lungo del successivo? L’utente è su uno schermo grande?

Ci sono molte volte in cui non vuoi semplicemente avere un valore numerico o un valore stringa per le cose, ma vuoi effettivamente una risposta sì o no. In poche parole, in quei momenti, utilizzeremo il tipo di dato booleano.

// il primo numero è più grande del secondo
alert(13 > 12);

// controlla il tipo di variabile
let isRainyOutside = true;
alert(typeof isRainyOutside);

Eseguire questo codice ci darebbe il seguente output:

Ora sai tutto sulle variabili e i tipi di dati in JavaScript. Nel prossimo post del blog utilizzeremo questi tipi di dati per iniziare a prendere decisioni nel nostro codice e molto altro!

Se ti piace il nostro contenuto non dimenticare di unirti alla comunità di Facebook!