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)
}