scope

Scope

Wat is scope?

Scope is een belangrijk begrip in JavaScript. Het bepaalt namelijk waar welke variabelen te gebruiken zijn. Naast variabelen geldt dit ook voor objecten en functies.

Welke scopes zijn er?

Er zijn meerdere soorten scopes. Deze staan hieronder uitgelegd.

Global scope

Variabelen die buiten een functie worden gedefinieerd worden globaal beschikbaar. Dit betekent dat deze variabelen in andere scopes dan waar ze gedefinieerd zijn gebruikt kunnen worden. Een voorbeeld hiervan kan hieronder worden gevonden.

let a = "test";

function globalScope() {
  console.log(a);
}

globalScope(); //In de console: 'test'

console.log(a); //In de console: 'test'

De variabele a wordt hier buiten een functie gedefinieerd. Het is dus een globale variabele. Zoals hier te zien is kan werken beide van deze logs. De variabele a is dus overal te gebruiken.

Local scope

Variabelen die in een functie worden gedefinieerd, worden lokaal in deze functie. Dit betekent dat ze buiten de scope van deze functie niet meer gebruikt kunnen worden. Een voorbeeld hiervan kan hieronder gevonden worden.

function localScope(boolean) {
  let a = ‘test’;
  console.log(a);
  if (boolean) {
    console.log(a);
  }
}

localScope(false); //In de console: 'test'

localScope(true); //In de console: 'test' 'test'

console.log(a); //Dit geeft een error, omdat de variabele a niet bestaat in deze scope.

Zoals hier te zien is geeft de code op regel 13 een error. De variabele a is immers niet gedeclareerd in deze scope. De code op regel 11 logt de variabele a twee maal, meer hierover bij het onderdeel nested scopes.

Module scope

Variabelen die in een module worden gedefinieerd zijn niet buiten deze module te gebruiken, tenzij ze specifiek geëxporteerd worden.

Block scope

Een code block definieert een scope voor variabele die worden gedefinieerd met let en const. Een voorbeeld van een code block is alles tussen de haakjes in een if statement.

if (boolean) {
  let a = "test";
  console.log(a); //In de console: 'test'
}

console.log(a); //Dit geeft een error, omdat de variabele a niet bestaat in deze scope.

Het is belangrijk om te onthouden dat de block scope alleen op deze manier werkt met let en const en niet met var. var is namelijk niet block scoped. Hij is dus buiten de scope waarin hij wordt gedefinieerd te gebruiken. Hetzelfde voorbeeld met var in plaats van let geeft dus het volgende.

if (boolean) {
  var a = "test";
  console.log(a); //In de console: 'test'
}

console.log(a); //In de console: 'test'

Nested scopes

Zoals ik bij de local scope al liet zien is het mogelijk op scopes in elkaar te plaatsen. Dit wordt nesten genoemd. Hieronder staat een voorbeeld die dit principe goed uitlegt.

function nestedScope(boolean) {
  let a = "test a";

  if (boolean) {
    let b = "test b";

    if (boolean) {
      let c = "test c";
      console.log(a); //In de console: 'test a'
      console.log(b); //In de console: 'test b'
      console.log(c); //In de console: 'test c'
    }

    console.log(a); //In de console: 'test a'
    console.log(b); //In de console: 'test b'
    console.log(c); //Dit geeft een error, omdat de variabele c niet bestaat in deze scope.
  }

  console.log(a); //In de console: 'test a'
  console.log(b); //Dit geeft een error, omdat de variabele b niet bestaat in deze scope.
  console.log(c); //Dit geeft een error, omdat de variabele c niet bestaat in deze scope.
}

Scope chain

De scope chain is de volgorde waarin JavaScript gaat zoeken naar een variabele. Er zal altijd eerst gekeken worden in huidige scope. Wordt de variabele hier niet gevonden? Dan kijkt JavaScript een laag dieper totdat de global scope wordt bereikt. Mocht de variable nu nog steeds niet gevonden zijn vindt er een error plaats.

Bronnen

• JavaScript Scope. (z.d.). W3Schools. Geraadpleegd op 19 mei 2021, van https://www.w3schools.com/js/js_scope.asp
• Pavlutin, D. (2020, 24 april). A Simple Explanation of Scope in JavaScript. Dmitri Pavlutin Blog. https://dmitripavlutin.com/javascript-scope/#1-the-scope
• Ahmed, H. (2019, 8 juli). Understanding Scope in JavaScript. Scotch. https://scotch.io/tutorials/understanding-scope-in-javascript