Globale und lokale Variablen


"Scope" von Variablen

Im folgenden Programmbeispiel werden zwei Variablen festgelegt. Die 'variableA' außerhalb der for-to-Schleife und die 'variableB' innerhalb der for-to-Schleife:

let variableA = 10;

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
  console.log({variableA:variableA, variableB:variableB});
}

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 01.

Wenn man unten auf die Zeile "CONSOLE" klickt, werden die Werte der Variablen 'variableA' und 'variableB' ausgegeben:

Der Wert von 'variableA' ändert sich, wenn die Schleife zehnmal durchlaufen wird, nicht aber der Wert von 'variableB'.

Erklärung:

  • 'variableA' wird außerhalb der Schleife definiert. Zu Beginn hat 'variableA' den Wert 10 und dieser wird bei jedem Schleifendurchlauf um 1 größer. 'variableA' ist eine globale Variable, denn man kann sie überall im Programm verwenden.

  • 'variableB' wird innerhalb der Schleife definiert und auf 0 gesetzt. Danach wird der Wert um 1 vergrößert. Sobald die Schleife erneut durchlaufen wird, setzt man den Wert von 'variableB' wieder auf 0. 'variableB' ist eine lokale Variable, denn man kann sie nur in der Schleife verwenden.

Das Programm kennt die lokale Variable 'variableB' außerhalb der Schleife nicht. Das kann man prüfen, indem eine weitere Anweisung console.log({variableA:variableA, variableB:variableB}); außerhalb der Schleife in das Programm eingefügt wird:

let variableA = 10;

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
  console.log({variableA:variableA, variableB:variableB});
}

console.log({variableA:variableA, variableB:variableB});

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 02.

Wenn man unten auf die Zeile "CONSOLE" klickt, sieht man, dass eine Fehlermeldung ausgegeben wird, denn 'variableB' ist außerhalb der Schleife nicht definiert.


Programm debuggen

Folgendes Programm erzeugt einen Fehler. Um den Fehler zu finden, soll das Programm mit Hilfe des Debuggers Schritt für Schritt durchlaufen werden. Dazu setzt man an die Stelle, an welcher das Programm stoppen soll das Wort "debugger" in den Quellcode:

let variableA = 10;

debugger

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
}

variableA = variableA + variableB;

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 03.

  • Drücken Sie im p5.js-Flems-Editor die Taste F12.
  • Drücken Sie dann die Taste F5 oder klicken Sie auf das Symbol für 'Seite aktualisieren'.

Die Programmausführung stoppt in der Zeile, in welcher das Wort 'debugger' steht:

  • Klicken Sie auf das Symbol für 'Step', um das Programm Schritt für Schritt auszuführen:

Um eine Variable zu beobachten, markiert man mit der Maus den Namen der Variablen, klickt auf die Markierung mit der rechten Maustaste und dann auf 'Add selected text to watches' oder man klickt rechts im Fenster 'Watch' auf das Symbol '+' und tippt den Name der Variablen ein.

Im Block 'Scope' werden automatisch alle selbst angelegten Variablen angezeigt. Dabei wird angegeben, ob man auf die Variable nur im aktuellen Block (lokale Variable) oder im gesamten Script (globale Variable) zugreifen kann:

Anmerkung: In Javascript sollte eine Variable mit dem Schlüsselwort 'let' definiert werden, da dieses streng zwischen lokalen und globalen Variablen unterscheidet. Das alte Schlüsselwort 'var', mit welchem auch Variablen definiert werden können, sollte nicht mehr verwendet werden, da der Gültigkeitsbereich (Scope) besonders für Anfänger schwer zu durchschauen ist.

Finden Sie im letzten Programm mit Hilfe des Debuggers den Fehler und verändern Sie das Programm so, dass die Summe von 'variableA' und 'variableB' außerhalb der Schleife berechnet werden kann.


Übung 2

Mit folgendem Programm kann Otto oder Fritz begrüßt werden, je nachdem, welcher Name in der Variablen 'name' steht. Aber beim Programmablauf wird ein Fehler ausgegeben:

  let name = "Otto";

  function setup() {    
    createCanvas(300, 300);
    background(240);
    if (name === "Otto") {
       let hallo = "Hallo Otto!";
    } else {
       let hallo = "Hallo Fritz!";
    }
    strokeWeight(0);
    fill(0);
    textSize(30);
    text(hallo, 20, 40);
  }

  new p5();

Starten Sie das Programm und korrigieren Sie den Fehler, so dass entweder Otto oder Fritz begrüßt wird: Hallo Otto


Übung 3

Mit folgendem Programm wird mit Hilfe der Variablen 'zeit' entweder ein Halbkreis oder ein Rechteck ausgegeben:

let zeit = 2;

function setup() {
  createCanvas(400, 400);
  strokeWeight(0);
}

function draw() {
  background(220);
  if (frameCount%120 > 60) {
    let zeit = PI;
    fill('red');
    arc(width/2, height/2, 100, 100, 0, zeit);
  }
  else {
    fill('green');
    rect(width/zeit+50, height/zeit, -100, -50);
  }
}

new p5();

Starten Sie das Programm und analysieren Sie den Algorithmus, so dass Sie diesen erklären können: Rechteck oder Ellipse


Übung 4

Denken Sie sich ein kleines Programm aus, mit welchem der Unterschied zwischen lokalen und globalen Variablen eindrucksvoll demonstriert wird.