Bewerbungsfragen für Junior Frontend Entwickler: HTML, CSS & JavaScript Grundlagen

Einführung

Dieser umfassende Leitfaden enthält 32 sorgfältig ausgewählte Interviewfragen, die die grundlegenden Prinzipien der Frontend-Entwicklung abdecken: HTML, CSS und JavaScript. Dies sind die Fragen, denen Junior-Frontend-Entwickler in den Jahren 2024-2025 tatsächlich in Vorstellungsgesprächen begegnen. Jede Frage beinhaltet eine ausführliche Antwort, eine Seltenheitseinschätzung und eine Schwierigkeitsbewertung, die auf der Analyse von Hunderten von echten Vorstellungsgesprächen bei großen Technologieunternehmen und Startups basiert.

Dies ist Teil 1 unseres kompletten Interviewleitfadens. Fragen zu React, Build-Tools, Performance-Optimierung, Debugging, Barrierefreiheit, Testing und Soft Skills findest du in Teil 2: React, Tools & Advanced Topics.

HTML Grundlagen (7 Fragen)

1. Was sind semantische HTML-Elemente und warum sind sie wichtig?

Antwort: Semantische HTML-Elemente beschreiben ihre Bedeutung und ihren Zweck sowohl für Browser als auch für Entwickler eindeutig. Beispiele hierfür sind <header>, <nav>, <main>, <article>, <section>, <aside> und <footer>. Sie sind wichtig, weil sie die Barrierefreiheit für Screenreader und unterstützende Technologien verbessern, die Suchmaschinenoptimierung (SEO) verbessern, indem sie Suchmaschinen helfen, die Inhaltsstruktur zu verstehen, und den Code wartbarer und lesbarer machen. Im Gegensatz zu generischen <div>- und <span>-Elementen, die keinen Kontext liefern, kommunizieren semantische Elemente die Rolle und Bedeutung von Inhalten.

Seltenheit: Häufig
Schwierigkeit: Leicht

2. Erkläre den Unterschied zwischen Inline-, Block- und Inline-Block-Elementen

Antwort:

• Block-Elemente beginnen in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein (z. B. <div>, <p>, <h1>). Du kannst die Eigenschaften width und height festlegen.
• Inline-Elemente bleiben in derselben Zeile und nehmen nur so viel Breite ein, wie benötigt wird (z. B. <span>, <a>, <strong>). Du kannst width oder height nicht festlegen.
• Inline-Block-Elemente bleiben inline, erlauben dir aber, width und height wie bei Block-Elementen festzulegen. Dies kombiniert den Fluss von Inline- mit den Größenbestimmungsfunktionen von Block.

Seltenheit: Häufig
Schwierigkeit: Leicht

3. Was sind Void (Self-Closing) Elemente in HTML?

Antwort: Void-Elemente sind HTML-Elemente, die keine schließenden Tags haben und keinen Inhalt enthalten können. Häufige Beispiele sind: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> und <source>. Diese Elemente sind mit nur ihrem öffnenden Tag und Attributen vollständig. Zum Beispiel benötigt <img src="photo.jpg" alt="description"> keinen schließenden </img>-Tag.

Seltenheit: Häufig
Schwierigkeit: Leicht

4. Wie gestaltest du eine Website barrierefrei? Welche HTML-Attribute verbessern die Barrierefreiheit?

Antwort: Um Websites barrierefrei zu gestalten:

• Verwende semantische HTML-Elemente (<nav>, <main>, <header>, <footer>)
• Gib für alle Bilder alt-Attribute an, die ihren Inhalt beschreiben
• Behalte eine korrekte Überschriftenhierarchie (H1-H6) bei, ohne Ebenen zu überspringen
• Beschrifte Formulareingaben mit <label>-Elementen unter Verwendung des for-Attributs
• Stelle die Zugänglichkeit über die Tastatur mit der richtigen Tab-Reihenfolge sicher
• Verwende ARIA-Attribute, wenn semantisches HTML nicht ausreicht: aria-label, aria-describedby, aria-hidden, aria-live
• Füge role-Attribute für komplexe Widgets hinzu
• Stelle einen ausreichenden Farbkontrast sicher (4,5:1 für normalen Text)
• Sorge dafür, dass interaktive Elemente fokussierbar sind und sichtbare Fokusindikatoren vorhanden sind

