Dieses Thema wurde schon oft behandelt, dennoch möchte ich darüber sprechen, was Scope (unter Verwendung von JavaScript) aus der Perspektive des Problems ist, das es angehen soll.

Welches Problem löst Scope eigentlich?

Mit zunehmender Größe von Anwendungen nimmt auch ihre Komplexität zu – Scope ist ein Werkzeug zur Verwaltung dieser Komplexität.

Kopplung vs. Entkopplung

Nehmen wir an, wir hätten einen globalen Variablenradius, der auf 7 gesetzt ist, und eine Funktion createSpecialButton(), die eine „spezielle“ Schaltfläche zurückgibt:

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

Diese Funktion gibt eine Schaltfläche mit einem bestimmten Radius zurück, der in diesem Fall auf 7 eingestellt ist. Im Moment gibt es kein Problem mit dem Code, da wir wissen, auf welchen Radius eingestellt ist, und daher wissen, was die resultierende Schaltfläche bewirkt aussehen. Was passiert jedoch, wenn wir zwei weitere Funktionen hinzufügen, die beide von der Radiusvariablen abhängen? Unser Code sieht jetzt so aus:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Welchen Wert hat der Radius nach dieser Änderung beim Aufruf von createSpecialButton()? Wenn Sie 16 geraten haben, liegen Sie richtig.

Allein durch das Hinzufügen zweier zusätzlicher Funktionen haben wir die Komplexität unseres Codes erheblich erhöht und leben nun in einer Welt, in der mehrere, nicht zusammenhängende Codeteile auf derselben Abhängigkeit basieren. Stellen Sie sich nun vor, dies wäre eine viel größere Full-Stack-Anwendung – es würde schnell schwierig werden, darüber nachzudenken, woher bestimmte Zustandsteile kommen und wie Fehler behoben werden können, wenn sie auftreten.

Um dies zu beheben, können wir für jede Funktion separate Radiusvariablen definieren:

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Sie könnten sich diese Änderung ansehen und sagen: „Okay, aber jetzt gibt es mehr Code – das scheint nicht richtig zu sein.“ Das ist richtig, es gibt mehr Code, aber weniger Code ist nicht besser, wenn dadurch weniger wartbarer Code entsteht – die von uns vorgenommene Änderung verbessert die Wartbarkeit unseres Codes, und das ist immer eine gute Sache.

Arten von Bereichen in JavaScript

Globaler Geltungsbereich

Der globale Bereich ist für alle in Ihrer gesamten Anwendung zugänglich. Wenn Sie eine Node.JS-App schreiben, werden Sie wahrscheinlich nicht mit dem globalen Bereich arbeiten oder darauf stoßen. Wenn Sie jedoch in einer Web-App arbeiten, können Sie Deklarationen mithilfe eines Skript-Tags oder mithilfe von window.SOMETHING in den globalen Bereich einfügen.

Mit dem Skript-Tag könnten Sie beispielsweise Folgendes tun:

Außerdem formuliert MDN seine Definition des „globalen Bereichs“ als „Der Standardbereich für den gesamten Code, der im Skriptmodus ausgeführt wird.“ Ich glaube, dass sie sich auf das obige Beispiel beziehen.

Bei Verwendung des globalen Fensterobjekts könnten Sie etwa Folgendes tun:

  window.username = "Garrett";

Modulumfang

Wenn Sie in einem Node.JS-Projekt arbeiten, ist der Modulumfang das, womit Sie auf höchster Ebene arbeiten. Jede Datei mit der Erweiterung .js (oder .ts) ist ein separates Modul, was bedeutet, dass Ihre Deklarationen höchstens für alles in einer bestimmten Datei zugänglich sind, es sei denn, Sie exportieren sie explizit.

In user.ts können beispielsweise beide Funktionen auf den Variablennamen zugreifen.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

In dieser Version von user.ts kann jedoch nur accessName() auf den Variablennamen zugreifen:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Beachten Sie, dass in beiden Modulen nichts exportiert wird. Mit anderen Worten: Code in anderen Modulen hat keine Möglichkeit, diesen Code zu kennen und kann ihn daher nicht importieren und verwenden. Wir können das jedoch ändern:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

Jetzt werden beide Funktionen exportiert und können somit von anderen Modulen verwendet werden. Dies unterscheidet sich technisch von dem Konzept des globalen Geltungsbereichs, über das wir zuvor gesprochen haben. Es ist jedoch insofern ähnlich, als wir Code für die gesamte Anwendung verfügbar machen, indem wir ihn von einem Modul in ein anderes importieren.

Funktionsumfang

Funktionsumfang haben wir eigentlich schon gesehen. Schauen Sie sich den Code unten an (es ist derselbe Code aus einem der obigen Snippets):

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Versuchen Sie dies auszuführen – „greetAgain()“ führt zu einem Fehler, da die Namensvariable, die es zu lesen versucht, nur im Kontext (d. h. „Bereich“) von „greet()“ existiert.

Hinweis: Dies wird möglicherweise als „lokaler Bereich“ bezeichnet.

Blockumfang

Der Blockbereich ist interessant, da er nur mit neueren Variablentypen funktioniert – insbesondere let und const, nicht var. Werfen wir einen Blick darauf.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

Im obigen Beispiel können wir sehen, dass 1) durch das Platzieren von Code innerhalb eines {} ein Codeblock erstellt wird. 2) Auf die mit let und const definierten Variablen kann nur innerhalb dieses Codeblocks zugegriffen werden. 3) Die mit var erstellte Variable folgt nicht den Regeln des Blockbereichs, da auf sie weiterhin außerhalb von {} zugegriffen werden kann.

Hinweis: Modernes JavaScript verwendet let und const für Variablendeklarationen und nicht für var.

Erklärungen sollten im kleinstmöglichen Rahmen erfolgen

Denken Sie abschließend daran, dass der Bereich ein Werkzeug zum Verwalten der Komplexität in unserem Code ist. Je höher Sie Deklarationen auf der Ebene des Bereichs platzieren, desto komplexer wird Ihr Code sein. Daher ist es am besten, Deklarationen anzustreben im kleinstmöglichen Umfang platziert werden.