feat(slides): slides for advanced method syntaxes

src/components/slides/javascript/04-advanced-objects/destructure.astro

@@ -0,0 +1,56 @@
+<section>
+  <section>
+    <p>Soweit haben wir Objekte und deren Möglichkeiten "zum arbeiten" kennen gelernt.</p>
+    <p>JavaScript selbst bietet aber darüber hinaus ein paar Syntaktische Möglichkeiten um mit diesen zu arbeiten.</p>
+  </section>
+
+  <section>
+    <h2>Object &amp; Array Destructure</h2>
+  </section>
+
+  <section>
+    <p>Wir können Inhalte aus Arrays oder Objekten "extrahieren", indem wir die entsprechende Syntax "Rückwärts" schreiben:</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      // Objekt deklarieren und "destructuren"
+      const myObj = { value: 5, type: 'number' };
+      // Werte sind nicht ans Objekt gebunden
+      const { value, type } = myObj;
+
+      // 5, 'number';
+      console.log(value, type);
+    </code></pre>
+
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      // Array deklarieren und "destructuren"
+      const arr = [5, 6, 7, 8];
+      // Wir "überspringen" Werte durch leerlassen 
+      const [five, six,, eight] = arr;
+
+      // 5, 6, 8
+      console.log(five, six, eight);
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Ein Objekt-Destructure wird oft in Funktionsparametern verwendet</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const obj = { name: 'Kevin', age: 23 };
+
+      function greet({ name }) {
+        console.log(`Hallo ${name}!`);
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Die Bibliothek React verwendet ein Array-Destructure um State-Variablen mit einem Nutzer-gewählten Namen zu generieren.</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const arr = [5, 6, 7, 8];
+
+      const [nennMichWieDuWillst] = arr;
+
+      // 5
+      console.log(nennMichWieDuWillst);
+    </code></pre>
+  </section>
+</section>

src/components/slides/javascript/04-advanced-objects/index.astro

@@ -0,0 +1,13 @@
+---
+import Title from "./title.astro";
+import Destructure from "./destructure.astro";
+import SpreadOperator from "./spread-operator.astro";
+import RestParameter from "./rest-parameter.astro";
+---
+
+<div class="slides">
+  <Title />
+  <Destructure />
+  <SpreadOperator />
+  <RestParameter />
+</div>

src/components/slides/javascript/04-advanced-objects/rest-parameter.astro

@@ -0,0 +1,58 @@
+<section>
+  <section>
+    <h2>Rest-Parameter</h2>
+  </section>
+
+  <section>
+    <p>Ähnlich zum Spread-Operator besteht der Rest-Parameter aus drei Punkten vor einem Variablen-Namen.</p>
+    <p>Diese sind aber in den Parametern einer Funktion zu finden.</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      function doSomething(paramA, paramB, ...paramRest) {
+        //
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Mit dieser Syntax sind wir in der Lage, "so viele Parameter wie wir wollen" in einer Funktion entgegen zu nehmen.</p>
+    <p>Wir verwenden diese Syntax aber mit Vorsicht. Wir können schnell den Überblick verlieren, was wir hier entgegen nehmen wollen.</p>
+  </section>
+
+  <section>
+    <p>Ein positives Beispiel ist <code>console.log()</code></p>
+    <p>Wir können beliebig viele Parameter mitgeben und alle werden nacheinander ausgeloggt</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      console.log('a', 5, true, {}, [], false, null, undefined);
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Unsere eigene Logging Funktion könnte so aussehen:</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const log = (...toLog) =&gt; {
+        toLog.forEach((item) =&gt; console.log(item));
+      };
+
+      log('a', 5, true, {}, [], false, null, undefined);
+    </code></pre>
+
+    <p>Wir erkennen: Ein als Rest-Parameter übergebener Wert wird ein Array sein, die Parameter werden in korrekter Reihenfolge in dieses Array gegeben.</p>
+  </section>
+
+  <section>
+    <p>Es sind auch folgende Möglichkeiten gegeben:</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const log = (level, ...toLog, options) => {
+        // ...
+      };
+
+      // level = 'WARN',
+      // toLog = ['Hallo', 'Welt']
+      // options = { colors: true }
+      console.log('WARN', 'Hallo', 'Welt', { colors: true });
+    </code></pre>
+    <p>Wir können davor oder danach weitere Variablen definieren, JS packt die Werte korrekt zusammen, im obigen Beispiel landet der letzte Parameter in der Variable "options".</p>
+    <p>Es kann aber nur ein Rest-Parameter je Funktion Angegeben werden.</p>
+  </section>
+
+</section>

src/components/slides/javascript/04-advanced-objects/spread-operator.astro

@@ -0,0 +1,83 @@
+<section>
+  <section>
+    <h2>Der Spread-Operator</h2>
+  </section>
+
+  <section>
+    <p>Mithilfe des Spread-Operators können wir Iterierbare Variablen (Strings, Arrays, Objekte) "expandieren" (Ich nenne es gerne "auspacken").</p>
+    <p>Der Spread-Operator besteht aus drei Punkten ( <code>...</code> ) die vor der zu iterierenden Variable angeführt werden.</p>
+  </section>
+
+  <section>
+    <p>Use-Cases</p>
+    <ul>
+      <li>String in ein Char-Array überführen</li>
+      <li>Iterierbare Elemente zusammenführen (concat)</li>
+      <li>Shallow-Cloning</li>
+    </ul>
+  </section>
+
+  <section>
+    <h3>Beispiel Strings</h3>
+  </section>
+
+  <section>
+    <p>Seltener Use-Case, zeigt aber dafür umso einfacher was hier genau passiert</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const text = "Hallo Welt!";
+
+      // H a l l o  W e l t !
+      console.log(...text);
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>Concat-ähnliches Verhalten</h3>
+  </section>
+
+  <section>
+    <p>Indem wir 2 oder mehrere Arrays in ein neues "Spreaden", erhalten wir alle Elemente innerhalb eines Arrays.</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const arr1 = ['H', 'a', 'l', 'l', 'o'];
+      const arr2 = ['W', 'e', 'l', 't', '!'];
+
+      // Wir können auch zusätzliche Inhalte dazu setzten
+      // (in diesem Fall ein Space zwischen den beiden Wörtern)
+      const joined = [...arr1, ' ', ...arr2];
+
+      console.log(joined);
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>Shallow Cloning</h3>
+  </section>
+
+  <section>
+    <p>Der Spread Operator sorgt Effektiv dafür, dass die Inhalte eines Arrays kopiert werden.</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const arr = [1,2,3];
+      const copyByReference = arr;
+
+      // true
+      console.log(arr === copyByReference);
+
+      // false
+      console.log(arr === [...arr]);
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Wichtig hierbei ist zu beachten, dass es sich hierbei um einen <strong>shallow-clone</strong> handelt.</p>
+    <p>Die Inhalte selber werden "as is" kopiert, Objekte werden also nicht neu generiert sondern hier werden wieder nur Speicheradressen kopiert:</p>
+    <pre class="js"><code data-trim data-line-numbers is:raw>
+      const obj = { value: 5 };
+      const arr = [obj];
+
+      const shallowClone = [...arr];
+
+      // true
+      console.log(shallowClone[0] === obj);
+    </code></pre>
+  </section>
+</section>

src/components/slides/javascript/04-advanced-objects/title.astro

@@ -0,0 +1,3 @@
+<section>
+  <h1>Erweiterte Methodiken auf Objekten</h1>
+</section>

src/pages/slides/javascript/04-advanced-methodics.astro

@@ -0,0 +1,9 @@
+---
+import Reveal from "../../../layouts/Reveal.astro";
+import Slides from '../../../components/slides/javascript/04-advanced-objects/index.astro'
+---
+<!-- Array Destructure, Rest and Spread -->
+
+<Reveal title="Advanced Object Manipulation">
+  <Slides />
+</Reveal>