Seltenheit: Häufig
Schwierigkeit: Mittel

5. Erkläre den Unterschied zwischen GET- und POST-Methoden in Formularen

Antwort:

• GET: Fügt Formulardaten als Query-Parameter an die URL an, wodurch die Daten im Browser sichtbar werden. Hat Längenbeschränkungen (~2000 Zeichen), kann zwischengespeichert und als Lesezeichen gespeichert werden, ist unsicher für sensible Daten. Wird zum Abrufen von Daten verwendet, bei denen die Anfrage den Serverzustand nicht verändert (Suchen, Filter).
• POST: Sendet Daten im Anfrage-Body, nicht sichtbar in der URL. Keine Längenbeschränkungen, kann nicht standardmäßig zwischengespeichert werden, sicherer für sensible Informationen. Wird zum Senden von Daten verwendet, die den Serverzustand verändern (Login-Formulare, Datei-Uploads, Erstellen von Datensätzen).

Beispiel: Suchformulare verwenden typischerweise GET, damit die Ergebnisse als Lesezeichen gespeichert werden können, während Login-Formulare POST verwenden, um Anmeldeinformationen zu verbergen.

Seltenheit: Häufig
Schwierigkeit: Leicht-Mittel

6. Was ist der Zweck des <meta>-Tags?

Antwort: Das <meta>-Tag liefert Metadaten über das HTML-Dokument, die nicht auf der Seite angezeigt werden, aber von Browsern, Suchmaschinen und anderen Webdiensten verwendet werden. Häufige Verwendungen sind:

• Zeichenkodierung: <meta charset="UTF-8">
• Viewport-Einstellungen für Responsive Design: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• SEO-Beschreibungen: <meta name="description" content="Seitenbeschreibung">
• Autoreninformationen: <meta name="author" content="Name">
• Keywords (weniger relevant heute): <meta name="keywords" content="keyword1, keyword2">

Seltenheit: Häufig
Schwierigkeit: Leicht

7. Was ist der Unterschied zwischen <script>, <script async> und <script defer>?

Antwort:

• Reguläres <script>: Blockiert das HTML-Parsing, während das Skript heruntergeladen und ausgeführt wird. Das Seitenrendering stoppt, bis das Skript abgeschlossen ist.
• <script async>: Lädt das Skript parallel zum HTML-Parsing herunter, führt es aber sofort aus, wenn es bereit ist (blockiert möglicherweise das Parsing). Die Ausführungsreihenfolge ist nicht garantiert. Gut für unabhängige Skripte wie Analytics.
• <script defer>: Lädt parallel herunter, führt aber erst aus, nachdem das HTML-Parsing abgeschlossen ist, wobei die Skriptreihenfolge beibehalten wird. Am besten für Skripte, die vom DOM oder anderen Skripten abhängen.

Bewährte Methode: Platziere <script defer> im <head>, um eine optimale Performance zu erzielen und gleichzeitig die richtige Ausführungsreihenfolge sicherzustellen.

Seltenheit: Ungewöhnlich
Schwierigkeit: Mittel

CSS Grundlagen (10 Fragen)

8. Erkläre das CSS Box Model

Antwort: Das CSS Box Model beschreibt, wie Elemente mit vier Komponenten gerendert werden (von innen nach außen):

1. Content: Der eigentliche Inhalt (Text, Bilder)
2. Padding: Raum zwischen Inhalt und Rahmen (innen)
3. Border: Der Rahmen, der das Padding umgibt
4. Margin: Raum außerhalb des Rahmens (zwischen Elementen)

Die Eigenschaft box-sizing beeinflusst die Berechnungen:

• box-sizing: content-box (Standard): Width/height gelten nur für den Inhalt; Padding und Border werden hinzugefügt
• box-sizing: border-box: Width/height beinhalten Inhalt + Padding + Border (intuitiver)

