it-praxisportal/courses/javascript/05_objekte_und_destructuring/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 03: Objekte, Destructuring &amp; Rest/Spread</title>
  <link rel="stylesheet" href="../../../assets/style.css">
</head>
<body>
  <div class="app-layout">
    <div class="app-main">
      <header>
        <div class="header-container">
          <div class="header-badge">🌐 JavaScript Grundlagen</div>
          <h1>JS 03: Objekte, Destructuring &amp; Rest/Spread</h1>
          <p>Lerne strukturierte Datenmodellierung mit Object Literals, ES6-Destructuring und dem Rest/Spread-Operator.</p>
        </div>
      </header>

      <main class="container">
        <!-- 1. THEORIE: OBJEKTE & SHORTHAND -->
        <section class="card">
          <h2>💡 1. Object Literals &amp; Property Shorthand</h2>
          <p>Objekte speichern zusammengehörige Informationen als Schlüssel-Wert-Paare. Modernes JavaScript (ES6) bietet mit dem <strong>Property Shorthand</strong> eine extrem prägnante Syntax, wenn Variablen- und Eigenschaftsname übereinstimmen:</p>
          
          <pre><code>const name = "Max Mustermann";
const email = "max@beispiel.de";

// Vor ES6 (umständlich):
const alterUser = { name: name, email: email };

// Mit modernem ES6 Property Shorthand (sauber & prägnant):
const benutzer = { name, email, rolle: "user" };
console.log(benutzer); // { name: "Max Mustermann", email: "max@beispiel.de", rolle: "user" }</code></pre>
        </section>

        <!-- 2. THEORIE: DESTRUCTURING -->
        <section class="card">
          <h2>📦 2. Destructuring Assignment (Auspacken von Daten)</h2>
          <p>Mit <strong>Destructuring</strong> entpackst du Werte direkt in separate Variablen. Das spart Code und erhöht die Lesbarkeit spürbar:</p>

          <pre><code>const person = { vorname: "Anna", stadt: "Berlin", punkte: 95 };

// 🎯 Object Destructuring:
const { vorname, stadt } = person;
console.log(vorname); // "Anna"

// 🎯 Destructuring mit Standardwerten und Aliases (Umbenennung):
const { land = "Deutschland", punkte: score } = person;
console.log(land);  // "Deutschland" (Default, da 'land' in person nicht existiert)
console.log(score); // 95 (Alias für person.punkte)

// 🎯 Array Destructuring:
const koordinaten = [52.52, 13.405];
const [breite, laenge] = koordinaten;
console.log(breite, laenge); // 52.52, 13.405</code></pre>
        </section>

        <!-- 3. THEORIE: SPREAD & REST -->
        <section class="card">
          <h2>✨ 3. Spread- &amp; Rest-Operator (<code>...</code>)</h2>
          <p>Die drei Punkte (<code>...</code>) ermöglichen das Ausbreiten (Spread) und Einsammeln (Rest) von Datenstrukturen:</p>

          <pre><code>const basisProfil = { name: "Lisa", alter: 28 };
const kontaktInfo = { email: "lisa@dev.io", stadt: "Hamburg" };

// 🌟 Spread: Objekte verschmelzen ohne Mutation (Immutability):
const vollstaendigesProfil = { ...basisProfil, ...kontaktInfo, status: "aktiv" };
console.log(vollstaendigesProfil);
// { name: "Lisa", alter: 28, email: "lisa@dev.io", stadt: "Hamburg", status: "aktiv" }

