add solutions for promises, add destructuring, try-catch-finally and scope

Sascha Schulz

2023-06-06 b81e3b9a87b839010329a32715e46c98b5f36153

add solutions for promises, add destructuring, try-catch-finally and scope

 index.html

@@ -1721,7 +1721,7 @@
                            <code class="js" data-trim data-line-numbers>
                                const fs = require("fs");
                                
                                fs.readFile("./hello.txt", {encoding: "utf8"}, function(data) {
                                fs.readFile("./hello.txt", {encoding: "utf8"}, function(error, data) {
                                    console.log(data);
                                });
                            </code>
@@ -1729,7 +1729,6 @@
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                Hello World!
								
                            </code>
                        </pre>
                    </section>
@@ -1743,7 +1742,32 @@
                                    // implementieren
                                }
                                
                                readFile.then(function(content) {
                                readFile("./hello.txt").then(function(content) {
                                    console.log(content);
                                });
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                Hello World!
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung:
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const fs = require("fs");
								
                                function readFile(path) {
                                    return new Promise(function (resolve, reject) {
                                        fs.readFile(path, {encoding: "utf8"}, function(error, data) {
                                            resolve(data);
                                        });
                                    });
                                }
								
                                readFile("./hello.txt").then(function(content) {
                                    console.log(content);
                                });
                            </code>
@@ -1762,6 +1786,39 @@
                                
                                Hallo Welt!
                                
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung:
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const fs = require("fs");
								
                                function readFile(path) {
                                    return new Promise(function (resolve, reject) {
                                        fs.readFile(path, {encoding: "utf8"}, function(error, data) {
                                            resolve(data);
                                        });
                                    });
                                }
								
                                readFile("./hello.txt")
                                    .then(function(content) {
                                        console.log(content);
								
                                        return readFile("./hallo.txt");
                                    })
                                    .then(function(content) {
                                        console.log(content);
                                    });
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                Hello World!
								
                                Hallo Welt!
                            </code>
                        </pre>
                    </section>
@@ -1795,6 +1852,279 @@
                    <section>
                        Aufgabe: Schreibe die Lösung der vorherigen Aufgabe nach Async - Await um
                    </section>
                    <section>
                        Lösung:
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const fs = require("fs");
								
                                function readFile(path) {
                                    return new Promise(function (resolve, reject) {
                                        fs.readFile(path, {encoding: "utf8"}, function(error, data) {
                                            resolve(data);
                                        });
                                    });
                                }
								
                                async function wrapper() {
                                    const content1 = await readFile("./hello.txt");
                                    const content2 = await readFile("./hallo.txt");
								
                                    console.log(content1);
                                    console.log(content2);
                                }
								
                                wrapper();
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                Hello World!
								
                                Hallo Welt!
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Destructuring</h3>
                        <p>Auflösen von komplexen Strukturen</p>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                // Objekt destrukturieren (per Attribut-Namen)
                                const { a, b } = { a: 1, b: 2 };
								
                                console.log(a);
                                console.log(b);
								
                                // Array destrukturieren (per Position)
                                const [ c, d ] = [3, 4];
								
                                console.log(c);
                                console.log(d);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                1
                                2
                                3
                                4
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                // Bei Objekten Elemente umbenennen oder auch auslassen
                                const { a: x, b: y } = { a: 1, b: 2, c: 3 };
								
                                console.log(x);
                                console.log(y);
								
                                // Bei Arrays Elemente auslassen
                                const [ , a, b, , c] = [3, 4, 5, 6, 7, 8];
								
                                console.log(a);
                                console.log(b);
                                console.log(c);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                1
                                2
                                4
                                5
                                7
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                // Verschachteltes Destructuring
                                const {a: [, x, ] } = { a: [0, 1, 2]};
								
                                console.log(x);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                1
                            </code>
                        </pre>
                    </section>
                    <section>
                        Aufgabe: x soll die 5 enthalten
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const o = { a: [0, {b: [0, 5]}, 2]};
								
                                const  { /* Destructuring-Ausdruck */ } = o;
								
                                console.log(x);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                5
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung:
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const o = { a: [0, { b: [0, 5] }, 2]};

                                const { a: [, { b: [, x] }]} = o;
								
                                console.log(x);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                5
                            </code>
                        </pre>
                    </section>
                    <section>
                        Aufgabe: x soll die 3 enthalten
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};
								
                                const  { /* Destructuring-Ausdruck */ } = o;
								
                                console.log(x);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                3
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung:
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};

                                const  { a: [, {b: [, { c: [, { d: x}] }] }] } = o;
								
                                console.log(x);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                3
                            </code>
                        </pre>
                    </section>
                    <section>
                        <p>Destructuring zum parallelen Ausführen von mehreren Promises</p>
                        <pre>
                            <code class="js" data-trim data-line-numbers="1-10|11-21">
                                const fs = require("fs");
								
                                function readFile(path) {
                                    return new Promise(function (resolve, reject) {
                                        fs.readFile(path, {encoding: "utf8"}, function(error, data) {
                                            resolve(data);
                                        });
                                    });
                                }
								
                                async function wrapper() {
                                    const [ content1, content2 ] = await Promise.all([
                                        readFile("./hello.txt"),
                                        readFile("./hallo.txt")
                                    ]);
								
                                    console.log(content1);
                                    console.log(content2);
                                }
								
                                wrapper();
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Try-Catch-Finally</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function throwError() {
                                    try {
                                        throw new Error("Fehler!");
                                        return "Hello World!";
                                    }
                                    catch (e) {
                                        return e.message;
                                    }
                                    finally {
                                        console.log("Finally wird immer ausgeführt");
                                        return "Finally!";
                                    }
                                }
								
                                const result = throwError();
                                console.log(result);
                            </code>
                        </pre>
                        <pre class="fragment">
                            <code class="bash" data-trim data-line-numbers>
                                Finally wird immer ausgeführt
                                Finally!
                            </code>
                        </pre>
                    </section>
                    <section>
                        <p>Anwendungsbeispiel für Try-Catch-Finally</p>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function readFromDatabase() {
                                    try {
                                        db.connect();
                                        return db.read();
                                    }
                                    catch (e) {
                                        console.log(e.stack);
                                        return "";
                                    }
                                    finally {
                                        if (db.open) {
                                            db.close();
                                        }
                                    }
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Scope</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function a() {
                                    const x = 5;
								
                                    return function() {
                                        return x * x;
                                    };
                                }
								
                                const squareX = a();
                                const result = squareX();
								
                                console.log(result);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                25
                            </code>
                        </pre>
                    </section>
                </section>
            </div>
        </div>