Beispiel: Mit box-sizing: border-box bleibt ein Element mit width: 100px; padding: 10px; border: 2px; genau 100px breit.

Seltenheit: Häufig
Schwierigkeit: Leicht-Mittel

9. Erkläre die CSS-Spezifität und wie sie funktioniert

Antwort: Die CSS-Spezifität bestimmt, welche Stile angewendet werden, wenn mehrere Regeln auf dasselbe Element abzielen. Die Spezifität wird durch Zählen von Selektoren berechnet:

• Inline-Stile: 1000 Punkte
• IDs: 100 Punkte pro Stück
• Klassen, Attribute, Pseudo-Klassen: 10 Punkte pro Stück
• Elemente, Pseudo-Elemente: 1 Punkt pro Stück

Beispiele:

• #nav .button = 110 (1 ID + 1 Klasse)
• .header .nav a = 21 (2 Klassen + 1 Element)
• div p = 2 (2 Elemente)

Wenn die Spezifität gleich ist, gewinnt die letzte Regel (Cascading). !important setzt alles außer Kraft, sollte aber vermieden werden. Bewährte Methode: Verwende Klassen für die Gestaltung, vermeide IDs und !important.

Seltenheit: Häufig
Schwierigkeit: Mittel

10. Was ist Flexbox und wann würdest du es verwenden?

Antwort: Flexbox ist ein eindimensionales Layoutsystem zum Anordnen von Elementen entlang einer einzelnen Achse (Zeile oder Spalte).

Eigenschaften des Elternelements (Flex-Container):

• display: flex - aktiviert Flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - Ausrichtung entlang der Hauptachse (center, space-between, space-around)
• align-items - Ausrichtung entlang der Kreuzachse (center, flex-start, flex-end, stretch)
• flex-wrap - steuert das Umbrechen (nowrap, wrap)

Eigenschaften des Kindelements (Flex-Item):

• flex-grow - wie stark das Element relativ zu anderen wächst
• flex-shrink - wie stark das Element schrumpft
• flex-basis - anfängliche Größe vor dem Wachsen/Schrumpfen
• align-self - überschreibt align-items für einzelne Elemente

Verwende Flexbox für: Navigationsleisten, Kartenlayouts, Zentrieren von Elementen, gleichmäßige Verteilung von Raum, Ausrichten von Elementen innerhalb von Containern.

Seltenheit: Häufig
Schwierigkeit: Mittel

11. Was ist CSS Grid und wie unterscheidet es sich von Flexbox?

Antwort: CSS Grid ist ein zweidimensionales Layoutsystem zum Erstellen komplexer Layouts mit Zeilen UND Spalten gleichzeitig.

Hauptunterschiede:

• Grid: Zweidimensional (Zeilen + Spalten), am besten für Seitenlayouts
• Flexbox: Eindimensional (einzelne Achse), am besten für Komponenten

Grid-Eigenschaften:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 Spalten */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* oder gap */
}

Wann zu verwenden:

• Grid: Gesamtseitenlayouts, Designs im Magazinstil, komplexe Gridstrukturen
• Flexbox: Navigationsleisten, Karten, Komponenten innerhalb von Gridzellen
• Beide zusammen: Grid für Makro-Layout, Flexbox für Mikro-Layouts

Seltenheit: Häufig
Schwierigkeit: Mittel

12. Wie zentrierst du einen Div horizontal und vertikal?

Antwort:

Moderne Ansätze (bevorzugt):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Legacy-Ansätze:

/* Absolute Positionierung */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (nur horizontal, benötigt Breite) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox und Grid sind mittlerweile die Standardlösungen, da sie sauberer und flexibler sind.

Seltenheit: Häufig
Schwierigkeit: Leicht-Mittel

13. Erkläre CSS Positioning: static, relative, absolute, fixed und sticky

Antwort:

