JavaScript ES6+ Funktionen: Moderne JS-Features, die jeder Entwickler kennen muss

// const für Werte, die sich nicht ändern (die meisten Variablen)
const API_URL = "https://api.example.com";
const users = []; // Das Array ist konstant, aber sein Inhalt kann sich ändern
users.push("Alice"); // ✅ In Ordnung

// let für Werte, die sich ändern
let count = 0;
count++;

// ❌ Vermeiden Sie var – es hat Funktions-Skoping, kein Block-Skoping

// Traditionelle Funktion
function add(a, b) { return a + b; }

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

// Einzelner Parameter – Klammern optional
const double = n => n * 2;

// Mehrzeilig – benötigt geschweifte Klammern und explizites return
const processUser = (user) => {
  const name = user.name.trim();
  return { ...user, name };
};

// Ideal für Callbacks
const evens = numbers.filter(n => n % 2 === 0);
const names = users.map(u => u.name);

// Objekt-Destrukturierung
const { name, email, role = "viewer" } = user;

// Variablen umbenennen
const { name: userName, email: userEmail } = user;

// Verschachtelte Destrukturierung
const { address: { city, country } } = user;

// Array-Destrukturierung
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// Variablen tauschen
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// Funktionsparameter
function greet({ name, age }) {
  return `Hi ${name}, you're ${age}`;
}

// Spread – Arrays/Objekte erweitern
const merged = [...arr1, ...arr2];
const copy = { ...originalObj, name: "New Name" };

// Rest – verbleibende Argumente sammeln
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10

const name = "Alice";
const greeting = `Hello, ${name}!`;

// Mehrzeilige Strings
const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

// Tagged Templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}<mark>${values[i] || ''}</mark>`, '');
}

// Optional Chaining – sicherer Zugriff auf verschachtelte Eigenschaften
const city = user?.address?.city;          // undefined, wenn eine null/undefined ist
const first = users?.[0]?.name;            // Array-Zugriff
const result = user?.getProfile?.();       // Methodenaufruf

// Nullish Coalescing – Standardwert NUR für null/undefined
const port = config.port ?? 3000;          // Verwendet 3000 nur, wenn port null/undefined ist
const name = user.name ?? "Anonymous";

// Vergleich mit || (fängt auch 0, "", false ab)
const count = data.count || 10;   // ⚠️ Wenn count 0 ist, gibt dies 10 zurück!
const count = data.count ?? 10;   // ✅ Gibt 10 nur zurück, wenn count null/undefined ist

const name = "Alice";
const age = 30;

// Eigenschafts-Shorthand
const user = { name, age }; // dasselbe wie { name: name, age: age }

// Methoden-Shorthand
const api = {
  async getUser(id) { /* ... */ },
  async createUser(data) { /* ... */ },
};

// Berechnete Eigenschaftsnamen
const field = "email";
const obj = { [field]: "[email protected]" };
// { email: "[email protected]" }

// Benannte Exports
export const API_URL = "https://api.example.com";
export function fetchUser(id) { /* ... */ }

// Standard-Export
export default class UserService { /* ... */ }

// Benannte Imports
import { API_URL, fetchUser } from './api.js';

// Standard-Import
import UserService from './UserService.js';

// Umbenennen beim Import
import { fetchUser as getUser } from './api.js';

// Dynamischer Import (Lazy Loading)
const { Chart } = await import('./chart.js');