Variabler i JavaScript är essentiella för att lagra och bearbeta data. Det är viktigt att förstå var dessa variabler är giltiga och vilka delar av din kod de kan få åtkomst till. Med tanke på de olika typerna av variabler – globala och lokala – är förståelsen av „Scopes“ (synlighetsområde) av grundläggande betydelse. Låt oss därför dyka in och ta reda på vad som gäller för globala och lokala variabler.
Viktigaste insikter
- Globala variabler är tillgängliga överallt i koden, medan lokala variabler endast är synliga inom sin funktion.
- Att definiera en variabel utanför en funktion gör den global, medan att definiera inom en funktion gör den lokal.
- För en tydlig och underhållsvänlig struktur av koden är det fördelaktigt att deklarera globala variabler i början av skriptet.
Steg-för-steg-guide
Definition av variabler och deras synlighet
I det första steget ska vi titta på hur du kan skapa en variabel och vad dess synlighet betyder. Om du deklarerar en variabel utanför varje funktion, som i följande exempel, är den global.

Här skapar vi en global variabel som heter minVariabel.
Skapa funktioner med lokala variabler
Nästa steg är att skapa två funktioner. Vi kallar en funktion lokalFunktion, där vi skapar en lokal variabel. Denna variabel är bara synlig inom funktionen. Låt oss definiera vår funktion.
I lokalFunktion skapar du en lokal variabel lokalV med värdet 5 och skriver ut det.
Anropa funktionerna
Nu vill vi anropa lokalFunktion för att skriva ut siffran 5. Efter att vi har anropat funktionen i koden ser utskriften ut så här:
Testa synligheten av den lokala variabeln
Nu försöker vi använda den lokala variabeln lokalV i en annan funktion. Du kommer att märka att detta inte fungerar. Låt oss göra ett anrop till annanFunktion och se vad som händer.
Vi får ett felmeddelande eftersom variabeln lokalV endast är synlig inom lokalFunktion.
Kontrollera fel i konsolen
För att bättre förstå varför felet uppstår, undersöker vi koden i konsolen. Genom att högerklicka och välja "Granska" kan du öppna DOM-explorern och konsolen för att analysera felet.

Där visas det att lokalV är undefined. Detta stärker antagandet att variabeln inte existerar utanför sin funktion.
Definiera en global variabel
Låt oss nu skapa en global variabel som vi kan använda i båda funktionerna. Vi kallar denna variabel globalVariabel och ger den ett enkelt textvärde.

Nu kan denna globala variabel anropas i båda funktionerna, och utskriften kommer att vara densamma. Låt oss testa det en gång.

Variabler, definition och anropsordning
Det är viktigt att notera att ordningen av variabel- och funktionsdefinitioner är avgörande. Om du skapar en global variabel under dess användning kommer detta att leda till ett undefined-problem.
Det beror på att funktionen som behöver den globala variabeln anropar den innan den har definierats. För att undvika detta är det lämpligt att definiera globala variabler längst upp i koden.
Mer om lokala variabler och deras användning
Nu skapar vi återigen en lokal variabel i en annan funktion. Här kallar vi den lokalVariabel och sätter dess värde till 12.
Vi kan också använda denna lokala variabel, men endast inom sin egen funktion, inte i andra. Om du använder båda lokala variabler kan det eventuellt skapa tålamod och ordning i dina program beroende på komplexiteten.
Sammanfattning av koncepten
Du har nu förstått de grundläggande koncepten kring synlighet och omfång av variabler i JavaScript. Globala variabler är synliga för alla funktioner, medan lokala variabler endast existerar inom sin funktion. Det är lämpligt att definiera globala variabler på en central plats i koden för att förbättra läsbarheten och underhållbarheten.
Sammanfattning – Synligheten av variabler i JavaScript
Sammanfattningsvis har du lärt dig att sättet du definierar variabler på har en direkt inverkan på deras synlighet och omfång. Var alltid medveten om var du placerar dina variabler för att undvika fel.
Vanliga frågor
Vad är globala variabler?Globala variabler är variabler som deklareras utanför funktioner och är därmed tillgängliga i hela skriptet.
Vad är lokala variabler?Lokala variabler är variabler som skapas inom en funktion och är endast synliga inom denna funktion.
Hur kan jag bäst använda globala variabler?Det rekommenderas att definiera globala variabler i början av skriptet för att säkerställa en tydlig struktur och bättre underhållbarhet.
Kan jag använda lokala variabler utanför sin funktion?Nej, lokala variabler är endast synliga inom den funktion där de definierades.
Hur hanterar jag undefined-fel?Var uppmärksam på i vilken ordning du definierar variabler och funktioner för att säkerställa att de nödvändiga variablerna är definierade innan de används.