Kapitel 19: ES6+ neuere Versionen (ES7~ES13)

19.1 Optional Chaining Operator `?.`

🔗 Was ist Optional Chaining?

Der Optional Chaining Operator (?.) erlaubt es, sicher auf tiefer verschachtelte Eigenschaften zuzugreifen, ohne Fehler zu werfen, wenn eine Zwischenstufe null oder undefined ist.

javascript

// Syntax
obj?.property
obj?.[expression]
array?.[index]
funktion?.(args)

🎯 Einfaches Beispiel

javascript

const user = {
  name: "Max",
  adresse: {
    stadt: "Berlin"
  }
};

// ❌ Alte Methode (ES5/ES6) - Mit if-Abfrage
var stadt1;
if (user && user.adresse) {
  stadt1 = user.adresse.stadt;
} else {
  stadt1 = undefined;
}
console.log(stadt1); // "Berlin"

// ❌ Alte Methode (ES5/ES6) - Mit ternärem Operator
var stadt2 = user && user.adresse && user.adresse.stadt;
console.log(stadt2); // "Berlin"

// ✅ Neue Methode (ES11/2020) - Mit Optional Chaining
const stadt3 = user?.adresse?.stadt;
console.log(stadt3); // "Berlin"

// Bei nicht existierenden Eigenschaften → undefined (kein Fehler!)
const land = user?.adresse?.land;
console.log(land); // undefined ✅ (kein Fehler!)

🎯 Mit Arrays und Funktionen

javascript

// Array
const array = [1, 2, 3];
console.log(array?.[5]); // undefined ✅ (kein Fehler!)

// Funktion
const user = {
  greet: function(name) {
    return `Hallo ${name}!`;
  }
};

console.log(user.greet?.("Max")); // "Hallo Max!"
console.log(user.sayBye?.("Max")); // undefined ✅ (kein Fehler!)

📋 Praxisbeispiel: API-Antwort verarbeiten

javascript

// Angenommen, eine API gibt folgendes zurück:
const apiResponse = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: "Max Mustermann",
      adresse: {
        stadt: "Berlin",
        land: "Deutschland"
      }
    }
  }
};

// ✅ Sicherer Zugriff
const stadt = apiResponse?.data?.user?.adresse?.stadt;
console.log(stadt); // "Berlin"

const telefonnummer = apiResponse?.data?.user?.telefonnummer;
console.log(telefonnummer); // undefined ✅ (kein Fehler!)

19.2 Nullish Coalescing Operator `??`

🔗 Was ist Nullish Coalescing?

Der Nullish Coalescing Operator (??) gibt den rechten Operanden zurück, wenn der linke Operand null oder undefined ist. Andernfalls gibt er den linken Operanden zurück.

javascript

// Syntax
leftExpr ?? rightExpr

🔍 Vergleich: `??` vs `||`

Operator	Prüfung	Rückgabe bei `0`, `""`, `false`
`\|\|` (OR)	Falsy-Werte (`0`, `""`, `false`, `null`, `undefined`)	Rückgabe des rechten Operanden
`??` (Nullish Coalescing)	Nur `null` oder `undefined`	Rückgabe des linken Operanden

🎯 Einfaches Beispiel

javascript

// ❌ Alte Methode (ES5/ES6) - Mit `||`
const port1 = 0 || 3000;
console.log(port1); // 3000 ❌ (0 ist falsy, also 3000)

// ✅ Neue Methode (ES11/2020) - Mit `??`
const port2 = 0 ?? 3000;
console.log(port2); // 0 ✅ (0 ist nicht null/undefined)

// Weitere Beispiele
console.log(null ?? "Fallback");    // "Fallback" ✅
console.log(undefined ?? "Fallback"); // "Fallback" ✅
console.log("" ?? "Fallback");      // "" ✅ (leerer String ist nicht null/undefined)
console.log(false ?? "Fallback");   // false ✅ (false ist nicht null/undefined)

📋 Praxisbeispiel: Standardwerte setzen

javascript

function configureApi(options = {}) {
  // ✅ Beser mit `??` als mit `||`
  const timeout = options.timeout ?? 5000;
  const retry = options.retry ?? 3;
  const debug = options.debug ?? false;
  
  console.log(`Timeout: ${timeout}, Retry: ${retry}, Debug: ${debug}`);
}

