JavaScript

ES6+ Features, die jeder Entwickler kennen sollte

Seit ES6 ist JavaScript deutlich angenehmer geworden. Lerne Destructuring, Spread, Template Literals und weitere Features, die du täglich brauchst.

Anton

— 2 Min. Lesezeit
Teilen
ES6+ Features, die jeder Entwickler kennen sollte

Mit ES6 (auch ECMAScript 2015 genannt) und den folgenden Versionen hat JavaScript einen riesigen Sprung gemacht. Viele Features machen deinen Code kürzer, lesbarer und sicherer. In diesem Beitrag stelle ich dir die wichtigsten modernen Features vor, die du im Alltag immer wieder brauchst.

Template Literals

Schluss mit umständlichem Zusammenkleben von Strings mit dem Plus-Zeichen. Mit Template Literals nutzt du Backticks und setzt Variablen direkt mit ${...} in den Text ein. Auch Zeilenumbrüche funktionieren ohne Tricks.

const name = "Max";
const alter = 30;

const text = `${name} ist ${alter} Jahre alt.`;
console.log(text); // Max ist 30 Jahre alt.

Destructuring

Mit Destructuring entpackst du Werte aus Arrays oder Objekten in einzelne Variablen. Das spart viele Zeilen und macht den Code deutlich klarer.

// Aus einem Objekt
const person = { vorname: "Eva", stadt: "Köln" };
const { vorname, stadt } = person;
console.log(vorname); // Eva

// Aus einem Array
const farben = ["rot", "grün", "blau"];
const [erste, zweite] = farben;
console.log(zweite); // grün

Spread und Rest

Die drei Punkte ... sind extrem vielseitig. Als Spread entpacken sie ein Array oder Objekt, etwa um Kopien zu erstellen oder Werte zusammenzuführen. Als Rest sammeln sie mehrere Werte in einem Array.

// Spread: Arrays zusammenführen
const a = [1, 2];
const b = [3, 4];
const zusammen = [...a, ...b]; // [1, 2, 3, 4]

// Spread: Objekt kopieren und erweitern
const basis = { x: 1 };
const erweitert = { ...basis, y: 2 }; // { x: 1, y: 2 }

// Rest: Argumente sammeln
function summe(...zahlen) {
  return zahlen.reduce((s, n) => s + n, 0);
}
console.log(summe(1, 2, 3)); // 6

Standardparameter

Funktionen können seit ES6 Standardwerte für Parameter haben. Wird kein Argument übergeben, greift der Standardwert. Das macht deinen Code robuster gegen fehlende Eingaben.

function gruss(name = "Gast") {
  return `Hallo, ${name}!`;
}

console.log(gruss());        // Hallo, Gast!
console.log(gruss("Sophie")); // Hallo, Sophie!

Optional Chaining und Nullish Coalescing

Diese beiden neueren Features ersparen dir viele Abfragen. Mit ?. greifst du sicher auf verschachtelte Eigenschaften zu, ohne einen Fehler zu riskieren, falls etwas fehlt. Mit ?? setzt du einen Standardwert, aber nur wenn der Wert null oder undefined ist.

const nutzer = { profil: { name: "Tim" } };

// Sicherer Zugriff
console.log(nutzer.profil?.name);   // Tim
console.log(nutzer.adresse?.stadt); // undefined (kein Fehler)

// Standardwert nur bei null/undefined
const eingabe = 0;
const wert = eingabe ?? 10;
console.log(wert); // 0 (weil 0 gültig ist)

Der Unterschied zu || ist wichtig: ?? behandelt 0 und einen leeren String als gültige Werte, während || diese als unwahr ansehen würde.

Fazit

Die modernen ES6+ Features sind heute aus keinem JavaScript-Projekt mehr wegzudenken. Template Literals, Destructuring, der Spread-Operator, Standardparameter sowie Optional Chaining und Nullish Coalescing machen deinen Code kürzer und sicherer. Du musst nicht alles auf einmal lernen, aber je öfter du sie nutzt, desto natürlicher werden sie. Schau dir bei fremdem Code bewusst an, welche dieser Features verwendet werden, das festigt dein Verständnis.

Weiterlesen