JavaScript - Conversioni di Tipo

Ciao a tutti, futuri sviluppatori JavaScript! Oggi esploriamo il mondo affascinante delle conversioni di tipo in JavaScript. Non preoccupatevi se siete nuovi alla programmazione; vi guiderò in questo viaggio passo dopo passo, proprio come ho fatto per centinaia di studenti negli anni della mia insegnanza. Allora, prendete una tazza di caffè (o la vostra bevanda preferita) e iniziamo!

Conversioni di Tipo in JavaScript

Prima di immergerci nei dettagli, cerchiamo di capire cosa significa la conversione di tipo. Immaginate di avere una scatola di Lego, ma alcune pieces sono fatte di legno. Per costruire il vostro castello di Lego, dovete convertire quelle pieces di legno in mattoni Lego. Questo è essenzialmente cosa sia la conversione di tipo in JavaScript - cambiare i dati da un tipo a un altro.

In JavaScript, abbiamo due principali tipi di conversioni:

1. Conversione Implicita (anche chiamata Coercizione di Tipo)
2. Conversione Esplicita (anche chiamata Casting di Tipo)

Esploriamo ciascuna di queste nel dettaglio.

Conversione Implicita

La conversione implicita avviene automaticamente quando JavaScript tenta di eseguire un'operazione su valori di tipi diversi. È come se JavaScript dicesse, "Non preoccuparti, ce ne occupiamo noi!" e converte i tipi dietro le quinte.

Conversione a Stringa (Conversione Implicita)

JavaScript è molto amichevole quando si tratta di convertire cose in stringhe. È come quell'amico che riesce a fare conversazione con chiunque!

let num = 5;
let str = "The number is: " + num;
console.log(str); // Output: "The number is: 5"
console.log(typeof str); // Output: "string"

In questo esempio, JavaScript ha automaticamente convertito il numero 5 in una stringa quando abbiamo usato l'operatore + con una stringa. È come se JavaScript avesse messo delle virgolette attorno al numero per noi.

Conversione a Numero (Conversione Implicita)

Quando si tratta di numeri, JavaScript fa del suo meglio per capire le cose, come farebbe un insegnante di matematica che decifra la scrittura disordinata di uno studente.

let str = "10";
let num = str - 5;
console.log(num); // Output: 5
console.log(typeof num); // Output: "number"

Qui, JavaScript ha visto l'operatore - e ha pensato, "Aha! Dobbiamo fare un'operazione matematica!" Quindi ha convertito la stringa "10" in numero 10 prima di sottrarre 5.

Conversione a Booleano (Conversione Implicita)

JavaScript ha una regola semplice per la conversione a booleani: alcuni valori sono considerati "veri" (truthy) e altri "falsi" (falsy). È come classificare gli studenti in "presenti" e "assenti".

if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}

if (0) {
console.log("This won't run because 0 is falsy");
}

In questi esempi, JavaScript implicitamente converte "Hello" a true e 0 a false.

Null a Numero (Conversione Implicita)

Null è un cliente tricky. Quando viene convertito in un numero, diventa 0. È come quell'allievo che non ha consegnato il compito ma ha comunque preso zero punti.

let x = null;
console.log(+x); // Output: 0

L'operatore unario + tenta di convertire null in un numero, resulting in 0.

Undefined con Numero e Booleano (Conversione Implicita)

Undefined è ancora più tricky. È come quell'allievo che non solo non ha consegnato il compito, ma non era nemmeno iscritto alla classe!

let x;
console.log(+x); // Output: NaN (Not a Number)
console.log(Boolean(x)); // Output: false

Quando si converte a un numero, undefined diventa NaN. Quando si converte a booleano, diventa false.

Conversione Esplicita

La conversione esplicita è quando noi, i programmatori, prendiamo il controllo e diciamo esattamente a JavaScript quale tipo vogliamo. È come essere il regista di un'opera teatrale e dire esattamente agli attori quali ruoli interpretare.

Conversione a Stringa (Conversione Esplicita)

Abbiamo diversi metodi a disposizione per la conversione a stringa:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Output: "123" string
console.log(str2, typeof str2); // Output: "123" string
console.log(str3, typeof str3); // Output: "123" string

Tutti questi metodi raggiungono lo stesso risultato, ma String() e toString() sono più espliciti riguardo alle nostre intenzioni.

Conversione a Numero (Conversione Esplicita)

Per la conversione a numero, abbiamo opzioni simili:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Output: 456 number
console.log(num2, typeof num2); // Output: 456 number
console.log(num3, typeof num3); // Output: 456 number

Number() e parseInt() sono più chiari riguardo a cosa stiamo cercando di fare, mentre l'operatore unario + è un abbreviazione che alcuni sviluppatori utilizzano.

Conversione a Booleano (Conversione Esplicita)

La conversione a booleano è diretta:

let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Output: true boolean
console.log(bool2, typeof bool2); // Output: true boolean

La funzione Boolean() è chiara e leggibile. La doppia negazione (!!) è un'abbreviazione che alcuni sviluppatori utilizzano, ma potrebbe essere confusionaria per i principianti.

Conversione Data a Stringa/Numero

Le date sono un caso speciale in JavaScript. Possono essere convertite sia in stringhe che in numeri:

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Output: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output: 1684154096000 (milliseconds since January 1, 1970)

Convertire una data in una stringa ci dà un formato leggibile dall'uomo, mentre convertire in un numero ci dà i millisecondi trascorsi dall'epoca Unix.

Tabella di Conversione in JavaScript

Per riassumere tutte le metodologie di conversione che abbiamo imparato, ecco una tabella utile:

Valore Originale	a Stringa	a Numero	a Booleano
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Ecco fatto! Abbiamo percorso il territorio delle conversioni di tipo in JavaScript. Ricordate, la pratica rende perfetti, quindi non avete paura di sperimentare con questi concetti. Chi lo sa? Potrebbe persino piacervi il processo di trasformare mattoni Lego in piece di legno e viceversa!

Buon codice, futuri maestri JavaScript!

Credits: Image by storyset