Nu je eigen functies kunt maken, is het niet meer zo makkelijk met die variabelen. Niet elke variabele werkt overal.
Wat is de scope van een variabele?
Dat is de plek / plekken waar deze geldig is. Waar deze variabele-naam bekend is. Waar deze hopelijk een waarde heeft.
Als je een variabele gebruikt buiten zijn scope:
- als je een waarde geeft (assignment) zoals
mijnX = 20
, dan maak (definieer) je een nieuwe variabele met dezelfde naam maar een andere scope. Denk maar aan een Jasmijn in klas 1D en een Jasmijn in klas 1E. Is gewoon een andere Jasmijn. - als je een variabele gebruikt zoals circle(mijnX,100) buiten de scope, dan krijg je een fout:
In Javascript zijn 3 scopes mogelijk
Optie 1: Global scope.
Dit doe je met let
of var
helemaal bovenaan de sketch, voor de setup()
Optie 2: Binnen een functie.
function scopeDemo() {
let demo = "jaja"
print(demo)
}
Buiten de functie scopeDemo()
is de variabele demo
niet bekend.
Optie 3: Binnen een for-loop.
for ( i=0; i<=20; i++ ) {
var account = i;
}
De variabelen i
en account
werken alleen binnen de loop.
Deze hoef je pas precies te kennen nadat je de for-loop zelf ook gehad hebt.
Voorbeelden van problemen
a is not defined
De foutmelding is: ReferenceError: a is not defined
Probleem: a is wel bekend in setup maar niet in draw.
function setup() {
createCanvas(400, 400);
let a=10;
}
function draw() {
background(220);
stroke(random(0,100))
line(a,0,1,400)
}
Oplossing: de declaratie let a
op het globale niveau plaatsen.
let a;
function setup() {
createCanvas(400, 400);
a = 10;
}
function draw() {
background(220);
stroke(random(0,100))
line(a,0,1,400)
}
Onbedoeld dubbel gebruik
Probleem: Onbedoeld dubbel gebruik van dezelfde naam. Binnen de functies psv()
en sparta()
gebruiken we beide keren de variabele deKleur
. We bedoelen daarmee de kleur van hun shirt. In beide gevallen is die rood, maar niet exact gelijk.
Omdat deKleur
op het globale niveau is gedefinieerd, is deze geldig binnen allebei de functies. Het is geen probleem om de waarde telkens te veranderen maar toch gaat dit onbedoeld rare effecten geven
let deKleur
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
psv();
sparta();
print(deKleur)
}
function psv() {
deKleur = "#F00000"
print(deKleur)
}
function sparta() {
deKleur = "#DE1C39"
print(deKleur)
}
Oplossing: deKleur declareren binnen de functies
Om het probleem op te lossen hebben we 2 aparte variabelen nodig die toevallig dezelfde naam hebben maar wel elk een eigen scope. 1 binnen psv()
en 1 binnen sparta()
.
De decaratie let deKleur
op het globale niveau. Binnen de functie geven we met let
aan dat hier een variabele binnen de scope van een functie wordt gedeclareerd.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
psv();
sparta();
print(deKleur)
}
function psv() {
let deKleur = "#F00000"
print(deKleur)
}
function sparta() {
let deKleur = "#DE1C39"
print(deKleur)
}