JavaScript Mittelstufe Tag 5: ES6+ Features

Ziel dieses Tages

Heute lernst du:

• Wie du modernes JavaScript mit ES6+ Features schreibst
• Arrow Functions
• Template Literals
• Spread-Operator (...)

Am Ende wirst du saubereren und effizienteren Code schreiben können.

Schritt 1: Arrow Functions

Arrow Functions sind eine kürzere Schreibweise für Funktionen:

const greet = (name) => `Hallo ${name}`;

console.log(greet("John")); // Hallo John

Schritt 2: Template Literals

Template Literals ermöglichen das Einfügen von Variablen in Strings:

const name = "Alice";
console.log(`Hi, mein Name ist ${name}`);

Schritt 3: Spread-Operator

Der Spread-Operator kann Arrays oder Objekte erweitern:

const arr1 = [1, 2];
const arr2 = [3, 4];

const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

Übung

const greet = (name) => `Hallo ${name}`;
console.log(greet("John"));

Aufgabe

Erledige die folgenden Aufgaben:

• Füge zwei Arrays mit dem Spread-Operator zusammen
• Schreibe eine Funktion, die Template Literals für eine Begrüßung verwendet

Beispiel:

// Arrays zusammenführen
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combined = [...arr1, ...arr2];
console.log(combined); // [1,2,3,4,5]

// Funktion mit Template Literals
const welcome = (name, age) => `Hallo ${name}, du bist ${age} Jahre alt`;
console.log(welcome("Alex", 18));