From ba2778991b47ecc229db95d324dba72d7d1b1509 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sat, 21 Dec 2024 14:31:38 +0100 Subject: [PATCH] feat(slides): slides for advanced method syntaxes --- .../04-advanced-objects/destructure.astro | 56 +++++++++++++ .../04-advanced-objects/index.astro | 13 +++ .../04-advanced-objects/rest-parameter.astro | 58 +++++++++++++ .../04-advanced-objects/spread-operator.astro | 83 +++++++++++++++++++ .../04-advanced-objects/title.astro | 3 + .../javascript/04-advanced-methodics.astro | 9 ++ 6 files changed, 222 insertions(+) create mode 100644 src/components/slides/javascript/04-advanced-objects/destructure.astro create mode 100644 src/components/slides/javascript/04-advanced-objects/index.astro create mode 100644 src/components/slides/javascript/04-advanced-objects/rest-parameter.astro create mode 100644 src/components/slides/javascript/04-advanced-objects/spread-operator.astro create mode 100644 src/components/slides/javascript/04-advanced-objects/title.astro create mode 100644 src/pages/slides/javascript/04-advanced-methodics.astro diff --git a/src/components/slides/javascript/04-advanced-objects/destructure.astro b/src/components/slides/javascript/04-advanced-objects/destructure.astro new file mode 100644 index 0000000..6ff4e07 --- /dev/null +++ b/src/components/slides/javascript/04-advanced-objects/destructure.astro @@ -0,0 +1,56 @@ +
+
+

Soweit haben wir Objekte und deren Möglichkeiten "zum arbeiten" kennen gelernt.

+

JavaScript selbst bietet aber darüber hinaus ein paar Syntaktische Möglichkeiten um mit diesen zu arbeiten.

+
+ +
+

Object & Array Destructure

+
+ +
+

Wir können Inhalte aus Arrays oder Objekten "extrahieren", indem wir die entsprechende Syntax "Rückwärts" schreiben:

+ 

+      // 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);
+
+ + 

+      // 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);
+
+
+ +
+

Ein Objekt-Destructure wird oft in Funktionsparametern verwendet

+ 

+      const obj = { name: 'Kevin', age: 23 };
+
+      function greet({ name }) {
+        console.log(`Hallo ${name}!`);
+      }
+
+
+ +
+

Die Bibliothek React verwendet ein Array-Destructure um State-Variablen mit einem Nutzer-gewählten Namen zu generieren.

+ 

+      const arr = [5, 6, 7, 8];
+
+      const [nennMichWieDuWillst] = arr;
+
+      // 5
+      console.log(nennMichWieDuWillst);
+
+
+
\ No newline at end of file diff --git a/src/components/slides/javascript/04-advanced-objects/index.astro b/src/components/slides/javascript/04-advanced-objects/index.astro new file mode 100644 index 0000000..84c0dee --- /dev/null +++ b/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"; +--- + +
+ + <Destructure /> + <SpreadOperator /> + <RestParameter /> +</div> \ No newline at end of file diff --git a/src/components/slides/javascript/04-advanced-objects/rest-parameter.astro b/src/components/slides/javascript/04-advanced-objects/rest-parameter.astro new file mode 100644 index 0000000..4dfac4d --- /dev/null +++ b/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) => { + toLog.forEach((item) => 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> \ No newline at end of file diff --git a/src/components/slides/javascript/04-advanced-objects/spread-operator.astro b/src/components/slides/javascript/04-advanced-objects/spread-operator.astro new file mode 100644 index 0000000..59ccf24 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/src/components/slides/javascript/04-advanced-objects/title.astro b/src/components/slides/javascript/04-advanced-objects/title.astro new file mode 100644 index 0000000..81e7d7c --- /dev/null +++ b/src/components/slides/javascript/04-advanced-objects/title.astro @@ -0,0 +1,3 @@ +<section> + <h1>Erweiterte Methodiken auf Objekten</h1> +</section> \ No newline at end of file diff --git a/src/pages/slides/javascript/04-advanced-methodics.astro b/src/pages/slides/javascript/04-advanced-methodics.astro new file mode 100644 index 0000000..ccf9b20 --- /dev/null +++ b/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> \ No newline at end of file