configureApi({ timeout: 0, retry: 0, debug: false });
// Ausgabe: "Timeout: 0, Retry: 0, Debug: false" ✅ (korrekt!)

// ❌ Wenn mit `||` gemacht:
// Ausgabe wäre: "Timeout: 5000, Retry: 3, Debug: false" ❌ (falsch!)

19.3 Logische Zuweisungsoperatoren `||=` `&&=`

🔗 Was sind logische Zuweisungsoperatoren?

Logische Zuweisungsoperatoren kombinieren logische Operatoren mit Zuweisung.

Operator	Beschreibung	Entspricht
`		=`
`&&=`	AND-Zuweisung	`x = x && y`
`??=`	Nullish Coalescing Zuweisung	`x = x ?? y`

🎯 `||=` (OR-Zuweisung)

Weist einen Wert zu, wenn der aktuelle Wert falsy ist.

javascript

// ❌ Alte Methode (ES5/ES6)
var name1 = "";
if (!name1) {
  name1 = "Gast";
}
console.log(name1); // "Gast"

// ✅ Neue Methode (ES2021) - Mit `||=`
let name2 = "";
name2 ||= "Gast";
console.log(name2); // "Gast" ✅

// Weitere Beispiele
let x = 0;
x ||= 10;
console.log(x); // 10 (0 ist falsy)

let y = "Hallo";
y ||= "Welt";
console.log(y); // "Hallo" (ist bereits truthy)

🎯 `&&=` (AND-Zuweisung)

Weist einen Wert zu, wenn der aktuelle Wert truthy ist.

javascript

// ✅ Mit `&&=`
let x = 5;
x &&= 10;
console.log(x); // 10 ✅ (5 ist truthy, also 10 zuweisen)

let y = 0;
y &&= 10;
console.log(y); // 0 ✅ (0 ist falsy, also nicht zuweisen)

🎯 `??=` (Nullish Coalescing Zuweisung)

Weist einen Wert zu, wenn der aktuelle Wert null oder undefined ist.

javascript

// ✅ Mit `??=` (ES2021)
let name = null;
name ??= "Gast";
console.log(name); // "Gast" ✅

let alter = 0;
alter ??= 25;
console.log(alter); // 0 ✅ (0 ist nicht null/undefined, also nicht zuweisen!)

let stadt;
stadt ??= "Berlin";
console.log(stadt); // "Berlin" ✅ (undefined, also zuweisen!)

📋 Praxisbeispiel: Konfiguration aktualisieren

javascript

function updateConfig(config) {
  // ✅ Standardwerte nur setzen, wenn `null` oder `undefined`
  config.timeout ??= 5000;
  config.retry ??= 3;
  config.debug ??= false;
  
  // ✅ Nur überschreiben, wenn leer
  config.name ||= "Standard-App";
  
  return config;
}

console.log(updateConfig({ timeout: 10000 }));
// { timeout: 10000, retry: 3, debug: false, name: "Standard-App" }

console.log(updateConfig({ timeout: null, name: "" }));
// { timeout: 5000, retry: 3, debug: false, name: "Standard-App" }

19.4 Zahlen-Trennzeichen `1_000_000`

🔗 Was sind Zahlen-Trennzeichen?

In ES2021 (ES12) können Zahlen mit Unterstrichen (_) lesbarer gemacht werden.

javascript

// Syntax
const zahl = 1_000_000;

🎯 Einfaches Beispiel

javascript

// ❌ Alte Methode (ES5/ES6) - Schwer zu lesen
const million1 = 1000000;
const bytes1 = 1073741824;

// ✅ Neue Methode (ES2021) - Mit Trennzeichen
const million2 = 1_000_000;
const bytes2 = 1_073_741_824;

console.log(million1 === million2); // true ✅
console.log(bytes1 === bytes2);     // true ✅

// Auch bei Fließkommazahlen
const pi = 3.14159_26535;
console.log(pi); // 3.1415926535

🎯 Bei verschiedenen Zahlensystemen

javascript

// Binär
const bin = 0b1010_1100;
console.log(bin); // 172

