Introduzione ai Tipi di Dato in JavaScript: basi pratiche per scrivere codice affidabile

Introduzione

Quando si inizia a studiare JavaScript, uno dei primi passi davvero importanti è capire i tipi di dato. Non si tratta solo di teoria: conoscere bene i tipi ti aiuta a evitare bug, a fare controlli corretti e a scrivere codice più leggibile e robusto.

JavaScript è un linguaggio dinamicamente tipizzato, quindi il tipo di una variabile può cambiare durante l’esecuzione. Questo rende il linguaggio molto flessibile, ma anche potenzialmente insidioso se non si presta attenzione. Per esempio, una variabile può contenere prima un numero e poi una stringa, senza errori immediati. Per questo è fondamentale capire come funzionano i tipi base e come gestirli in modo consapevole.

In questo tutorial vedremo un sotto-argomento pratico e utilissimo: i tipi di dato fondamentali in JavaScript e i controlli di base. Useremo esempi semplici ma realistici, utili per chi sta iniziando e vuole costruire basi solide.

Codice completo

// Esempio pratico: gestione dei tipi di dato in JavaScript

// 1. Stringa
let nome = "Luca";

// 2. Numero
let eta = 28;

// 3. Booleano
let isIscritto = true;

// 4. Valore nullo
let telefono = null;

// 5. Valore non definito
let indirizzo;

// 6. Array
let competenze = ["HTML", "CSS", "JavaScript"];

// 7. Oggetto
let utente = {
  nome: "Luca",
  eta: 28,
  isIscritto: true
};

// Controllo del tipo di una variabile
console.log(typeof nome);        // "string"
console.log(typeof eta);         // "number"
console.log(typeof isIscritto);  // "boolean"
console.log(typeof telefono);    // "object" (caso storico particolare di JavaScript)
console.log(typeof indirizzo);    // "undefined"
console.log(typeof competenze);   // "object"
console.log(typeof utente);       // "object"

// Funzione che accetta solo numeri
function calcolaAnnoNascita(eta) {
  if (typeof eta !== "number") {
    return "Errore: il valore deve essere un numero.";
  }

  const annoCorrente = 2026;
  return annoCorrente - eta;
}

console.log(calcolaAnnoNascita(28));      // 1998
console.log(calcolaAnnoNascita("28"));    // Errore: il valore deve essere un numero.

// Conversione esplicita di tipo
let prezzo = "49.99";
let prezzoNumerico = Number(prezzo);

console.log(prezzoNumerico + 10); // 59.99

// Attenzione alla somma tra stringhe e numeri
let valore1 = "5";
let valore2 = 3;

console.log(valore1 + valore2); // "53" (concatenazione)
console.log(Number(valore1) + valore2); // 8

// Verifica se un valore è un numero valido
let inputUtente = "42";

if (!isNaN(Number(inputUtente))) {
  console.log("Valore valido:", Number(inputUtente));
} else {
  console.log("Il valore non è un numero.");
}

Spiegazione

Vediamo ora con calma cosa succede nel codice.

1. Le variabili possono contenere tipi diversi

Abbiamo creato variabili con contenuti differenti:

• string: testo, come "Luca"
• number: numeri interi o decimali, come 28
• boolean: valori logici, cioè true o false
• null: rappresenta l’assenza intenzionale di un valore
• undefined: indica una variabile dichiarata ma non ancora valorizzata
• array: liste ordinate di elementi
• object: raccolte di coppie chiave-valore

Questi sono i mattoni fondamentali con cui costruirai quasi tutte le applicazioni JavaScript.

2. typeof serve per controllare il tipo

L’operatore typeof restituisce una stringa che descrive il tipo di una variabile. È molto utile nei controlli iniziali, ad esempio quando vuoi verificare se un input è davvero un numero.

Nel codice abbiamo visto che typeof nome restituisce "string", mentre typeof eta restituisce "number".

Nota importante: typeof null restituisce "object". È una particolarità storica di JavaScript, quindi conviene ricordarla per non confondersi.

3. Controllare i dati prima di usarli

La funzione calcolaAnnoNascita mostra una buona abitudine: prima di fare un calcolo, verifica che il parametro sia davvero un numero.

Questo evita errori come:

• somma di numeri e stringhe non voluta
• risultati NaN (Not a Number)
• comportamenti imprevedibili quando i dati arrivano da un form o da un’API

4. Conversione esplicita dei tipi

In JavaScript, spesso è necessario convertire un valore da un tipo all’altro. Nel tutorial abbiamo usato Number(prezzo) per trasformare la stringa "49.99" in un numero vero.

Questa pratica è molto importante quando ricevi dati da:

• campi di input HTML
• query string nell’URL
• file JSON
• servizi esterni

Un esempio classico è la somma tra stringhe e numeri. Se scrivi "5" + 3, JavaScript non fa una somma matematica: esegue una concatenazione e ottieni "53". Per questo è meglio convertire sempre i valori quando ti aspetti un numero.

5. Verificare numeri validi

Nel blocco finale abbiamo usato isNaN(Number(inputUtente)) per controllare se un valore è numerico. È una tecnica semplice, ma utile per gestire input testuali prima di elaborarli.

Per esempio, se un utente inserisce "42", la conversione in numero funziona. Se invece inserisce "ciao", il controllo rileva che non è un numero valido.

Best practice

Con i tipi di dato in JavaScript, alcune abitudini fanno davvero la differenza. Ecco le più importanti.

• Usa conversioni esplicite: evita di affidarti troppo alle conversioni automatiche del linguaggio.
• Controlla gli input esterni: tutto ciò che arriva da form, API o URL va validato.
• Non mescolare tipi senza motivo: una variabile dovrebbe avere un significato chiaro e coerente.
• Impara a riconoscere null e undefined: sono simili, ma non equivalenti.
• Usa nomi di variabili descrittivi: eta, prezzo, isIscritto sono molto più chiari di x o valore.
• Evita confronti ambigui: quando possibile preferisci === a ==, perché confronta anche il tipo oltre al valore.

Un esempio pratico: se confronti 0 == false, JavaScript restituisce true per via della conversione implicita. Con 0 === false, invece, ottieni false, perché i tipi sono diversi. In generale, l’operatore stretto === è la scelta più sicura.

Riepilogo

Capire i tipi di dato è uno dei primi passi per scrivere buon codice in JavaScript. In questo tutorial abbiamo visto:

• i tipi fondamentali: string, number, boolean, null, undefined, array, object
• come usare typeof per controllare il tipo di una variabile
• perché è importante fare conversioni esplicite
• come evitare errori comuni con input e operazioni matematiche

Se impari bene questi concetti, sarai più sicuro quando passerai a temi più avanzati come funzioni, oggetti, array, DOM e asincronia. I tipi di dato sono una base piccola ma fondamentale: conoscerli bene ti fa risparmiare tempo e ti aiuta a prevenire molti bug.

Approfondisci con risorse ufficiali

• MDN Web Docs - JavaScript data types: documentazione chiara e completa sui tipi di dato
• MDN Web Docs - typeof: guida all’operatore typeof
• MDN Web Docs - Type conversion: approfondimento sulle conversioni tra tipi
• ECMAScript Language Specification: specifica ufficiale del linguaggio, utile per chi vuole andare in profondità

Se vuoi fare pratica, prova a creare una piccola funzione che riceve un valore da un input e decide se trattarlo come numero, testo o booleano. È un ottimo esercizio per consolidare le basi.