Scope - YunusEmreCMD/blokTech GitHub Wiki

Scope is een belangrijk concept dat de beschikbaarheid van variabele beheert, de scope definieert het idee van globale en lokale variabelen. Als developer die Javascript gaat of wilt coderen is het belangrijk om te begrijpen wat scope precies inhoudt. Scope is als het ware het bereik. Zichtbaarheid of beter gezegd de toegankelijkheid van een variabele. Zoals ik net al aangaf bestaat een scope uit 2 soorten bereik.

• Lokaal (Local scope)
• Globaal (Global scope)

Lokale Javascript variabelen

Variabelen die binnen een Javascript functie zijn gedeclareerd, worden lokaal voor de functie. Dit houdt in dat je deze variabele alleen in deze specifieke functie kan gebruiken en niet erbuiten.

Omdat lokale variabelen alleen binnen de functie worden herkend, kunnen variabelen met dezelfde naam in andere functies gebruikt worden.

Klein voorbeeldje

if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

Deze stuk code zal een error geven, dit komt doordat de variabele message niet herkent wordt, deze is namelijk niet gedeclareerd. Wel binnen de functie, maar dit is buiten bereik van de console.log. De volgende blok code werkt wel, omdat ze samen in de functie zitten.

if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}

Globale scope

De globale scope is de meest toegankelijke scope van allemaal, en is dus vanuit elke plaats in je code beschikbaar. Variabele die in deze globale scope worden gedeclareerd worden globale variabele genoemd. Deze variabele kunnen dan ook vanuit elke functie worden geopend of gewijzigd. Ook alle scripts en functies op een webpagina hebben er toegang toe. Een voorbeeld:

Var userName = "Bill";

    function modifyUserName() {
            userName = "Steve";
        };

    function showUserName() {
            alert(userName);
        };

    alert(userName); // display Bill
    
    modifyUserName();
    showUserName();// display Steve

in het bovenstaande voorbeeld wordt de variabele userName een globale variabele omdat deze buiten de functie gedeclareerd wordt. De functie adjustUserName () wijzigt gebruikersnaam aangezien gebruikersnaam een globale variabele is en toegankelijk is binnen elke functie. Op dezelfde manier geeft de functie showUserName () de huidige waarde van de variabele gebruikersnaam weer.

Wanneer variabele binnen een functie zonder het trefwoord var er achter worden gedeclareerd worden deze ook automatisch een globale variable als de functie waarin deze variabele staat minstens 1x wordt aangeroepen.  

Andere soorten scopes

Blokken code met de statements als if,for en while creëren een eigen scope zie voorbeelden:

for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}

while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}

Ook kun je in Javascript standalone code blocks maken, deze hebben ook een eigen scope.

{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}

Nested scope

Scopes kunnen ook genest worden, in de volgende voorbeeld zie je dat de if code block (scope) genest wordt in de functie van run, dit wordt ook wel inner scope genoemd. De scope die om een andere scope heen zit wordt de outer scope genoemd, in dit geval is dat de functie genaamd run.

function run() {
  // "run" function scope
  const message = 'Run, Forrest, Run!';

  if (true) {
    // "if" code block scope
    const friend = 'Bubba';
    console.log(message); // 'Run, Forrest, Run!'
  }

  console.log(friend); // throws ReferenceError
}

run();

Bronnen

JavaScript Scope. (z.d.). Geraadpleegd op 9 maart 2021, van https://www.w3schools.com/js/js_scope.asp

Scope in JavaScript. (z.d.). Geraadpleegd op 9 maart 2021, van https://www.tutorialsteacher.com/javascript/scope-in-javascript

Pavlutin, D. (2020, 24 april). A Simple Explanation of Scope in JavaScript. Geraadpleegd op 9 maart 2021, van https://dmitripavlutin.com/javascript-scope/#:%7E:text=The%20scope%20is%20an%20important,of%20variables%20is%20a%20must.