// Hexadezimal
const hex = 0xFF_FF_FF;
console.log(hex); // 16777215

// Oktal
const oct = 0o77_77;
console.log(oct); // 4095

📋 Praxisbeispiel: Finanzdaten formatieren

javascript

// ✅ Lesbare Finanzdaten
const jahresumsatz = 1_250_000_000;
const wachstumsrate = 0.157; // 15.7%

console.log(`Jahresumsatz: ${jahresumsatz} €`);
// "Jahresumsatz: 1250000000 €"

// Als Währung formatieren
console.log(`Jahresumsatz: ${jahresumsatz.toLocaleString("de-DE")} €`);
// "Jahresumsatz: 1.250.000.000 €"

19.5 Weitere ES6+ Features (Kurzübersicht)

📋 `Array.prototype.flat()` / `flatMap()` (ES2019)

javascript

// flat() - Array verebnen
const arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat());   // [1, 2, 3, 4, [5, 6]] (nur 1 Ebene)
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6] (2 Ebenen)

// flatMap() - map() + flat(1)
const sentences = ["Hallo Welt", "Wie geht es dir?"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["Hallo", "Welt", "Wie", "geht", "es", "dir?"]

📋 `Object.fromEntries()` (ES2019)

javascript

// Map → Object
const map = new Map();
map.set("name", "Max");
map.set("alter", 25);

const obj = Object.fromEntries(map);
console.log(obj); // { name: "Max", alter: 25 }

// Array von Paaren → Object
const entries = [["a", 1], ["b", 2]];
const obj2 = Object.fromEntries(entries);
console.log(obj2); // { a: 1, b: 2 }

📋 `String.prototype.replaceAll()` (ES2021)

javascript

const str = "appel-appel-appel";

// ❌ Alte Methode (ES5/ES6) - Mit RegExp
console.log(str.replace(/appel/g, "birne")); 
// "birne-birne-birne"

// ✅ Neue Methode (ES2021) - Mit replaceAll()
console.log(str.replaceAll("appel", "birne")); 
// "birne-birne-birne" ✅

📋 Private Klassen-Felder (ES2022)

javascript

class Person {
  #name;    // Privates Feld (nur in der Klasse zugreifbar)
  #alter;   // Privates Feld
  
  constructor(name, alter) {
    this.#name = name;
    this.#alter = alter;
  }
  
  greet() {
    return `Hallo, ich bin ${this.#name}`;
  }
  
  #privateMethod() {  // Private Methode
    return this.#alter;
  }
}

const p = new Person("Max", 25);
console.log(p.greet()); // "Hallo, ich bin Max"
// console.log(p.#name);     // ❌ SyntaxError (privat!)
// console.log(p.#privateMethod()); // ❌ SyntaxError (privat!)

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Optional Chaining ?. (sicherer Zugriff auf tiefer verschachtelte Eigenschaften)
✅ Nullish Coalescing ?? (Standardwerte nur bei null/undefined)
✅ Logische Zuweisungsoperatoren (||=, &&=, ??=)
✅ Zahlen-Trennzeichen (1_000_000)
✅ Weitere ES6+ Features (flat(), flatMap(), Object.fromEntries(), replaceAll(), private Klassen-Felder)

📝 Übung

Optional Chaining:

javascript

const user = { name: "Max", adresse: { stadt: "Berlin" } };
// Greife sicher auf `land` zu (nicht vorhanden)

Nullish Coalescing:

javascript

const config = { timeout: 0 };
// Setze Standardwert 5000, wenn `timeout` null/undefined ist

Logische Zuweisungsoperatoren:

javascript

let name = "";
// Weise "Gast" zu, wenn `name` leer ist

Zahlen-Trennzeichen:

javascript

// Schreibe eine Million mit Trennzeichen

🏁 Kurs-Zusammenfassung

Herzlichen Glückwunsch! 🎉 Du hast den kompletten ES6+ Kurs durchgearbeitet!

Was du gelernt hast:

✅ ES6 Grundlagen (Kapitel 1-2)
✅ Destructuring, Spread/Rest (Kapitel 3-4)
✅ Arrow Functions, Template Strings (Kapitel 5-6)
✅ Funktionserweiterungen, Array-Methoden (Kapitel 7-8)
✅ Objekt-Erweiterungen, Set/Map (Kapitel 9-10)
✅ Promise, async/await (Kapitel 11-12)
✅ Klassen, Modularisierung (Kapitel 13-14)
✅ Neue String/Number/Object-Methoden (Kapitel 15-16)
✅ Praxis-Projekte (Kapitel 17)
✅ Interviewfragen (Kapitel 18)
✅ ES6+ neuere Versionen (Kapitel 19)

Nächste Schritte:

Üben! Wende das Gelernte in eigenen Projekten an.
Tiefer einsteigen: Lies die offizielle MDN JavaScript-Dokumentation.
Frameworks lernen: React, Vue oder Angular (alle verwenden intensiv ES6+).
Node.js lernen: Serverseitige Entwicklung mit ES6+.

Viel Erfolg bei deiner weiteren JavaScript-Reise! 🚀

Kapitel 19: ES6+ neuere Versionen (ES7~ES13) ​

19.1 Optional Chaining Operator ?. ​

🔗 Was ist Optional Chaining? ​

🎯 Einfaches Beispiel ​

🎯 Mit Arrays und Funktionen ​

📋 Praxisbeispiel: API-Antwort verarbeiten ​

19.2 Nullish Coalescing Operator ?? ​

🔗 Was ist Nullish Coalescing? ​

🔍 Vergleich: ?? vs || ​

🎯 Einfaches Beispiel ​

📋 Praxisbeispiel: Standardwerte setzen ​

19.3 Logische Zuweisungsoperatoren ||= &&= ​

🔗 Was sind logische Zuweisungsoperatoren? ​

🎯 ||= (OR-Zuweisung) ​

🎯 &&= (AND-Zuweisung) ​

🎯 ??= (Nullish Coalescing Zuweisung) ​

📋 Praxisbeispiel: Konfiguration aktualisieren ​

19.4 Zahlen-Trennzeichen 1_000_000 ​

🔗 Was sind Zahlen-Trennzeichen? ​

🎯 Einfaches Beispiel ​

🎯 Bei verschiedenen Zahlensystemen ​

📋 Praxisbeispiel: Finanzdaten formatieren ​

19.5 Weitere ES6+ Features (Kurzübersicht) ​

📋 Array.prototype.flat() / flatMap() (ES2019) ​

📋 Object.fromEntries() (ES2019) ​

📋 String.prototype.replaceAll() (ES2021) ​

📋 Private Klassen-Felder (ES2022) ​

🎉 Zusammenfassung ​

📝 Übung ​

🏁 Kurs-Zusammenfassung ​

Kapitel 19: ES6+ neuere Versionen (ES7~ES13)

19.1 Optional Chaining Operator `?.`

🔗 Was ist Optional Chaining?

🎯 Einfaches Beispiel

🎯 Mit Arrays und Funktionen

📋 Praxisbeispiel: API-Antwort verarbeiten

19.2 Nullish Coalescing Operator `??`

🔗 Was ist Nullish Coalescing?

🔍 Vergleich: `??` vs `||`

🎯 Einfaches Beispiel

📋 Praxisbeispiel: Standardwerte setzen

19.3 Logische Zuweisungsoperatoren `||=` `&&=`

🔗 Was sind logische Zuweisungsoperatoren?

🎯 `||=` (OR-Zuweisung)

🎯 `&&=` (AND-Zuweisung)

🎯 `??=` (Nullish Coalescing Zuweisung)

📋 Praxisbeispiel: Konfiguration aktualisieren

19.4 Zahlen-Trennzeichen `1_000_000`

🔗 Was sind Zahlen-Trennzeichen?

🎯 Einfaches Beispiel

🎯 Bei verschiedenen Zahlensystemen

📋 Praxisbeispiel: Finanzdaten formatieren

19.5 Weitere ES6+ Features (Kurzübersicht)

📋 `Array.prototype.flat()` / `flatMap()` (ES2019)

📋 `Object.fromEntries()` (ES2019)

📋 `String.prototype.replaceAll()` (ES2021)

📋 Private Klassen-Felder (ES2022)

🎉 Zusammenfassung

📝 Übung

🏁 Kurs-Zusammenfassung