Kapitel 1: ES6 Grundlagen

1.1 Was ist ES6? JavaScript-Versionsgeschichte

📜 Die Geschichte von JavaScript

JavaScript wurde 1995 von Brendan Eich in nur 10 Tagen entwickelt. Seitdem hat es sich enorm weiterentwickelt:

Jahr	Version	Name	Beschreibung
1995	-	Mocha	Ursprünglicher Name
1995	-	LiveScript	Zwischenname
1995	1.0	JavaScript	Finaler Name
1997	ES1	ECMAScript 1	Erster Standard
1998	ES2	ECMAScript 2	Kleine Änderungen
1999	ES3	ECMAScript 3	Weit verbreitet
2009	ES5	ECMAScript 5	strict mode, JSON.parse()
2015	ES6	ECMAScript 2015	Große Aktualisierung!
2016	ES7	ECMAScript 2016	Array.includes(), Exponentieller Operator
2017	ES8	ECMAScript 2017	async/await, Object.values()
2018	ES9	ECMAScript 2018	Rest/Spread für Objekte
2019	ES10	ECMAScript 2019	flat(), flatMap()
2020	ES11	ECMAScript 2020	Optional Chaining ?.
2021	ES12	ECMAScript 2021	String.replaceAll()
2022	ES13	ECMAScript 2022	Klassenfelder, Top-Level await

🎯 Was ist ES6?

ES6 (auch bekannt als ECMAScript 2015) ist eine Major-Version von JavaScript, die im Jahr 2015 veröffentlicht wurde.

ES6 = ECMAScript 2015

// Vor ES6 (ES5)
var name = "Max";
var add = function(a, b) {
  return a + b;
};

// Mit ES6
let name = "Max";
const add = (a, b) => a + b;

🔄 Warum heißt es "ES6"?

• ES = EcmaScript (der offizielle Name von JavaScript)
• 6 = Die 6. Version (obwohl es eigentlich die 6. große Version ist)

---

1.2 Warum ES6 lernen? (Code vereinfachen, Effizienz steigern)

🚀 Vorteile von ES6

1. Weniger Code schreiben

// ES5
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(n) {
  return n * 2;
});

// ES6
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

2. Bessere Lesbarkeit

// ES5
function greet(name) {
  return "Hallo " + name + "!";
}

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

3. Weniger Fehler

// ES5 - var hat keine Block-Scope
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // Immer 5!
  }, 100);
}

// ES6 - let hat Block-Scope
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2, 3, 4
  }, 100);
}

4. Moderne Entwicklung

• React, Vue, Angular verwenden alle ES6+
• Node.js verwendet ES6+
• Moderne Browser unterstützen ES6+

5. Asynchrone Programmierung vereinfachen

// ES5 - Callback Hell
getData(function(result1) {
  getMoreData(result1, function(result2) {
    getEvenMoreData(result2, function(result3) {
      console.log(result3);
    });
  });
});

// ES6 - Promise
getData()
  .then(result1 => getMoreData(result1))
  .then(result2 => getEvenMoreData(result2))
  .then(result3 => console.log(result3))
  .catch(error => console.error(error));

// ES7 - async/await
async function getData() {
  try {
    const result1 = await getData();
    const result2 = await getMoreData(result1);
    const result3 = await getEvenMoreData(result2);
    console.log(result3);
  } catch (error) {
    console.error(error);
  }
}

---

1.3 ES6 Kompatibilität und Umgebungskonfiguration (Babel einfach verstehen)

🌐 Browser-Kompatibilität

Moderne Browser unterstützen ES6 bereits gut:

Browser	ES6 Unterstützung
Chrome 58+	✅ Vollständig
Firefox 54+	✅ Vollständig
Safari 10+	✅ Vollständig
Edge 16+	✅ Vollständig
IE 11	❌ Nicht unterstützt

🔧 Was ist Babel?

Babel ist ein JavaScript-Compiler, der ES6+ Code in ES5 Code umwandelt, damit auch ältere Browser den Code ausführen können.

// ES6 Code (mit Arrow Function)
const add = (a, b) => a + b;

// Nach Babel (ES5 Code)
var add = function(a, b) {
  return a + b;
};

⚙️ Babel einfach konfigurieren

Schritt 1: Babel installieren

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Schritt 2: .babelrc Konfigurationsdatei erstellen

{
  "presets": ["@babel/preset-env"]
}

Schritt 3: Code umwandeln

npx babel src --out-dir dist

📦 Babel in Build-Tools

In der Praxis verwendest du Babel meist zusammen mit Build-Tools:

