Manage scope

Geltungsbereich nennen wir eine Umgebung, in der eine Variable enthalten ist. Wenn die Variable für uns zugänglich ist, ist sie innerhalb des Geltungsbereiches. Wenn wir nicht darauf zugreifen können, ist sie außerhalb.

In JavaScript gibt es fünf Typen von Scopes:

1. Global Scope
2. Function Scope
3. Block Scope
4. Lexical Scope
5. Closuere Scope

Global Scope

Variable, die außerhalb von Funktionen und außerhalb aller {Codeblöcke} deklariert werden, befinden sich im global scope. Wir nennen sie deshalb auch globale Variable.
Globale Variable können überal im Code benutzt werden, auch innerhalb von Funktionen.

Local Scope

Der Local Scope ist das Gegenstück dazu. Eine Variable, die nicht im global scope ist, ist im function scope oder im block scope oder im lexical scope und das bedeutet alles local scope.

Function Scope

Wird eine Variable in einer Funktion deklariert, ist sie im function scope. Diese kann innerhalb der Funktion verwendet werden, aber nicht außerhalb.

Nested Scope

Verschachtelte Funktionen erzeugen verschachtelte Geltungsbereiche:

// Global scope
function outerFunction() {
  // outerFunction scope
  function innerFunction() {
    // innerFunction scope
  }
}

Dabei gilt:

• Variable aus dem global scope können sowohl in outerFunction als auch in innerFunction verwendet werden.
• Variable aus dem outerFunction scope können in innerFunction verwendet werden, aber nicht im global scope.
• Variable aus dem innerFunction scope können nur in innerFunction verwendet werden.

var is function-scoped

Variable, die mit var deklariert wurden, liegen immer im Gültigkeitsbereich der Funktion, die ihnen am nächsten liegt. Liegen sie innerhalb eines Blocks, wird dieser ignoriert.

Block Scope

Ein Block ist Code, der in geschwungenen Klammern {} notiert ist. Wenn eine Variable innerhalb eine Beispiele für Blöcke sind

• for Schleifen
• if Statements
• einfach nur ein Paar curly brackets {}

Note

Block scope gilt nur für Variable, die mit let oder const deklariert wurden, nicht für die, die mit var erstellt wurden.

Lexical scope

Lexical scope bedeutet, dass eine Variable erst dann verwendet werden kann, nachdem man sie erstellt hat. Versucht man, eine Variable zu benutzen und danach erst zu deklarieren, erhält man folgende Fehlermeldung:

console.log(greeting);  // ReferenceError: can't access lexical declaration 'greeting' before initialization
const greeting = 'Hello!';

Same-name variables in different scopes

Man kann Variable mit gleichem Namen verwenden, solange sie in verschiedenen Gültigkeitsbereichen liegen. Wenn das der Fall ist, nutzt JavaScript die Variable immer im nächstliegenden Scope.

Scopes are not transferable

Jede Funktion hat ihren eigenen Scope. Variable, die innerhalb einer Funktion deklariert wurden, können nicht in andere Funktionen übertragen werden. Das geht auch dann nicht, wenn eine Funktion eine andere Funktion aufruft.

Managing scopes

Drei Regeln helfen, um mit Geltungsbereichen umzugehen:

1. Avoid having too many global variables

Zu viele globale Variable bergen die Möglichkeit von Namenskonflikten. Werden Variable, die mit let oder const deklariert wurden, überschrieben, erhalten wir eine Fehlermeldung. var lässt sich aber überschreiben, was schwer auffindbare Fehler produzieren kann. (Daher sollte var am besten gar nicht mehr verwendet werden.)

2. Keep variables scoped to the function they need

Funktionsbezogene Variable sollten immer innerhalb der Funktion deklariert werden, nicht außerhalb.

3. Don’t be afraid to hoist variables to a higher scope if needed

Manchmal ist es trotzdem nützlich, eine Variable im global scope zu deklarieren, insbesondere, wenn sie von mehreren Funktionen benutzt wird. Oder anders gesagt: wenn eine bestimmte Variable als Argument an verschiedene Funktionen übergeben werden muss, ist es oft einfacher, diese außerhalb der Funktionen zu deklarieren.

Ordering your code

1. Variable, die von mehreren Funktionen benutzt werden
2. Funktionen
3. Code zur Ausführung