• Static (Standard): Normaler Dokumentenfluss, keine spezielle Positionierung
• Relative: Positioniert relativ zu seiner normalen Position unter Verwendung von top/right/bottom/left. Der ursprüngliche Raum im Dokumentenfluss bleibt erhalten. Wird oft als Positionierungskontext für absolute Kinder verwendet.
• Absolute: Aus dem Fluss entfernt, positioniert relativ zum nächsten positionierten Vorfahren (oder Viewport, falls keiner vorhanden). Beeinflusst keine anderen Elemente.
• Fixed: Aus dem Fluss entfernt, positioniert relativ zum Viewport. Bleibt beim Scrollen an Ort und Stelle.
• Sticky: Hybrid aus relativ und fixed. Verhält sich relativ bis zur Scrollschwelle, wird dann fixed. Nützlich für Sticky-Header, die im Fluss beginnen.

Beispiel: Navigation, die nach dem Scrollen fixed wird, verwendet position: sticky; top: 0;

Seltenheit: Häufig
Schwierigkeit: Mittel

14. Was ist der Unterschied zwischen display: none, visibility: hidden und opacity: 0?

Antwort:

• display: none: Element vollständig aus dem Dokumentenfluss entfernt, nimmt keinen Platz ein, nicht zugänglich für Screenreader, keine Pointer-Events
• visibility: hidden: Element unsichtbar, behält aber den Platz im Layout bei, weiterhin im DOM, nicht zugänglich für Screenreader, keine Pointer-Events
• opacity: 0: Element unsichtbar, behält aber den Platz bei, weiterhin im DOM, IMMER NOCH zugänglich für Screenreader, EMPFÄNGT IMMER NOCH Pointer-Events

Anwendungsfälle:

• display: none - Umschalten der Sichtbarkeit (Modale, Dropdowns)
• visibility: hidden - Beibehalten des Layouts beim Ausblenden
• opacity: 0 - Fade-Animationen, Element interaktiv halten

Seltenheit: Häufig
Schwierigkeit: Leicht-Mittel

15. Was sind CSS-Pseudoklassen und Pseudo-Elemente? Gib Beispiele an.

Antwort:

Pseudo-Klassen (einzelner Doppelpunkt) - Wählen Elemente basierend auf Zustand oder Position aus:

a:hover { color: blue; }          /* Maus über */
input:focus { border: 2px solid blue; }  /* Tastaturfokus */
li:nth-child(odd) { background: #eee; }  /* ungerade Listenelemente */
button:disabled { opacity: 0.5; }  /* deaktivierter Zustand */

Weitere Beispiele: :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-Elemente (doppelter Doppelpunkt) - Gestalten bestimmte Teile oder fügen Inhalte ein:

p::first-line { font-weight: bold; }  /* erste Zeile des Absatzes */
p::first-letter { font-size: 2em; }   /* Initial */
.icon::before { content: "→"; }        /* Inhalt einfügen */
input::placeholder { color: gray; }    /* Platzhaltertext */

Pseudo-Elemente eignen sich hervorragend für dekorative Elemente, ohne HTML hinzuzufügen.

Seltenheit: Häufig
Schwierigkeit: Mittel

16. Wie erstellst du responsive Layouts? Erkläre Media Queries.

Antwort: Responsive Layouts passen sich an unterschiedliche Bildschirmgrößen an mit:

Media Queries:

/* Mobile-First-Ansatz (empfohlen) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Tablet */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Desktop */
}

Häufige Breakpoints:

• 320px: Kleines Mobilgerät
• 768px: Tablet
• 1024px: Desktop
• 1440px: Großer Desktop

Weitere responsive Techniken:

• Fluide Layouts (Prozentsätze, vw/vh-Einheiten)
• Flexible Flexbox und Grid
• Responsive Bilder (max-width: 100%, srcset-Attribut)
• min-width-Queries (Mobile-First) vs. max-width (Desktop-First)

Seltenheit: Häufig
Schwierigkeit: Mittel

17. Was ist z-index und wie funktioniert es?

Antwort: z-index steuert die Stapelreihenfolge von positionierten Elementen (relative, absolute, fixed, sticky) entlang der Z-Achse (vorne nach hinten).

