Variabili globali e locali in JavaScript

Variabili in JavaScript sono essenziali per memorizzare e elaborare i dati. È importante comprendere dove queste variabili sono valide e quali parti del tuo codice possono accedere ad esse. Date le diverse tipologie di variabili – globali e locali – la comprensione dello “scope” (ambito di visibilità) è fondamentale. Quindi immergiamoci e scopriamo cosa significano le variabili globali e locali.

Principali punti da ricordare

• Le variabili globali sono accessibili ovunque nel codice, mentre le variabili locali sono visibili solo all'interno della loro funzione.
• Definire una variabile al di fuori di una funzione la rende globale, mentre definirla all'interno di una funzione la rende locale.
• Per una chiara e manutenibile struttura del codice, è vantaggioso dichiarare le variabili globali all'inizio dello script.

Guida passo passo

Definizione di variabili e la loro visibilità

Nel primo passo vedremo come creare una variabile e cosa significa la sua visibilità. Quando dichiari una variabile fuori da qualsiasi funzione, come mostrato nel seguente esempio, questa è globale.

Qui creiamo una variabile globale chiamata meineVariable.

Creazione di funzioni con variabili locali

Successivamente, creiamo due funzioni. Una funzione la chiameremo localeFunktion, in cui creeremo una variabile locale. Questa variabile è visibile solo all'interno della funzione. Definiamo la nostra funzione.

Nella localeFunktion, crei una variabile locale localeV con il valore 5 e la stampi.

Chiamata delle funzioni

Ora vogliamo chiamare la localeFunktion per stampare il numero 5. Dopo aver chiamato la funzione nel codice, l'output sarà il seguente:

Test della visibilità della variabile locale

Adesso proviamo a utilizzare la variabile locale localeV in un'altra funzione. Ti accorgerai che questo non funziona. Facciamo una chiamata alla andereFunktion e vediamo cosa succede.

Riceveremo un errore perché la variabile localeV è visibile solo all'interno della funzione localeFunktion.

Verifica degli errori nella console

Per capire meglio perché si verifica l'errore, esaminiamo il codice nella console. Con un clic destro e selezionando “Ispeziona”, puoi aprire l'esploratore DOM e la console per analizzare l'errore.

Lì viene mostrato che localeV è undefined. Questo rafforza l'idea che la variabile non esiste al di fuori della sua funzione.

Definizione di una variabile globale

Ora creiamo una variabile globale che potremo utilizzare in entrambe le funzioni. La chiameremo globaleVariable e le daremo un semplice valore di testo.

Ora questa variabile globale può essere chiamata in entrambe le funzioni e l'output sarà lo stesso. Proviamo a fare una prova.

Definizione delle variabili e ordine di chiamata

È importante notare che l'ordine delle definizioni di variabili e funzioni è cruciale. Se crei una variabile globale al di sotto del suo utilizzo, questo porterà a un problema di undefined.

Questo perché la funzione che necessita della variabile globale la chiama prima della sua definizione. Per evitare ciò, è consigliabile definire le variabili globali all'inizio del codice.

Ulteriori informazioni sulle variabili locali e il loro utilizzo

Ora creiamo nuovamente una variabile locale in un'altra funzione. Qui la chiameremo localeVariable e imposteremo il suo valore su 12.

Anche questa variabile locale può essere utilizzata, ma solo all'interno della sua funzione, non in altre. Se usi entrambe le variabili locali, ciò può richiedere pazienza e ordine nei tuoi programmi, a seconda della complessità.

Riepilogo dei concetti

Hai ora compreso i concetti di base sulla visibilità e sullo scope delle variabili in JavaScript. Le variabili globali sono visibili a tutte le funzioni, mentre le variabili locali esistono solo all'interno della loro funzione. È consigliabile definire le variabili globali in un punto centrale del codice per migliorare la leggibilità e la manutenibilità.

Riepilogo – La visibilità delle variabili in JavaScript

In sintesi, hai imparato che il modo in cui definisci le variabili ha un impatto diretto sulla loro visibilità e ambito. Fai sempre attenzione a dove posizioni le tue variabili per evitare errori.