Skip to content

The "switch" statement #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Aug 14, 2024
108 changes: 55 additions & 53 deletions 1-js/02-first-steps/14-switch/article.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# The "switch" statement
# Die "switch" Anweisung

A `switch` statement can replace multiple `if` checks.
Eine `switch` Anweisung kann mehrere `if` Anweisungen ersetzen.

It gives a more descriptive way to compare a value with multiple variants.
Sie bietet eine anschauliche Möglichkeit, einen Wert mit mehreren Varianten zu vergleichen.

## The syntax
## Die Syntax

The `switch` has one or more `case` blocks and an optional default.
Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionalen default Block.

It looks like this:
Das sieht wie folgt aus:

```js no-beautify
switch(x) {
Expand All @@ -26,71 +26,73 @@ switch(x) {
}
```

- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on.
- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`).
- If no case is matched then the `default` code is executed (if it exists).
- Der Wert von `x` wird auf strikte Gleichheit mit dem Wert aus dem ersten `case` verglichen, (das ist `value1`) dann mit dem zweiten (`value2`) und so weiter.
- Wenn eine Übereinstimmung gefunden wurde, führt `switch` den Code, ausgehend vom entsprechenden `case`, bis zum nächsten `break` aus (oder bis zum Ende der `switch` Anweisung).
- Wenn kein `case` zutrifft, wird der Code im `default` Block ausgeführt (falls dieser existiert).

## An example
## Ein Beispiel

An example of `switch` (the executed code is highlighted):
Ein Beispiel der `switch` Anweisung (der ausgeführte Code ist hervorgehoben):

```js run
let a = 2 + 2;

switch (a) {
case 3:
alert( 'Too small' );
alert( 'Zu klein' );
break;
*!*
case 4:
alert( 'Exactly!' );
alert( 'Exakt!' );
break;
*/!*
case 5:
alert( 'Too big' );

alert( 'Zu gross' );

break;
default:
alert( "I don't know such values" );
alert( "Ich kenne keinen solchen Werte" );
}
```

Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails.
`switch` beginnt `a` mit der ersten `case` Alternative, welche `3` ist, zu vergleichen. Der Vergleich schlägt fehl.

Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`.
Dann wird mit `4` verglichen. Übereinstimmung. Der Code zwischen `case 4` bis zum nächsten `break` wird ausgeführt.

**If there is no `break` then the execution continues with the next `case` without any checks.**
**Wenn es keinen `break` gibt, wird die Ausführung mit dem nächsten `case`, ohne jegliche Überprüfung, fortgesetzt.**

An example without `break`:
Ein Beispiel ohne `break`:

```js run
let a = 2 + 2;

switch (a) {
case 3:
alert( 'Too small' );
alert( 'Zu klein' );
*!*
case 4:
alert( 'Exactly!' );
alert( 'Exakt!' );
case 5:
alert( 'Too big' );
alert( 'Zu gross' );
default:
alert( "I don't know such values" );
alert( "Ich kenne keinen solchen Werte" );
*/!*
}
```

In the example above we'll see sequential execution of three `alert`s:
Im obigen Beispiel sehen wir die sequentielle Ausführung von drei `alert`s:

```js
alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );
alert( 'Exakt!' );
alert( 'Zu gross' );
alert( "Ich kenne keinen solchen Werte" );
```

````smart header="Any expression can be a `switch/case` argument"
Both `switch` and `case` allow arbitrary expressions.
````smart header="Jeder Ausdruck kann ein `switch/case` Argument sein"
`switch` und `case` erlauben beliebige Ausdrücke.

For example:
Zum Beispiel:

```js run
let a = "1";
Expand All @@ -99,74 +101,74 @@ let b = 0;
switch (+a) {
*!*
case b + 1:
alert("this runs, because +a is 1, exactly equals b+1");
alert("Das funktioniert, weil +a gleich 1 ist, und damit genau gleich wie b+1");
break;
*/!*

default:
alert("this doesn't run");
alert("Wird nicht durchlaufen");
}
```
Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed.
Hier ergibt `+a` den Wert `1`, welcher im `case` mit `b + 1` verglichen wird, worauf der entsprechende Code ausgeführt wird.
````

## Grouping of "case"
## Gruppieren von "case"

Several variants of `case` which share the same code can be grouped.
Mehrere Varianten von `case`, die den gleichen Code teilen, können gruppiert werden.

For example, if we want the same code to run for `case 3` and `case 5`:
Wenn wir zum Beispiel denselben Code für `case 3` und `case 5` ausführen wollen:

```js run no-beautify
let a = 3;

switch (a) {
case 4:
alert('Right!');
alert('Richtig!');
break;

*!*
case 3: // (*) grouped two cases
case 3: // (*) zwei Fälle gruppiert
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
alert('Falsch!');
alert("Warum besuchst du nicht einen Mathekurs?");
break;
*/!*

default:
alert('The result is strange. Really.');
alert('Das Resultat ist komisch. Wirklich.');
}
```

Now both `3` and `5` show the same message.
Nun zeigen `3` und `5` die selbe Nachricht.

The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
Die Fähigkeit, Fälle "gruppieren" zu können, ist ein Nebeneffekt davon, wie `switch/case` ohne `break` funktioniert. Hier beginnt die Ausführung von `case 3` in der Zeile `(*)` und durchläuft `case 5`, weil es kein `break` gibt.

## Type matters
## Der Typ spielt eine Rolle

Let's emphasize that the equality check is always strict. The values must be of the same type to match.
Wichtig ist, dass die Gleichheitsprüfung immer streng ist. Die Werte müssen vom gleichen Typ sein, damit sie übereinstimmen.

For example, let's consider the code:
Betrachten wir zum Beispiel folgenden Code:

```js run
let arg = prompt("Enter a value?");
let arg = prompt("Wert eingeben?");
switch (arg) {
case '0':
case '1':
alert( 'One or zero' );
alert( 'Eins oder null' );
break;

case '2':
alert( 'Two' );
break;

case 3:
alert( 'Never executes!' );
alert( 'Wird niemals ausgeführt!' );
break;
default:
alert( 'An unknown value' );
alert( 'Ein unbekannter Wert' );
}
```

1. For `0`, `1`, the first `alert` runs.
2. For `2` the second `alert` runs.
3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute.
1. Für `0`, `1`, wird der erste `alert` ausgeführt.
2. Für `2` wird der zweite `alert` ausgeführt.
3. Aber für `3`, ist das Resultat des `prompt` ein String `"3"`, welcher nicht streng gleich `===` der Zahl `3` ist. Also haben wir ungenutzten Code in `case 3`! Die `default` Variante wird ausgeführt.