Wichtige Punkte:

• Funktioniert nur bei positionierten Elementen (nicht static)
• Höhere Werte erscheinen im Vordergrund
• Kann negative Werte verwenden
• Der Standardwert ist auto (effektiv 0)
• Erstellt einen "Stapelkontext", der beeinflusst, wie Kinder gestapelt werden

Häufiger Fehler:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

Das Kind mit z-index 9999 kann nicht über einem anderen Element mit z-index 2 erscheinen, das sich außerhalb des Stapelkontexts des Elternelements befindet.

Seltenheit: Häufig
Schwierigkeit: Mittel

JavaScript Grundlagen (15 Fragen)

18. Erkläre den Unterschied zwischen var, let und const

Antwort:

• var: Funktionsbezogener Gültigkeitsbereich, wird gehoisted und mit undefined initialisiert, kann neu deklariert werden, in modernem Code weitgehend veraltet
• let: Blockbezogener Gültigkeitsbereich, wird gehoisted, befindet sich aber in der Temporal Dead Zone (TDZ) bis zur Deklaration, kann im selben Gültigkeitsbereich nicht neu deklariert werden
• const: Blockbezogener Gültigkeitsbereich, wird gehoisted, befindet sich aber in der TDZ, muss bei der Deklaration initialisiert werden, kann nicht neu zugewiesen werden (aber Objekt-/Array-Inhalte können geändert werden)

Bewährte Methoden:

• Verwende standardmäßig const
• Verwende let, wenn du neu zuweisen musst
• Verwende niemals var in modernem JavaScript

Beispiel:

const name = "Alice";     // Kann nicht neu zugewiesen werden
let count = 0;            // Kann neu zugewiesen werden
count = 1;                // OK
name = "Bob";             // Fehler!

const user = { age: 25 };
user.age = 26;            // OK - Objekteigenschaft mutieren
user = {};                // Fehler - neu zuweisen

Seltenheit: Häufig
Schwierigkeit: Leicht

19. Was sind Closures und gib ein praktisches Beispiel?

Antwort: Ein Closure liegt vor, wenn eine innere Funktion Zugriff auf Variablen aus dem Gültigkeitsbereich ihrer äußeren (umschließenden) Funktion hat, auch nachdem die äußere Funktion zurückgekehrt ist. Die innere Funktion "schließt" diese Variablen ein.

Beispiel:

function createCounter() {
  let count = 0;  // Private Variable
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Die innere Funktion behält den Zugriff auf count, obwohl createCounter die Ausführung beendet hat. Dies ermöglicht Datenschutz - count kann nicht direkt von außen aufgerufen werden.

Anwendungsfälle: Datenschutz, Funktionsfabriken, Callbacks, Modulmuster, Event-Handler

Seltenheit: Häufig
Schwierigkeit: Mittel

20. Erkläre == vs. === in JavaScript

Antwort:

• == (lose Gleichheit): Führt vor dem Vergleich eine Typumwandlung durch, wandelt Typen an, um sie anzupassen
• === (strikte Gleichheit): Prüft sowohl Wert ALS AUCH Typ, keine Typumwandlung

Beispiele:

5 == '5'       // true (String wird in Zahl umgewandelt)
5 === '5'      // false (unterschiedliche Typen)

null == undefined   // true (Spezialfall)
null === undefined  // false (unterschiedliche Typen)

0 == false     // true (beide umgewandelt)
0 === false    // false (Zahl vs. Boolean)

Bewährte Methode: Verwende immer === und !==, um unerwartete Fehler durch Typumwandlung zu vermeiden.

Seltenheit: Häufig
Schwierigkeit: Leicht

21. Was ist Hoisting in JavaScript?

Antwort: Hoisting ist das Verhalten von JavaScript, Variablen- und Funktionsdeklarationen während der Kompilierungsphase, vor der Codeausführung, an den Anfang ihres Gültigkeitsbereichs zu verschieben.

Unterschiedliches Hoisting-Verhalten:

console.log(x);  // undefined (gehoisted, initialisiert)
var x = 5;

console.log(y);  // ReferenceError (gehoisted, aber in TDZ)
let y = 5;

sayHello();      // "Hello!" (Funktion vollständig gehoisted)
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError (keine Funktion)
var sayHi = function() {
  console.log("Hi!");
};

Wichtige Punkte:

• var-Deklarationen werden gehoisted und mit undefined initialisiert
• let/const werden gehoisted, bleiben aber uninitialisiert (Temporal Dead Zone)
• Funktionsdeklarationen werden vollständig gehoisted (einschließlich Implementierung)
• Funktionsausdrücke werden nicht vollständig gehoisted

Seltenheit: Häufig
Schwierigkeit: Mittel

22. Erkläre das this-Keyword und wie es sich in Arrow-Funktionen unterscheidet

Antwort: this bezieht sich auf den Kontext, in dem eine Funktion ausgeführt wird. Sein Wert hängt davon ab, WIE die Funktion aufgerufen wird.

Reguläre Funktionen:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (Strict Mode) oder window

Arrow-Funktionen:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = lexikalischer Gültigkeitsbereich (umschließender Kontext)

Hauptunterschiede:

• Reguläre Funktionen: this wird durch die Aufrufstelle bestimmt
• Arrow-Funktionen: this wird lexikalisch vom umschließenden Gültigkeitsbereich geerbt
• Arrow-Funktionen haben kein eigenes this, arguments oder super

Anwendungsfall: Arrow-Funktionen eignen sich hervorragend für Callbacks, bei denen du das äußere this beibehalten möchtest:

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Timer-Instanz (lexikalisch)
    }, 1000);
  }
}