// 🌟 Rest: Eigenschaften separieren:
const { email, ...restlicheDaten } = vollstaendigesProfil;
console.log(email);          // "lisa@dev.io"
console.log(restlicheDaten); // { name: "Lisa", alter: 28, stadt: "Hamburg", status: "aktiv" }</code></pre>

          <div class="box box-analogie">
            <div class="box-title">🧰 Didaktische Analogie: Die Werkzeugkiste &amp; Auspack-Station</div>
            <p>Ein Objekt ist wie eine beschriftete <strong>Werkzeugkiste</strong>. Destructuring ist das gezielte Herausgreifen von genau dem Werkzeug (z.&nbsp;B. Hammer und Zange), das du jetzt benötigst, ohne die ganze Kiste herumtragen zu müssen. Der Spread-Operator (<code>...</code>) ist wie das Umschütten zweier Kisten in einen neuen Koffer, ohne den Originalinhalt zu beschädigen.</p>
          </div>
        </section>

        <!-- 4. CHEAT-SHEET -->
        <section class="card">
          <h2>📑 4. Cheat-Sheet: Object &amp; Destructuring Methoden</h2>
          <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left;">
              <thead>
                <tr style="border-bottom: 2px solid var(--border-color); background: var(--bg-subtle);">
                  <th style="padding: 10px;">Syntax / Methode</th>
                  <th style="padding: 10px;">Beispiel</th>
                  <th style="padding: 10px;">Beschreibung</th>
                </tr>
              </thead>
              <tbody>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>{ a, b }</code></td>
                  <td style="padding: 10px;"><code>const obj = { name, email };</code></td>
                  <td style="padding: 10px;">Property Shorthand</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>const { k } = obj</code></td>
                  <td style="padding: 10px;"><code>const { name, rolle = "user" } = u;</code></td>
                  <td style="padding: 10px;">Object Destructuring mit Default-Wert</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>{ ...obj, neu }</code></td>
                  <td style="padding: 10px;"><code>const klon = { ...original, id: 42 };</code></td>
                  <td style="padding: 10px;">Spread-Operator zum Klonen &amp; Erweitern</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>Object.keys(obj)</code></td>
                  <td style="padding: 10px;"><code>Object.keys({ a: 1, b: 2 }) // ["a", "b"]</code></td>
                  <td style="padding: 10px;">Array aller Eigenschaftsnamen (Keys)</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>Object.values(obj)</code></td>
                  <td style="padding: 10px;"><code>Object.values({ a: 1, b: 2 }) // [1, 2]</code></td>
                  <td style="padding: 10px;">Array aller Werte (Values)</td>
                </tr>
                <tr>
                  <td style="padding: 10px;"><code>Object.entries(obj)</code></td>
                  <td style="padding: 10px;"><code>Object.entries({ a: 1 }) // [["a", 1]]</code></td>
                  <td style="padding: 10px;">Array aus <code>[key, value]</code>-Paaren</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <!-- 5. AUFGABEN CHECKLISTE -->
        <section class="card">
          <h2>🎯 Aufgaben &amp; Checkliste in <code>aufgabe.js</code></h2>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t1">
            <label class="task-label" for="t1"><strong>TODO 1:</strong> <code>erstelleBenutzer(name, email, rolle = "user")</code> mit Property Shorthand implementieren.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t2">
            <label class="task-label" for="t2"><strong>TODO 2:</strong> <code>extrahiereDetails(benutzerObjekt)</code> mit Object Destructuring formatieren (<code>"${name} (${email})"</code>).</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t3">
            <label class="task-label" for="t3"><strong>TODO 3:</strong> <code>fuegeAdresseHinzu(benutzerObjekt, adresseObjekt)</code> mit Spread-Operator (<code>{ ...benutzer, ...adresse }</code>) ohne Mutation bauen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t4">
            <label class="task-label" for="t4"><strong>TODO 4:</strong> <code>zaehleEigenschaften(objekt)</code> mit <code>Object.keys().length</code> schreiben.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t5">
            <label class="task-label" for="t5"><strong>TODO 5:</strong> <code>berechneWarenkorbGesamtwert(warenkorbItems)</code> mit Destructuring im Loop / reduce umsetzen.</label>
          </div>

          <div class="box box-tipp" style="margin-top: 20px;">
            <div class="box-title">💡 Tipp für Teilziel 5</div>
            <p>Du kannst Destructuring direkt in der Funktionssignatur von <code>reduce</code> oder im Schleifenkopf nutzen:  
            <code>items.reduce((sum, { preis = 0, anzahl = 1 }) =&gt; sum + (preis * anzahl), 0)</code></p>
          </div>

          <div style="margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap;">
            <a href="../../../workspace.html?course=javascript&track=track_1_grundlagen&chapter=05_objekte_und_destructuring" class="btn" style="background: #eab308; color: #000; font-weight: 700;">💻 In Web-IDE öffnen &rarr;</a>
            <a href="../04_arrays_sets_und_maps/index.html" class="btn btn-secondary">&larr; Zurück zu JS 04</a>
            <a href="../09_dom_und_events/index.html" class="btn btn-secondary">Weiter zu JS 06 &rarr;</a>
          </div>
        </section>
      </main>
    </div>
  </div>
  <script src="../../../assets/courses_manifest.js"></script>
  <script src="../../../assets/course_sidebar.js"></script>
</body>
</html>