Globale variabelen in functies in JavaScript

In JavaScript (in andere talen is dit meestal niet het geval) zijn variabelen die buiten een functie zijn gedefinieerd, zichtbaar binnen die functie. Zulke variabelen worden globale variabelen genoemd. Laten we een voorbeeld bekijken:

javascriptlet num = 1; // variabele buiten de functie

function func() {
  console.log(num); // variabele num is zichtbaar binnen de functie
}

func(); // geeft 1 weer

Eigenlijk moet de variabele zijn gedefinieerd niet vóór de definitie van de functie, maar vóór de aanroep ervan:

javascriptfunction func() {
  console.log(num);
}

let num = 1; // variabele buiten de functie
func();      // geeft 1 weer

Als je de waarde van de variabele verandert en daarna elke keer de functie aanroept - console.log zal elke keer verschillende resultaten tonen:

javascriptfunction func() {
  console.log(num);
}

let num; // declareer de variabele

num = 1; // stel waarde 1 in
func();  // geeft 1 weer

num = 2; // stel waarde 2 in
func();  // geeft 2 weer

Als we meerdere functies hebben, dan is de globale variabele toegankelijk in elk van deze functies:

javascriptfunction func1() {
  console.log(num);
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // geeft 1 weer
func2(); // geeft 1 weer

Als in een van de functies wijzigingen aan de globale variabele plaatsvinden, dan verandert deze variabele in alle functies die deze variabele gebruiken:

javascriptfunction func1() {
  console.log(num);
  num++; // verander de globale variabele
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // geeft 1 weer
func2(); // geeft 2 weer

Omdat elke functie eenvoudig de globaal variabele kan wijzigen, is hun gebruik een broedplaats voor moeilijk te vinden fouten. Om deze reden moet het gebruik van globale variabelen in een script tot een minimum worden beperkt. Bij voorkeur zijn er helemaal geen of een minimum aantal.

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

func();

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

num = 2;
func();

javascriptfunction func() {
  console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();