Seltenheit: Häufig
Schwierigkeit: Mittel-Schwer

23. Was sind Template Literals und welche Vorteile haben sie?

Antwort: Template Literals sind String-Literale mit Backticks (`), die String-Interpolation und mehrzeilige Strings unterstützen.

Funktionen:

const name = "Alice";
const age = 25;

// String-Interpolation
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Mehrzeilige Strings
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Ausdrucksauswertung
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Vorteile:

• Sauberere Syntax als String-Verkettung
• Keine Notwendigkeit für \n für Zeilenumbrüche
• Kann jeden JavaScript-Ausdruck mit ${} einbetten
• Besser für HTML/CSS-Generierung

Seltenheit: Häufig
Schwierigkeit: Leicht

24. Erkläre Promises und ihre drei Zustände

Antwort: Ein Promise repräsentiert den eventuellen Abschluss (oder Misserfolg) einer asynchronen Operation und ihren resultierenden Wert.

Drei Zustände:

1. Pending: Anfangszustand, Operation nicht abgeschlossen
2. Fulfilled: Operation erfolgreich abgeschlossen
3. Rejected: Operation fehlgeschlagen

Beispiel:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

Vorteile gegenüber Callbacks:

• Vermeidet Callback-Hölle
• Verkettbar mit .then()
• Bessere Fehlerbehandlung mit .catch()
• Kann Promise.all() für parallele Operationen verwenden

Seltenheit: Häufig
Schwierigkeit: Mittel

25. Was ist async/await und wie verbessert es die Lesbarkeit des Codes?

Antwort: async/await ist syntaktischer Zucker, der auf Promises aufbaut und asynchronen Code eher wie synchronen Code aussehen und sich verhalten lässt.

Beispiel:

// Mit Promises (schwerer zu lesen)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Mit async/await (sauberer)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Wichtige Punkte:

• async-Funktion gibt immer ein Promise zurück
• await pausiert die Ausführung, bis das Promise aufgelöst ist
• Verwende try/catch für die Fehlerbehandlung
• Macht sequentielle Operationen klarer
• Fehlerbehandlung natürlicher als .catch()

Seltenheit: Häufig
Schwierigkeit: Mittel

26. Erkläre den Event Loop und wie JavaScript asynchrone Operationen verarbeitet

Antwort: JavaScript ist Single-Threaded, verarbeitet aber asynchrone Operationen über den Event-Loop-Mechanismus.

Komponenten:

1. Call Stack: Führt synchronen Code aus (LIFO)
2. Web APIs: Verarbeiten asynchrone Operationen (setTimeout, fetch, DOM-Events)
3. Callback Queue (Task Queue): Enthält Callbacks von Web APIs
4. Microtask Queue: Enthält Promise-Callbacks (höhere Priorität)
5. Event Loop: Verschiebt Aufgaben von Warteschlangen zum Call Stack, wenn der Stack leer ist

Ausführungsreihenfolge:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Ausgabe: 1, 4, 3, 2
// Erklärung:
// - Synchroner Code (1, 4) wird zuerst ausgeführt
// - Microtasks (Promise) werden vor Macrotasks ausgeführt
// - Macrotasks (setTimeout) werden zuletzt ausgeführt

Ausführungsreihenfolge: Call Stack → Microtask Queue → Callback Queue (Macrotasks)

Seltenheit: Häufig
Schwierigkeit: Schwer

27. Wie wählst und manipulierst du DOM-Elemente?

Antwort:

Auswahlmethoden:

// Modern (bevorzugt)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Legacy (immer noch gültig)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Manipulation:

// Inhalt
element.textContent = 'Neuer Text';
element.innerHTML = '<span>HTML-Inhalt</span>';

// Styling
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Klassen
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Attribute
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Elemente erstellen
const newDiv = document.createElement('div');
newDiv.textContent = 'Hallo';
document.body.appendChild(newDiv);

Seltenheit: Häufig
Schwierigkeit: Leicht

28. Erkläre Event Delegation und warum sie nützlich ist

Antwort: Event Delegation ist das Anhängen eines einzelnen Event-Listeners an ein Elternelement anstelle von mehreren Listenern an Kindelemente, wodurch Event Bubbling genutzt wird.

Ohne Delegation (ineffizient):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

Mit Delegation (effizient):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Vorteile:

• Bessere Performance: Einzelner Listener vs. viele
• Funktioniert mit dynamischen Elementen: Verarbeitet automatisch später hinzugefügte Elemente
• Geringere Speichernutzung: Weniger Event-Listener
• Sauberer Code: Zentralisierte Event-Verarbeitung

Anwendungsfall: Listen, in denen Elemente dynamisch hinzugefügt/entfernt werden können (To-Do-Listen, Warenkörbe, Kommentarbereiche)

Seltenheit: Häufig
Schwierigkeit: Mittel

29. Was ist Event Bubbling? Wie stoppst du die Propagation?

Antwort: Event Bubbling liegt vor, wenn ein Event, das auf einem Kindelement ausgelöst wird, durch seine Vorfahren bis zum Dokumentstamm "aufsteigt" (bubbles up).

Drei Phasen:

1. Capturing Phase: Event wandert vom Fenster zum Ziel
2. Target Phase: Event erreicht das Zielelement
3. Bubbling Phase: Event steigt vom Ziel zum Fenster auf (Standard)

Beispiel:

<div id="parent">
  <button id="child">Klick mich</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Elternteil geklickt');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Kind geklickt');
  // Event steigt zum Elternteil auf
});
// Das Klicken auf die Schaltfläche protokolliert: "Kind geklickt", dann "Elternteil geklickt"
</script>

Propagation stoppen:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // Stoppt das Aufsteigen
  e.preventDefault();    // Verhindert das Standardverhalten (Formular absenden, Linknavigation)
});

Seltenheit: Häufig
Schwierigkeit: Mittel

30. Erkläre Destructuring für Objekte und Arrays

Antwort: Destructuring extrahiert Werte aus Arrays oder Eigenschaften aus Objekten in unterschiedliche Variablen.

Array Destructuring:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// Elemente überspringen
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

Objekt Destructuring:

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
};

const { name, age, city = 'NYC' } = user;
// name = 'Alice'
// age = 25
// city = 'NYC' (Standardwert)

// Variablen umbenennen
const { name: userName, age: userAge } = user;

// Verschachteltes Destructuring
const { address: { street, zip } } = person;

**