Variabili JavaScript e tipi primitivi: capire <strong>stringhe, numeri e valori semplici</strong>

by Anastasia P.
SHARE
Variabili JavaScript e tipi primitivi: capire <strong>stringhe, numeri e valori semplici</strong>
© Guida-HTML5.it

Introduzione

Quando si inizia a scrivere JavaScript, uno dei primi passi davvero importanti è capire come funzionano le variabili e i tipi di dati primitivi. Anche se il linguaggio è flessibile e permissivo, una buona comprensione di questi concetti evita molti bug difficili da trovare, soprattutto quando si lavora con input utente, API o dati provenienti da form.

In questo tutorial ci concentriamo su un sotto-argomento molto pratico: come usare variabili e tipi primitivi per rappresentare correttamente dati semplici in un piccolo profilo utente. Vedremo come dichiarare variabili, assegnare valori, riconoscere i tipi e gestire casi comuni come numeri, stringhe e valori booleani.

L’obiettivo non è solo “sapere la teoria”, ma imparare a scrivere codice più chiaro, più robusto e più facile da mantenere.

Codice completo

// Esempio: gestione di un profilo utente semplice

// 1. Variabili con let e const
const nome = "Luca";
let eta = 28;
let isIscritto = true;
let saldo = 125.50;
let nickname = null;

// 2. Uso dei tipi primitivi in un contesto reale
const saluto = "Ciao, " + nome + "!";
const messaggioEta = `Hai ${eta} anni.`;

console.log(saluto);
console.log(messaggioEta);

// 3. Controllo del tipo di dato
console.log(typeof nome);       // string
console.log(typeof eta);        // number
console.log(typeof isIscritto); // boolean
console.log(typeof saldo);      // number
console.log(typeof nickname);   // object (caso storico di JavaScript)

// 4. Aggiornamento di una variabile let
eta = eta + 1;
saldo = saldo - 20;

// 5. Verifica condizionale basata su un booleano
if (isIscritto) {
  console.log("L´utente ha accesso ai contenuti riservati.");
} else {
  console.log("L´utente non è ancora iscritto.");
}

// 6. Gestione di valori mancanti
if (nickname === null) {
  nickname = "utente_" + nome.toLowerCase();
}

console.log("Nickname:", nickname);
console.log("Nuova età:", eta);
console.log("Saldo aggiornato:", saldo);

// 7. Piccola funzione che usa variabili e tipi primitivi
function descriviUtente(nome, eta, isIscritto) {
  return `${nome} ha ${eta} anni e ${isIscritto ? "è iscritto" : "non è iscritto"}.`;
}

console.log(descriviUtente(nome, eta, isIscritto));

Spiegazione

Nel codice abbiamo usato alcuni dei tipi primitivi più comuni in JavaScript:

  • String: usata per il nome e per i messaggi testuali.
  • Number: usata per età e saldo.
  • Boolean: usata per indicare se l’utente è iscritto oppure no.
  • Null: usata per rappresentare un valore intenzionalmente assente.

1. const e let

In JavaScript moderno, la scelta tra const e let è fondamentale:

  • const si usa quando la variabile non deve essere riassegnata.
  • let si usa quando il valore può cambiare nel tempo.

Nel nostro esempio, nome è definito con const perché non ha bisogno di cambiare. Al contrario, eta e saldo sono variabili che possono essere aggiornate, quindi usiamo let.

2. Le stringhe

Le stringhe sono sequenze di caratteri racchiuse tra virgolette singole, doppie o backtick. Sono il tipo più usato per testi, etichette, messaggi e contenuti da mostrare all’utente.

Nel codice abbiamo usato sia la concatenazione classica:

const saluto = "Ciao, " + nome + "!";

sia i template literal, più leggibili e moderni:

const messaggioEta = `Hai ${eta} anni.`;

I template literal sono spesso la scelta migliore quando devi inserire variabili dentro una frase.

3. I numeri

