Globale og lokale variabler i JavaScript

Variabler i JavaScript er essensielle for å lagre og bearbeide data. Det er viktig å forstå hvor disse variablene er gyldige, og hvilke områder av koden din de kan få tilgang til. Gitt de forskjellige typene av variabler – globale og lokale – er forståelsen av «Scopes» (synlighet) av grunnleggende betydning. La oss derfor dykke inn og finne ut hva som gjelder for globale og lokale variabler.

Viktigste funn

• Globale variabler er tilgjengelige overalt i koden, mens lokale variabler kun er synlige innenfor sin egen funksjon.
• Å definere en variabel utenfor en funksjon gjør den global, mens det å definere innenfor en funksjon gjør den lokal.
• For en klar og vedlikeholdbar struktur i koden er det fordelaktig å deklarere globale variabler i starten av skriptet.

Trinn-for-trinn veiledning

Definisjon av variabler og deres synlighet

I det første trinnet ser vi på hvordan du kan opprette en variabel og hva dens synlighet betyr. Når du deklarerer en variabel utenfor enhver funksjon, som vist i følgende eksempel, er denne global.

Her oppretter vi en global variabel kalt minVariabel.

Opprette funksjoner med lokale variabler

Nå skal vi opprette to funksjoner. En funksjon kaller vi lokalFunksjon, hvor vi lager en lokal variabel. Denne variabelen er kun synlig innenfor funksjonen. La oss definere funksjonen vår.

I lokalFunksjon lager du en lokal variabel lokalV med verdien 5 og skriver den ut.

Kalle funksjonene

Nå vil vi kalle lokalFunksjon for å skrive ut tallet 5. Etter at vi har kalt funksjonen i koden, ser utskriften slik ut:

Testing av synlighet av lokale variabler

Nå prøver vi å bruke den lokale variabelen lokalV i en annen funksjon. Du vil oppdage at dette ikke fungerer. La oss gjøre et kall til annenFunksjon og se hva som skjer.

Vi får en feil fordi variabelen lokalV kun er synlig innenfor lokalFunksjon.

Sjekke feil i konsollen

For bedre å forstå hvorfor feilen oppstår, undersøker vi koden i konsollen. Med høyreklikk og valg av "Inspiser" kan du åpne DOM-utforskeren og konsollen for å analysere feilen.

Der vil det bli vist at lokalV er undefined. Dette bekrefter antagelsen om at variabelen ikke eksisterer utenfor sin funksjon.

Definere en global variabel

La oss nå opprette en global variabel som vi kan bruke i begge funksjoner. Vi kaller denne variabelen globalVariabel og gir den en enkel tekstverdi.

Nå kan denne globale variabelen bli kalt i begge funksjoner, og utskriften vil være den samme. La oss teste det.

Variabler definisjon og kallrekkefølge

Det er viktig å merke seg at rekkefølgen på variabel- og funksjonsdefinisjoner er avgjørende. Når du oppretter en global variabel under dens bruk, vil dette føre til et undefined-problem.

Dette er fordi funksjonen som trenger den globale variabelen, kaller den før den er definert. For å unngå dette, er det lurt å definere globale variabler øverst i koden.

Mer om lokale variabler og deres bruk

Nå skal vi opprette en lokal variabel på nytt i en annen funksjon. Her kaller vi den lokalVariabel og setter verdien dens til 12.

Vi kan også bruke denne lokale variabelen, men bare innenfor sin egen funksjon, ikke i andre. Hvis du bruker begge lokale variabler, kan det sørge for orden og struktur i programmene dine, avhengig av kompleksiteten.

Oppsummering av konseptene

Du har nå forstått de grunnleggende konseptene om synlighet og omfang av variabler i JavaScript. Globale variabler er synlige for alle funksjoner, mens lokale variabler kun eksisterer innenfor sin funksjon. Det er lurt å definere globale variabler på et sentralt sted i koden for å forbedre lesbarheten og vedlikeholdbarheten.

Oppsummering – Synligheten av variabler i JavaScript

Oppsummert har du lært at måten du definerer variabler på har direkte innvirkning på deres synlighet og omfang. Pass alltid på hvor du plasserer variablene dine for å unngå feil.