# Variabelen

# Wat zijn variabelen?

Variabelen zijn één van de hoofdpijlers van elke programmeer- en scripting taal. Ze laten je toe bepaalde gegevens te "onthouden" om verder in het script opnieuw te kunnen gebruiken. Als opslagplaats voor deze gegevens gebruikt de browser het geheugen van het apparaat waarop de webpagina wordt geladen.

Een aantal voorbeelden van het gebruik van variabelen:

• Een vaste korting bepalen die in een latere prijsberekening gebruikt wordt.
• Opslaan in het geheugen van een gebruikersnaam die op meerdere plaatsen terugkomt.
• Verschillende tussenstappen van een berekening opslaan.
• Bijhouden hoe vaak een gebruiker op een knop heeft geklikt.
• ...

# Variabelen declareren

Voor je een variabele kan gebruiken of er een waarde aan kan toewijzen, moet je ze declareren. Concreet betekent dit dat de browser op de hoogte moet worden gebracht dat er plaats moet gereserveerd worden in het geheugen, met een bepaalde naam en eventueel een bijhorende waarde.

Je kan het vergelijken met een archiefkast, waarbij elke schuif een label krijgt. De schuif is de plaats in het geheugen, het label is de naam van de variabele en de inhoud van de schuif is de waarde van de variabele.

Een opdrachtregel voor het declareren van een variabele bestaat uit minstens twee, maar meestal drie onderdelen: een sleutelwoord, variabelenaam en een toewijzing van een waarde.

sleutelwoord variabelenaam = waarde;

Met het sleutelwoord const declareer je een constante variabele. De waarde van een constante variabele kan na het declareren nooit meer veranderd worden. Hieruit volgt dat het bij het declareren ook verplicht is een waarde toe te wijzen aan de variabele.

Bekijk de syntax voor het toewijzen van het getal 10 aan de constante variabele met naam korting:

const korting = 10;

Met het sleutelwoord let declareer je daarentegen een variabele waarvan de waarde op een later moment, verderop in de code, kan gewijzigd worden. In dit geval is het niet verplicht rechtstreeks een waarde mee te geven bij het declareren, omdat de waarde later kan worden toegewezen.

// De waarde van teller begint op 0 maar kan later gewijzigd worden
let teller = 0;

// De variabele totaal wordt gemaakt maar krijgt pas later een waarde
let totaal;

# Variabelen gebruiken

Om na het declareren van een variabele ze te gebruiken kan het niet eenvoudiger, rechtstreeks via de variabelenaam. Waneer de browser een variabelenaam tegenkomt wordt ze onmiddellijk vervangen door de bijhorende waarde.

Om het voorbeeld van de groet nogmaals te hernemen:

document.write("Hallo Wereld");

We kunnen de boodschap (de string "Hallo Wereld") in een variabele steken met naam groet en ze daarna gebruiken bij de oproep van de methode write().

// Declareren van variabele groet
const groet = "Hallo Wereld";

Om nu de variabele te gebruiken binnen de write() methode:

document.write(groet);

De browser zal de variabelenaam groet tegenkomen en ze onmiddellijk vervangen door de waarde die in de variabele steekt.

# Wanneer variabelen gebruiken?

Het bovenstaande voorbeeld was enkel ter illustratie. Je hoeft in principe geen variabele te maken als je de waarde op voorhand kent en ze maar één keer gaat gebruiken. In dat geval kan je immers even goed de string rechtstreeks opgeven bij de oproep van de write() methode. Maar wat als je de waarde op meerdere plaatsen wil gebruiken?

Stel dat je op twee verschillende plaatsen de boodschap nodig hebt, bijvoorbeeld één keer via document.write() en één keer via de methode window.alert() (werkt gelijkaardig, maar toont de boodschap in een pop-up venster).

Eerst zonder variabele:

document.write("Hallo Wereld");
window.alert("Hallo Wereld");

Test de code snel uit. Ze werkt prima! Maar als je nu de groet wil veranderen naar iets anders moet je op twee plaatsen dezelfde verandering doorvoeren... Niet zo praktisch, al zeker niet als dezelfde waarde misschien tien keer voorkomt, doorheen de ganse code, verpreid over meerdere bestanden en 3 maanden nadat je de code geschreven hebt.

In dit geval biedt een variabele de perfecte oplossing:

const groet = "Hallo Wereld";

document.write(groet);
window.alert(groet);

Hoe vaak de waarde waarde ook wordt hergebruikt, waar dan ook in de code, het zal voldoende zijn enkel de initiële waarde van de variabele aan te passen om de verandering door te voeren doorheen het ganse script.