02_advanced/linksammlung.md

@@ -65,4 +65,6 @@
 - [Dev.to](https://dev.to/)
 - [SmashingMagazine](https://www.smashingmagazine.com/)
 - [Awwwards](https://www.awwwards.com/)
-- [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
+- [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
+
+- Tipp10

02_advanced/unterricht/tag12/03_destructruing-with-object.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring mit Objekten</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS - Destructuring mit Objekten</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const product = {
+        name: 'Klingon Letter Opener',
+        category: 'Office Warfare',
+        price: 19.99,
+      };
+
+      // Funktionen
+      // const formatProduct = (product) => {
+      //   return `- ${product.name} - buy now for only $${product.price.toFixed(2)}.`;
+      // };
+
+      // Desctructuring eines Objektes
+      const formatProduct = (product) => {
+        const { name, price } = product;
+
+        return `- ${name} - buy now for only $${price.toFixed(2)}.`;
+      };
+
+      // Desctructuring eines Objektes in der Parameterliste
+      const formatProduct2 = ({ name, price }) => {
+        return `- ${name} - buy now for only $${price.toFixed(2)}.`;
+      };
+
+      // Desctructuring eines Objektes mit Umbennung
+      const formatProduct3 = (product) => {
+        const { name: productName, price: productPrice } = product; // Zeigt die Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
+
+        return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
+      };
+
+      // Desctructuring eines Objektes mit Umbennung und Defaultparameter
+      const formatProduct4 = (product = {}) => {
+        const { name: productName = 'no name', price: productPrice = 0 } = product; // Zeigt die Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
+
+        return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
+      };
+
+      console.log(formatProduct(product)); // => - Klingon Letter Opener - buy now for only $19.99.
+      outputEl.textContent = formatProduct4();
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring mit Rest-Parameter (...)</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS - Destructuring mit Rest-Parameter (...)</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productAr = ['Klingon Letter Opener', 'Office Warfare', '19.99'];
+      const product = {
+        name: 'Klingon Letter Opener',
+        category: 'Office Warfare',
+        price: '19.99',
+      };
+
+      // Destructuring eines Arrays mit rest-operator
+
+      const [name, ...everythingElse] = productAr;
+
+      console.log('name: ', name); // => Klingon Letter Opener
+      console.log('everythingElse: ', everythingElse); // => ['Office Warfare', '19.99']
+
+      // Destructuring eines Objektes mit rest-operator
+      const { name: productName, ...restObj } = product;
+
+      console.log('productName: ', productName); // => Klingon Letter Opener
+      console.log('restObj: ', restObj); // => {category: 'Office Warfare', price: '19.99'}
+
+      // Destructuring eine Objektes mit rest-operator (ausschließen von sensiblen Daten)
+
+      const user = {
+        _id: 123,
+        firstName: 'Florian',
+        lastName: 'Hölzel',
+        username: 'Megaman',
+        password: 'topsecret',
+        data: [{ avatar: '', profilePic: '' }],
+      };
+
+      console.log(user);
+
+      const { password: __pwd, ...newUser } = user;
+
+      console.log(newUser); // User Objekt ohne sensible Daten (password) für HTTP-Response
+
+      for (const prop in newUser) {
+        outputEl.textContent += `- ${prop} : ${newUser[prop]} `;
+      }
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag12/05_destructuring-in-parameterliste.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring in der Parameterliste mit Defaultwerten</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS - Destructuring in der Parameterliste mit Defaultwerten</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Destructuring in der Parameterliste mit Defaultwert (Object)
+      // { DESTRUCTURING IN PARAMETERLISTE } = { NEUES DEFAULT OBJEKT}
+      const foo = ({ a = 1, b = 2 } = { a: 3, b: 4 }) => `a: ${a}, b: ${b}`;
+
+      const foo2 = (obj = {}) => {
+        const { prop1 = 'wert', prop2 = 'wert2' } = obj;
+      };
+
+      console.log(foo({ a: 7 })); //=> 'a: 7, b: 2'
+      console.log(foo({ b: 7 })); // => 'a: 1, b:7'
+      console.log(foo({ a: 7, b: 8 })); // => 'a: 7, b:8'
+
+      console.log(foo({})); // => 'a: 1, b:2'
+      console.log(foo()); // => 'a: 3, b:4'
+    </script>
+  </body>
+</html>