Du har erklært en variabel inne i en funksjon, og så prøver du å bruke den et annet sted i koden. Nettleseren gir deg feilmeldingen "ReferenceError: variabel is not defined", selv om du vet at du erklærte den. Problemet er scope. Scope i JavaScript bestemmer hvor i koden en variabel er tilgjengelig, og det er en av de tingene som skaper mest forvirring for nybegynnere.
Hva betyr scope i JavaScript?
Scope er synlighetsområdet til en variabel. Når du erklærer en variabel, bestemmer plasseringen i koden hvor den er tilgjengelig. En variabel som er erklært inne i en kodeblokk (mellom krøllparenteser) er bare synlig innenfor den blokken. Prøver du å bruke den utenfor, finnes den rett og slett ikke.
Tenk på scope som rom i et hus. En variabel som er erklært i et rom, er bare tilgjengelig i det rommet. Du kan se ut av rommet og bruke ting som finnes i fellesområdene, men du kan ikke se inn i andre rom.
Lokalt scope: variabler inne i funksjoner
Når du lager en funksjon i JavaScript, får den sitt eget scope. Alle variabler du erklærer inne i funksjonen tilhører det scopet og er utilgjengelige utenfor. Dette kalles lokalt scope.
Si at du lager en funksjon som beregner omkretsen av en sirkel. Inne i funksjonen erklærer du en variabel pi med verdien 3.14159. Funksjonen fungerer fint og returnerer riktig svar. Men prøver du å skrive ut pi utenfor funksjonen, får du en feilmelding. Variabelen pi eksisterer bare så lenge funksjonen kjører.
Dette er en fordel, ikke en begrensning. Lokalt scope betyr at variablene dine ikke kolliderer med hverandre. Du kan ha en variabel kalt "resultat" i ti forskjellige funksjoner uten at de påvirker hverandre. Hver funksjon lever i sin egen boble.
Globalt scope: variabler som er tilgjengelige overalt
Variabler som er erklært utenfor alle funksjoner og kodeblokker har globalt scope. De er tilgjengelige fra hvor som helst i koden, inkludert inne i funksjoner.
Hvis du flytter pi-variabelen fra eksempelet over til utenfor funksjonen, kan du bruke den både inne i funksjonen og i resten av koden. Funksjonen kan "se ut" av sitt eget scope og lese globale variabler.
Globale variabler er praktiske i små programmer, men de skaper fort problemer i større prosjekter. Når mange funksjoner deler samme variabel, er det vanskelig å holde oversikt over hvem som endrer hva. En funksjon kan endre en global variabel uten at du er klar over det, og plutselig oppfører koden seg helt annerledes enn forventet.
Blokkscope: let og const inne i kodeblokker
Scope i JavaScript handler ikke bare om funksjoner. Alle kodeblokker, altså alt mellom krøllparenteser, skaper et eget scope når du bruker let eller const. Det gjelder if-setninger, for-løkker og alle andre strukturer som bruker krøllparenteser.
Si at du har en if-setning inne i en funksjon, og du erklærer en variabel med let inne i if-blokken. Den variabelen er bare tilgjengelig innenfor if-blokken. Prøver du å bruke den utenfor, selv om du fortsatt er inne i funksjonen, får du en feilmelding.
Denne oppførselen kalles blokkscope, og det er slik let og const fungerer. Variabelen tilhører alltid den nærmeste kodeblokken den er definert i.
Forskjellen mellom var, let og const i scope
Her er en viktig forskjell som ofte skaper forvirring. Nøkkelordet var oppfører seg annerledes enn let og const når det gjelder scope. Mens let og const har blokkscope, har var det som kalles funksjonscope.
Hva betyr det i praksis? Hvis du erklærer en variabel med var inne i en if-blokk, er den fortsatt tilgjengelig utenfor if-blokken, så lenge du er inne i samme funksjon. Var "bryr seg" bare om funksjonsgrenser, ikke om vanlige kodeblokker. Let og const, derimot, respekterer alle kodeblokker.
En annen forskjell: var lar deg erklære samme variabel to ganger uten feilmelding. Med let og const får du en tydelig feilmelding om du prøver det samme. Denne strengheten er en fordel fordi den fanger opp feil tidlig. Det er derfor de fleste JavaScript-utviklere anbefaler å alltid bruke let og const i stedet for var.
Scope i nøstede funksjoner
Når du har funksjoner inne i andre funksjoner, kan den indre funksjonen lese variabler fra den ytre funksjonen. Men det motsatte gjelder ikke. Den ytre funksjonen har ikke tilgang til variabler i den indre.
Denne mekanismen er konsekvent med resten av scope-reglene: du kan alltid se utover fra der du er, men aldri innover i andre scoper. Det betyr at en funksjon har tilgang til sine egne variabler, variabler i funksjonen som omslutter den, og globale variabler.
Vanlige feil knyttet til scope
Den vanligste feilen er å prøve å bruke en variabel utenfor scopet der den er definert. Feilmeldingen "ReferenceError: [variabel] is not defined" betyr nesten alltid at variabelen er definert i et annet scope enn der du prøver å bruke den.
En annen vanlig feil er å stole for mye på globale variabler. Programmet fungerer fint med fem variabler, men når det vokser til femti, mister du oversikten. En god praksis er å holde variabler så lokale som mulig. Erklær dem i det minste scopet der de trengs.
Scope i JavaScript kan virke som en unødvendig komplikasjon i starten, men det er en av grunnpilarene som gjør store programmer håndterbare. Når du forstår scope, forstår du også hvorfor koden din oppfører seg som den gjør. MDN har en god forklaring av scope med flere eksempler hvis du vil utforske temaet videre.
Denne artikkelen bygger på innhold fra kurset JavaScript for nybegynnere på Utdannet.no. Instruktør Lars Vidar Nordli viser deg scope gjennom praktiske eksempler, og dekker forskjellen mellom var, let og const, funksjonsscope, blokkscope og hvordan du unngår de vanligste fellene.
