Globale en lokale variabelen in JavaScript

Variabelen in JavaScript zijn essentieel om gegevens op te slaan en te verwerken. Daarbij is het belangrijk te begrijpen waar deze variabelen geldig zijn en op welke delen van jouw code ze toegang hebben. Gezien de verschillende soorten variabelen – globale en lokale – is het begrijpen van de „Scopes” (zichtbaarheidsgebied) van fundamenteel belang. Laten we daarom duiken en ontdekken wat het is met globale en lokale variabelen.

Belangrijkste inzichten

• Globale variabelen zijn overal in de code toegankelijk, terwijl lokale variabelen alleen binnen hun functie zichtbaar zijn.
• Het definiëren van een variabele buiten een functie maakt deze globaal, terwijl het definiëren binnen een functie deze lokaal maakt.
• Voor een duidelijke en onderhoudsvriendelijke structuur van de code is het voordelig om globale variabelen aan het begin van het script te declareren.

Stap-voor-stap handleiding

Definitie van variabelen en hun zichtbaarheid

In de eerste stap kijken we naar hoe je een variabele kunt aanmaken en wat hun zichtbaarheid betekent. Wanneer je een variabele buiten elke functie declareert, zoals in het volgende voorbeeld getoond, is deze globaal.

Hier maken we een globale variabele genaamd mijnVariabele aan.

Functies maken met lokale variabelen

Vervolgens maken we twee functies. Een functie noemen we lokaleFunctie, waarin we een lokale variabele aanmaken. Deze variabele is alleen binnen de functie zichtbaar. Laten we onze functie definiëren.

In de lokaleFunctie maak je een lokale variabele lokaleV aan met de waarde 5 en geef je deze weer.

De functies aanroepen

Nu willen we de lokaleFunctie aanroepen om het getal 5 weer te geven. Nadat we de functie in de code hebben aangeroepen, ziet de uitvoer er als volgt uit:

Testen van de zichtbaarheid van de lokale variabelen

Nu proberen we de lokale variabele lokaleV in een andere functie te gebruiken. Je zult merken dat dit niet werkt. Laten we een aanroep van de andereFunctie maken en kijken wat er gebeurt.

We krijgen een foutmelding omdat de variabele lokaleV alleen binnen de lokaleFunctie zichtbaar is.

Fouten in de console controleren

Om beter te begrijpen waarom de fout optreedt, onderzoeken we de code in de console. Met een rechtermuisklik en de keuze voor „Inspecteren” kun je de DOM-explorer en de console openen om de fout te analyseren.

Daar wordt weergegeven dat lokaleV undefined is. Dit versterkt de aanname dat de variabele buiten zijn functie niet bestaat.

Een globale variabele definiëren

Laten we nu een globale variabele aanmaken die we in beide functies kunnen gebruiken. We noemen deze variabele globaleVariabele en geven haar een eenvoudige tekstwaarde.

Nu kan deze globale variabele in beide functies worden aangeroepen, en de uitvoer zal hetzelfde zijn. Laten we dit eens testen.

Definitie van variabelen en aanroepvolgorde

Het is belangrijk op te merken dat de volgorde van variabele- en functiedefinities cruciaal is. Als je een globale variabele onder haar gebruik aanmaakt, zal dit leiden tot een undefined-probleem.

Dit komt omdat de functie die de globale variabele nodig heeft deze voor haar definitie aanroept. Om dit te voorkomen, is het raadzaam om globale variabelen helemaal bovenaan in de code te definiëren.

Meer over lokale variabelen en hun gebruik

Nu maken we in een andere functie opnieuw een lokale variabele aan. Hier noemen we deze lokaleVariabele en zetten we de waarde op 12.

We kunnen ook deze lokale variabele gebruiken, maar alleen binnen haar eigen functie, niet in andere. Als je beide lokale variabelen gebruikt, kan dat in sommige gevallen voor geduld en orde in je programma's zorgen, afhankelijk van de complexiteit.

Samenvatting van de concepten

Je hebt nu de basisconcepten over de zichtbaarheid en de reikwijdte van variabelen in JavaScript begrepen. Globale variabelen zijn zichtbaar voor alle functies, terwijl lokale variabelen alleen binnen hun functie bestaan. Het is raadzaam om globale variabelen op een centrale plek in de code te definiëren om de leesbaarheid en onderhoudsvriendelijkheid te verbeteren.

Samenvatting – De zichtbaarheid van variabelen in JavaScript

Samenvattend heb je geleerd dat de manier waarop je variabelen defineert een directe invloed heeft op hun zichtbaarheid en reikwijdte. Let altijd op waar je je variabelen plaatst om fouten te voorkomen.