In JavaScript il tipo Number rappresenta sia interi sia decimali. Per esempio, 28 e 125.50 sono entrambi numeri validi.

Questo è utile, ma richiede attenzione: anche se scrivi un valore che sembra intero, JavaScript lo tratta comunque come number. Per questo motivo, operazioni aritmetiche come somma, sottrazione e moltiplicazione funzionano in modo diretto.

4. I booleani

Il tipo boolean può avere solo due valori: true o false. È perfetto per condizioni, permessi, stati e controlli logici.

Nel nostro esempio, la variabile isIscritto decide quale messaggio mostrare all’utente. Questo approccio è molto comune nelle applicazioni reali: abilitare un pulsante, mostrare una sezione, bloccare l’accesso a un contenuto, e così via.

5. Null come valore intenzionale

null indica l’assenza intenzionale di un valore. Non è un errore, ma una scelta esplicita: stai dicendo “qui non c’è ancora niente”.

Nel codice, nickname parte da null perché non è stato ancora deciso. Poi, se il valore è nullo, lo inizializziamo con una stringa generata automaticamente.

Questo pattern è molto utile quando vuoi distinguere tra:

  • valore non ancora assegnato;
  • valore valido ma vuoto;
  • valore mancante per scelta applicativa.

6. typeof per controllare il tipo

L’operatore typeof aiuta a capire il tipo di una variabile. È utile durante il debug e quando ricevi dati da fonti esterne.

Attenzione però a un dettaglio storico: typeof null restituisce "object". È una particolarità nota di JavaScript, non un comportamento da usare come riferimento semantico. Se vuoi verificare null, usa un confronto esplicito:

if (nickname === null) {
  // ...
}

Best practice

  • Usa const di default e passa a let solo quando la variabile deve cambiare.
  • Dai nomi chiari alle variabili: eta, saldo, isIscritto comunicano subito il significato del dato.
  • Evita di mischiare tipi diversi nella stessa variabile: una variabile dovrebbe rappresentare sempre lo stesso concetto.
  • Usa template literal per costruire stringhe dinamiche in modo leggibile.
  • Controlla sempre i dati esterni, soprattutto se arrivano da form o API: potrebbero essere stringhe anche quando ti aspetti numeri.
  • Usa null in modo intenzionale, non come sostituto generico di “vuoto”.
  • Verifica i tipi nei punti critici, ad esempio prima di fare calcoli o confronti logici.

Una buona regola pratica è questa: ogni variabile dovrebbe avere un significato preciso e un tipo coerente. Se una variabile inizia come numero, dovrebbe restare un numero. Se rappresenta uno stato logico, dovrebbe essere un booleano. Questa disciplina rende il codice più prevedibile.

Riepilogo

In questo tutorial abbiamo visto come usare le variabili JavaScript insieme ai tipi primitivi più comuni per modellare dati semplici ma realistici. Abbiamo usato:

  • const per valori stabili;
  • let per valori che cambiano;
  • string per testi e messaggi;
  • number per valori numerici;
  • boolean per stati e condizioni;
  • null per indicare un valore volutamente assente.

La vera forza di questi concetti non sta nella teoria isolata, ma nel loro uso quotidiano: leggere dati, aggiornare stati, mostrare messaggi, fare controlli e prevenire errori. Se impari a gestire bene variabili e tipi primitivi, scriverai codice JavaScript molto più solido.

Approfondisci con risorse ufficiali

  • MDN Web Docs - JavaScript: documentazione completa e aggiornata sul linguaggio.
  • MDN Web Docs - let: guida ufficiale alla dichiarazione di variabili modificabili.
  • MDN Web Docs - const: riferimento per le costanti in JavaScript.
  • MDN Web Docs - typeof: spiegazione dettagliata dell’operatore per identificare i tipi.
  • MDN Web Docs - Primitive: panoramica sui tipi primitivi di JavaScript.

Se vuoi, nel prossimo passo posso trasformare questo tutorial in una versione ancora più pratica con esercizi guidati e mini challenge per studenti intermedi.

SHARE