📚
Lerndokumentationen
Web
Web
  • Willkommen
  • HTML
    • Was ist HTML?
    • Elemente
    • Attribute
    • Boilerplate
  • Textelemente
  • Links
  • Dokumentenstruktur
  • Medien
  • Tabellen
  • Formulare
  • CSS
    • Was ist CSS?
    • Syntax
  • Einheiten
  • Selektoren
  • Boxmodell
  • Hintergründe und Rahmen
  • Overflow
  • Bilder
  • Formulare
  • Textelemente
  • Layout
    • Flexbox
    • Grid
  • Responsive Design
  • JavaScript
    • Was ist JavaScript?
    • Einbindung in HTML
    • Grundlagen
      • Variablen und Werte
      • Datentypen
      • Operatoren und Ausdrücke
      • Kontrollstrukturen
      • Schleifen
    • Funktionen
      • Funktionsdeklarationen vs. Funktionsausdrücke
      • Arrow Functions
      • Standardparameter und Rest-Parameter
      • First-Class und Higher-Order-Funktionen
      • Closures
      • IIFE (Immediately Invoked Function Expressions)
    • Arrays
      • Erstellen und Modifizieren
      • Iteration über Arrays
      • Sortieren
      • Nützliche Methoden
    • Objekte und Datenstrukturen
      • Erstellen und Manipulieren
      • Destructuring
      • Sets und Maps
    • Strings
      • Template Literals
      • Methoden
    • Moderne JavaScript-Features
      • Optionale Verkettung
      • Nullish Coalescing Operator
      • Spread und Rest Operator
      • Kurzschlussausdrücke
    • Scope und Kontext
      • this Keyword
      • Call, Apply und Bind
      • Hoisting und Temporal Dead Zone (TDZ)
    • Objektorientierte Programmierung
      • Prototypes
      • Constructor Functions
      • ES6 Classes
      • Die create()-Methode
    • Asynchronous JavaScript
      • AJAX
      • Promises
    • Zahlen, Daten, Internationalisierung und Timer
      • Mathematische Operationen
      • Datum und Zeit
      • Internationalisierung
      • Timer
    • Modules
    • JavaScript im Browser (DOM und Events)
      • Das DOM
      • Elemente auswählen, erstellen und manipulieren
      • Styles, Attribute und Klassen
      • Events und Event Listener
      • Event Propagation
        • Event Delegation
      • DOM Traversing
    • JavaScript Engine und Performance
      • Execution Context und Call Stack
  • TypeScript
    • Was ist TypeScript?
  • Compiler und Runtimes
  • Konfiguration
  • Types
    • Primitive Typen und Typableitung
    • Arrays und Tupel
    • Objekte
    • Top- und Bottom-Types
    • Enums
    • Utility Types
      • Records
  • Typenkombination
    • Union Types
    • Discriminated Unions
    • Intersections
  • Funktionen
  • Klassen
    • Grundlagen
    • Feldinitialisierer
    • Schreibgeschützte Felder
    • Implementieren
    • Private und Geschützte Member
    • Getter und Setter
    • Statische Member
    • Abstrakte Klassen und Member
  • Modules
    • Importieren und Exportieren
    • Ambient Types
    • Namespaces
    • Globals
  • React
    • Was ist React?
    • JSX
    • Komponenten
      • Root-Komponente
      • Styling
      • Listen
      • Conditional Rendering
      • Fragments
    • Props
      • Destructuring
      • Children
    • Interaktivität
      • Event Handling
      • State
      • Formulare
    • State Management
      • State anheben
      • Derived State
    • Komposition und Reusability
      • Komponentenstrukturierung
      • Prop Drilling
      • Komposition
Bereitgestellt von GitBook
Auf dieser Seite
  • if/else-Anweisungen
  • Beispiel
  • Conditional Operator
  • Beispiel
  • switch-Anweisung
  • Beispiel
  1. JavaScript
  2. Grundlagen

Kontrollstrukturen

if/else-Anweisungen

Mit if/else-Anweisungen können wir in unserem Code Entscheidungen treffen. Die Syntax einer if/else-Anweisung sieht wie folgt aus:

if (condition) {
  // run code if condition is true
} else {
  // run code if condition is false
}

Der else-Block ist optional, du kannst einfach eine if-Anweisung ohne else schreiben

Wenn du auf mehr als eine Bedingung prüfen möchtest, kannst du das mit einer else if-Anweisung tun:

if (condition) {
  // run code if condition is true
} else if (conditon) {
  // run code if first condition is false and second is true
} else {
  // run code if both conditions are false
}

Du kannst so viele else if-Anweisungen hinzufügen, wie du willst

Beispiel

Wir könnten z.B. prüfen, ob eine Person den Führerschein machen darf oder nicht. Wenn ja, wird das auf der Konsole ausgegeben, wenn nicht, wird die Anzahl der Jahre ausgegeben, die noch verbleiben, bis die Person den Führerschein machen kann.

const age = 16;

if (age >= 18) {
  console.log('Levin can start driving license 🚗');
} else {
  const yearsLeft = 18 - age;
  console.log(`Levin is too young. Wait another ${yearsLeft} years.`);
}

Conditional Operator

Der ternäre/konditionale Operator ermöglicht es uns, etwas Ähnliches wie eine if/else Anweisung zu schreiben, aber alles in einer Zeile.

Die Syntax sieht wie folgt aus:

condition ? exprIfTrue : exprIfFalse

Da der konditionale Operator ein Ausdruck ist, können wir ihn auch in einer Variable speichern.

Beispiel

const age = 18;

const drink = age >= 18 ? 'wine 🍷' : 'water 💧';
console.log(`I like to drink ${drink}`);

switch-Anweisung

Die "Switch"-Anweisung ist eine alternative Möglichkeit, um komplizierte if/else-Ladder zu schreiben. In einer switch-Anweisung vergleichen wir einen Wert mit mehreren verschiedenen Optionen. Die Syntax sieht wie folgt aus:

switch (expression) {
  case expression1:
    // run code if expression is true
  case expression2:
    // run code if expression is true
  case expressionN:
    // run code if expression is true
  default:
    // run code if none of the above expressions are true
}

Beispiel

const day = 'monday';

switch (day) {
  case 'monday':
    console.log('Plan course structure');
    console.log('Go to coding meetup');
    break;
  case 'tuesday':
    console.log('Prepare theory videos');
    break;
  case 'wednesday':
  case 'thursday':
    console.log('Write code examples');
    break;
  case 'friday':
    console.log('Record videos');
    break;
  case 'saturday':
  case 'sunday':
    console.log('Enjoy the weekend :D');
    break;
  default:
    console.log('Not a valid day!');
}
VorherigeOperatoren und AusdrückeNächsteSchleifen

Zuletzt aktualisiert vor 3 Monaten