La differenza tra variabili locali e variabili globali in Javascript

Il linguaggio Javascript distingue le variabili in variabili locali e variabili globali

Variabili globali

Le variabili globali possono essere lette da qualsiasi punto dello script e della pagina

Qualsiasi variabile dichiarata in una pagina web al di fuori di una funzione è disponibile per tutti gli script sulla pagina web.

Ad esempio, definisco una variabile in uno script e poi cerco di accedere alla variabile da un altro script della pagina

<script>
var prova;
prova=20;
</script>

<script>
document.write(prova)
</script>

La variabile prova è una variabile globale.

Il secondo script accede alla variabile prova e stampa il contenuto a video anche se si trova in un altro script della pagina web.

20

Per questa ragione le variabili globali sono anche dette variabili di pagina.

La durata di una variabile globale coincide con la durata della pagina web.

Anche le funzioni possono accedere alle variabili globali.

Ad esempio, la funzione somma() accede e stampa alla variabile prova

<script>
var prova="Hello";
</script>

<script>
function somma(a,b) {
var sum;
sum=a+b;
document.write(prova);
}

somma(2,3);

Il risultato in output è

Hello

Pro e contro delle variabili globali

L'uso delle variabili globali in diversi script della pagina è molto comodo ma anche rischioso.

Si potrebbero creare dei bug difficili da individuare tramite l'attività di debug, perché una qualsiasi modifica in uno script influenza il funzionamento di tutti gli altri della pagina.

Pertanto, quando è possibile preferisco lavorare con le variabili locali. In questo modo riduco anche l'utilizzo spazio di memoria.

Uso le variabili globali soprattutto per condividere i dati tra le varie funzioni della pagina web.

Nota. Javascript utilizza la garbage collection. Periodicamente controlla quali variabili non sono più in uso liberando la memoria.

Variabili locali

Le variabili locali sono le variabili interne alle funzioni.

Le variabili locali sono visibili solo all'interno della funzione. Nessun codice esterno alla funzione può accedervi.

Hanno una durata limitata all'esecuzione della funzione.

Ad esempio la variabile sum è visibile solo all'interno della funzione somma()

<script>
function somma(a,b) {
var sum;
sum=a+b;
document.write(sum);
}

somma(1,2);
</script>

Al termine dell'esecuzione le funzioni non mantengono in memoria i valori delle variabili locali. Tutti i valori delle variabili locali sono persi.

Quando richiamo la funzione, i valori delle variabili locali sono nuovamente inizializzati.

Se voglio mantenere in memoria una variabile locale devo restituire il valore al codice chiamante tramite l'istruzione return.

<script>
function somma(a,b) {
var sum;
sum=a+b;
return(sum);
}

var s;
s=somma(1,2);
document.write(s);
</script>

Una variabile locale può anche avere lo stesso nome di una variabile globale.

La variabile locale non sovrascrive la variabile globale. Al termine dell'esecuzione la variabile globale conserva il suo valore.

Tuttavia, in questo caso la variabile globale non può essere letta nella funzione.

<script>
function nomefunzione() {
var prova="Hello";
document.write(prova);
}

var prova="World";
nomefunzione();
document.write(prova);
</script>

L'output dello script è

HelloWorld

Alcune buone pratiche sulle variabili locali

In genere uso nomi diversi per definire le variabili locali all'interno delle funzioni.

Utilizzare gli stessi nomi di variabile in diverse funzioni è possibile ma crea confusione e rende più difficoltosa la leggibilità del codice.

<script>
function somma2(a,b) {
var sum2;
sum2=a+b;
return(sum2);
}

function somma3(a,b,c) {
var sum3;
sum3=a+b;
return(sum3);
}
</script>

Inoltre, dichiaro le variabili globali usando dei nomi con un prefisso comune (es. global_nomevariabile).

In questo modo distinguo a colpo d'occhio le variabili globali dalle variabili locali.

<script>
function somma(a,b) {
var sum;
sum=a+b;
return(sum);
}

var gl_sum;
gl_sum=somma(1,2);
document.write(gl_sum);
</script>

E così via.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Javascript

Le strutture di controllo

Gestione degli errori ed eccezioni

Le strutture cicliche

FAQ