Sie können eine JavaScript `if`-Anweisung mit einem Label versehen

Labels sind ein Feature, das seit der Erfindung von JavaScript existiert. Sie sind nicht neu! Ich glaube nicht, dass viele Leute davon wissen, und ich würde sogar behaupten, dass sie ein wenig verwirrend sind. Aber, wie wir sehen werden, können Labels in sehr spezifischen Fällen nützlich sein.

Aber zuerst: Ein JavaScript-Label sollte nicht mit einem HTML-<label> verwechselt werden, was etwas völlig anderes ist!

Ein JavaScript-Label ist eine Möglichkeit, eine Anweisung oder einen Codeblock zu benennen. Typischerweise: Schleifen und bedingte Anweisungen. Das ermöglicht es Ihnen, die beschriftete Anweisung von innen heraus mit break oder continue zu beenden. Um einer Anweisung ein Label zuzuweisen, beginnen Sie die Anweisung mit label: und was auch immer Sie als "Label" angeben, wird das Label sein, auf das Sie später verweisen können.

Hier ist die grundlegende Syntax für ein Label

let x = 0;
// Label a loop as "myLoop"
myLoop:
while (true) {
  if (x >= 10) {
    // This will cause "myLoop" to end.
    break myLoop;
  }
  x++;
}

Labels sind nur eine interne Referenz auf eine Anweisung und können nicht nachgeschlagen, exportiert oder in einem Wert gespeichert werden. Sie kollidieren auch nicht mit Variablennamen, sodass Sie, wenn Sie die Leute wirklich verwirren wollen, eine Schleife und eine Variable denselben Namen geben können! Bitte tun Sie das nicht – Ihr zukünftiges Ich und jeder andere, der Ihren Code lesen muss, wird es Ihnen danken. Die Anwendungsfälle für Labels sind begrenzt, aber in den richtigen Händen unglaublich leistungsstark.

Eine kurze Einführung in break und continue

Lassen Sie uns ein wenig zurückgehen und über break und continue sprechen. Eine break-Anweisung beendet die aktuell laufende Schleife oder bedingte Anweisung. Sie wird am häufigsten in einer switch-Anweisung verwendet, um einen case zu beenden, kann aber auch verwendet werden, um eine if-Anweisung frühzeitig zu beenden oder auch um eine for- oder while-Schleife zu beenden und die Schleifen zu stoppen. Es ist eine gute Möglichkeit, aus einer bedingten Anweisung auszubrechen oder eine Schleife frühzeitig zu beenden.

Hier ist ein einfaches Beispiel für break in Aktion

const x = 1;
switch(x) {
  case 1:
    console.log('On your mark!');
    break; // Doesn't check the rest of the switch statement if 1 is true
  case 2:
    console.log('Get set!');
    break; // Doesn't check the rest of the switch statement if 2 is true
  case 3:
    console.log('GO!');
    break; // Doesn't check the rest of the switch statement if 3 is true
}
// logs: 'On your mark!'

Ähnlich kann die continue-Anweisung mit Schleifen verwendet werden, um die aktuelle Iteration frühzeitig zu beenden und den nächsten Durchlauf der Schleife zu starten. Dies funktioniert jedoch nur innerhalb von Schleifen.

Hier ist continue in Aktion

for (let x = 0; x &< 10; x++) {
  if (x !== 5) continue; // If the number isn't five, go to the next pass of the loop.
  console.log(x);
}
// logs: 5

Verwendung eines Labels mit break

Typischerweise taucht ein Anwendungsfall für Labels auf, wenn Sie verschachtelte Anweisungen jeglicher Art verwenden. Die Verwendung mit break kann eine tief verschachtelte Schleife oder Bedingung stoppen und sofort beenden.

Kommen wir zum Titel dieses Blogbeitrags!

// Our outer if statement
outerIf: 
if (true) {
  // Our inner if statement
  innerIf:
  if (true) {
    break outerIf; // Immediately skips to the end of the outer if statement
  }
  console.log('This never logs!');
}

Da haben Sie es, Sie können eine if-Anweisung mit einem Label versehen.

Verwendung eines Labels mit continue

Es gab Zeiten, in denen ich eine verschachtelte Schleife erstellt habe und einige Iterationen der äußeren Schleife überspringen wollte, während ich mich in der inneren Schleife befand. Normalerweise breche ich die innere Schleife ab, prüfe dann, ob ich mich in dem Zustand befinde, den ich überspringen möchte, und fahre dann mit der äußeren Schleife fort. Die Möglichkeit, diesen Code in eine leichter lesbare Anweisung zu vereinfachen, ist großartig!

let x = 0;
outerLoop:
while (x < 10) {
  x++;
  for (let y = 0; y < x; y++) {
    // This will jump back to the top of outerLoop
    if (y === 5) continue outerLoop;
    console.log(x,y);
  }
  console.log('----'); // This will only happen if x < 6
}

Block-Anweisungen und Labels

Block-Anweisungen in JavaScript sind eine Möglichkeit, Ihre const- und let-Variablen auf einen Teil Ihres Codes zu beschränken. Das kann nützlich sein, wenn Sie einige Variablen lokalisieren möchten, ohne eine Funktion erstellen zu müssen. Die (große) Einschränkung dabei ist, dass Block-Anweisungen im strict mode ungültig sind, was ES-Module standardmäßig sind.

Hier ist eine beschriftete Block-Anweisung

// This example throws a syntax error in an ES module
const myElement = document.createElement('p');
myConditionalBlock: {
  const myHash = window.location.hash;
  // escape the block if there is not a hash.
  if (!myHash) break myConditionalBlock;
  myElement.innerText = myHash;
}
console.log(myHash); // undefined
document.body.appendChild(myElement);

Praktische Anwendung

Es hat eine Weile gedauert, bis ich einen Grund gefunden habe, ein Label im alltäglichen Produktionscode zu verwenden. Das mag ein wenig weit hergeholt sein, aber ein Bereich, in dem ein Label in JavaScript nützlich sein könnte, ist das frühe Verlassen einer Schleife innerhalb einer switch-Anweisung. Da man in einem switch break verwenden kann, könnte die Möglichkeit, einer Schleife ein Label zuzuweisen, das sie frühzeitig beendet, potenziell Ihren Code effizienter machen.

Hier ist, wie wir das in einer Taschenrechner-App verwenden könnten

const calculatorActions = [
  { action: "ADD", amount: 1 },
  { action: "SUB", amount: 5 },
  { action: "EQ" },
  { action: "ADD", amount: 10 }
];
    
let el = {};
let amount = 0;
calculate: while (el) {
  // Remove the first element of the calculatorActions array
  el = calculatorActions.shift();
  switch (el.action) {
    case "ADD":
      amount += el.amount;
      break; // Breaks the switch
    case "SUB":
      amount -= el.amount;
      break; // Breaks the switch
    case "EQ":
      break calculate; // Breaks the loop
    default:
      continue calculate; // If we have an action we don't know, skip it.
  }
}

Auf diese Weise können wir die calculate-Schleife verlassen, wenn eine Bedingung erfüllt ist, anstatt das Skript weiterlaufen zu lassen!

Fazit

Es ist selten, dass Sie ein JavaScript-Label verwenden müssen. Tatsächlich können Sie ein sehr erfülltes Berufsleben führen, ohne jemals zu wissen, dass dies existiert. Aber für den unwahrscheinlichen Fall, dass Sie *diesen einen* Ort finden, an dem diese Syntax hilfreich ist, sind Sie jetzt befähigt, sie zu nutzen.