• Vite: Automatisch integriert
• Webpack: Mit babel-loader
• Parcel: Automatisch integriert
• Create React App: Bereits konfiguriert

// vite.config.js - Vite unterstützt ES6+ standardmäßig
import { defineConfig } from 'vite';

export default defineConfig({
  // Vite kompiliert automatisch für ältere Browser
});

---

1.4 Voraussetzungen für ES6 (JS-Grundlagen)

📋 Was du bereits wissen solltest

Bevor du ES6 lernst, solltest du folgende Grundlagen beherrschen:

1. Variablen und Datentypen

// Du solltest wissen:
var name = "Max";          // String
var alter = 25;            // Number
var istStudent = true;      // Boolean
var hobbies = ["Sport", "Lesen"];  // Array
var person = {             // Object
  name: "Max",
  alter: 25
};

2. Funktionen

// Du solltest wissen:
function add(a, b) {
  return a + b;
}

var multiply = function(a, b) {
  return a * b;
};

3. Schleifen

// Du solltest wissen:
for (var i = 0; i < 5; i++) {
  console.log(i);
}

var array = [1, 2, 3];
for (var j = 0; j < array.length; j++) {
  console.log(array[j]);
}

4. Bedingungen

// Du solltest wissen:
if (alter >= 18) {
  console.log("Volljährig");
} else {
  console.log("Minderjährig");
}

5. Array-Methoden (Grundlagen)

// Du solltest wissen:
var numbers = [1, 2, 3, 4, 5];
numbers.push(6);           // Element hinzufügen
numbers.pop();             // Element entfernen
numbers.indexOf(3);        // Index finden

🎓 Empfehlung

Wenn du diese Konzepte noch nicht beherrschst, empfehle ich dir:

1. Zuerst einen JavaScript Grundkurs zu absolvieren
2. Oder die MDN JavaScript-Dokumentation zu lesen: https://developer.mozilla.org/de/docs/Web/JavaScript

---

1.5 Erste ES6 Code-Erfahrung (Browser-Konsole / VS Code)

🌐 Methode 1: Browser-Konsole

Schritt 1: Browser öffnen

• Chrome: Strg + Shift + J (Windows) oder Cmd + Option + J (Mac)
• Firefox: Strg + Shift + K (Windows) oder Cmd + Option + K (Mac)

Schritt 2: ES6 Code ausführen

// 1. let und const
let name = "ES6";
const version = 6;
console.log(name, version);

// 2. Arrow Function
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

// 3. Template String
const greeting = `Hallo ${name}, Version ${version}`;
console.log(greeting);

// 4. Destrukturierung
const person = { name: "Max", alter: 25 };
const { name, alter } = person;
console.log(name, alter);

// 5. Spread Operator
const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
console.log(array2); // [1, 2, 3, 4, 5]

💻 Methode 2: VS Code + Node.js

Schritt 1: Node.js installieren

• Besuche: https://nodejs.org/
• Lade die LTS-Version herunter und installiere sie

Schritt 2: VS Code öffnen

• Erstelle eine Datei: es6-demo.js

Schritt 3: ES6 Code schreiben

// es6-demo.js
let name = "ES6";
const version = 6;

const add = (a, b) => a + b;

const greeting = `Hallo ${name}, Version ${version}`;

console.log(greeting);
console.log("2 + 3 =", add(2, 3));

Schritt 4: Code ausführen

node es6-demo.js

🎯 Methode 3: Online-Editor (empfohlen für Anfänger)

CodePen

1. Besuche: https://codepen.io/
2. Klicke auf "Create" → "Pen"
3. Schreibe im JavaScript-Bereich:

let name = "ES6";
console.log(`Hallo ${name}!`);

4. Klicke auf "Console" um das Ergebnis zu sehen

JS Bin

1. Besuche: https://jsbin.com/
2. Schreibe JavaScript-Code im rechten Bereich
3. Das Ergebnis wird automatisch angezeigt

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was ES6 ist und seine Geschichte
• ✅ Warum ES6 wichtig ist (weniger Code, bessere Lesbarkeit)
• ✅ Browser-Kompatibilität und Babel
• ✅ Voraussetzungen für ES6
• ✅ Wie man ES6 Code ausführt (Browser, VS Code, Online)

📝 Übung

1. Öffne die Browser-Konsole und führe die Beispiele aus
2. Erstelle eine .js Datei in VS Code und führe sie mit Node.js aus
3. Experimentiere mit let, const, Arrow Functions und Template Strings

➡️ Nächstes Kapitel

In Kapitel 2 lernen wir Variablen-Deklaration: let und const - eine der wichtigsten Neuerungen in ES6!