2026-11-02 11:17:53 +01:00
parent 7936f3387b
commit c936a7f00c
12 changed files with 648 additions and 0 deletions
@@ -0,0 +1,30 @@
+{
+  const firstName = 'John';
+
+  // if (firstName === John) {
+  //   // ReferenceError: John is not defined
+  //   console.log(firstName);
+  // }
+
+  // if (firstname === 'John') {
+  //   // Uncaught ReferenceError: firstname is not defined
+  //   console.log(firstName);
+  // }
+
+  if (firstName === 'John') {
+    console.log(firstName);
+  }
+
+  function greet() {
+    console.log('Hello, ' + fullName); // Cannot find name 'fullName'.
+    console.log(typeof fullName);
+  }
+
+  // greet(); // => ReferenceError: fullName is not defined
+
+  // function greet(fullName) {
+  //   console.log(`Hello, ${fullName}`);
+  // }
+
+  greet('John Wick');
+}
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nesting if-statements</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>Nesting if-statements</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let isSystemUpgrading = false;
+      let isLoggedIn = true;
+      let hasAdminRights = true;
+
+      const items = [
+        {
+          name: 'Item A',
+          cost: 150,
+        },
+        {
+          name: 'Item B',
+          cost: 250,
+        },
+        {
+          name: 'Item C',
+          cost: 350,
+        },
+      ];
+
+      function processRequests() {
+        if (!isSystemUpgrading) {
+          if (isLoggedIn) {
+            if (hasAdminRights) {
+              items.forEach((item) => {
+                console.log(`Item Name: ${item.name}`);
+                if (item.cost > 200) {
+                  console.log('Item cost is greater than 200.');
+                } else {
+                  console.log('Item cost is less than or equal to 200.');
+                }
+              });
+            } else {
+              console.log('You do not have administrative privileges.');
+            }
+          } else {
+            console.log('You must be logged in to view items.');
+          }
+        } else {
+          console.log('System is currently being upgraded.');
+        }
+      }
+
+      console.time('without inversion');
+      processRequests();
+      console.timeEnd('without inversion');
+    </script>
+  </body>
+</html>
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nesting if-statements vermeiden über inversion</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>Nesting if-statements vermeiden über <strong>inversion</strong></h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const isSystemUpgrading = true;
+      const isLoggedIn = true;
+      const hasAdminRights = true;
+
+      const items = [
+        {
+          name: 'Item A',
+          cost: 150,
+        },
+        {
+          name: 'Item B',
+          cost: 250,
+        },
+        {
+          name: 'Item C',
+          cost: 350,
+        },
+      ];
+
+      function processRequests() {
+        if (isSystemUpgrading) {
+          console.log('System is currently being upgraded.');
+          return;
+        }
+
+        if (!isLoggedIn) {
+          console.log('You must be logged in to view items.');
+          return;
+        }
+
+        if (!hasAdminRights) {
+          console.log('You do not have administrative privileges.');
+          return;
+        }
+
+        items.forEach((item) => {
+          console.log(`Item Name: ${item.name}`);
+          if (item.cost > 200) {
+            console.log('Item cost is greater than 200.');
+          } else {
+            console.log('Item cost is less than or equal to 200.');
+          }
+        });
+      }
+
+      console.time('inversion');
+      processRequests();
+      console.timeEnd('inversion');
+    </script>
+  </body>
+</html>
@@ -0,0 +1,57 @@
+'use strict';
+
+const isSystemUpgrading = false;
+const isLoggedIn = true;
+const hasAdminRights = true;
+
+const items = [
+  { name: 'Item A', cost: 150 },
+  { name: 'Item B', cost: 250 },
+  { name: 'Item C', cost: 350 },
+];
+
+function runNested() {
+  let counter = 0;
+  if (!isSystemUpgrading) {
+    if (isLoggedIn) {
+      if (hasAdminRights) {
+        for (let i = 0; i < items.length; i++) {
+          if (items[i].cost > 200) counter++;
+        }
+      }
+    }
+  }
+  return counter;
+}
+
+function runGuard() {
+  let counter = 0;
+  if (isSystemUpgrading) return counter;
+  if (!isLoggedIn) return counter;
+  if (!hasAdminRights) return counter;
+
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].cost > 200) counter++;
+  }
+  return counter;
+}
+
+const ITERATIONS = 10_000_000;
+
+// Warmup
+for (let i = 0; i < 100_000; i++) {
+  runNested();
+  runGuard();
+}
+
+console.time('Verschachtelt');
+for (let i = 0; i < ITERATIONS; i++) runNested();
+console.timeEnd('Verschachtelt');
+
+console.time('Early Returns');
+for (let i = 0; i < ITERATIONS; i++) runGuard();
+console.timeEnd('Early Returns');
+
+// In diesem Test laufen beide Varianten im Chrome V8-Engine praktisch gleich schnell (innerhalb normaler CPU-Schwankungen).
+
+//     Fazit: Verwende Early Returns (Guard Clauses). Sie bieten zwar keinen nennenswerten Performance-Vorsprung gegenüber verschachtelten Abfragen, reduzieren aber die zyklomatische Komplexität und machen den Code deutlich lesbarer.
@@ -0,0 +1,38 @@
+## Kein Performanceunterschied bei Inversion
+
+### 1. AST-Normalisierung & SSA (Control Flow Graphs)
+
+V8 (über den Turbofan-Optimierungs-Compiler) führt deinen Code nicht zeilenweise so aus, wie du ihn schreibst:
+
+* **Control Flow Graph (CFG):** V8 wandelt sowohl verschachtelte Blöcke als auch Early Returns in dieselbe abstrakte Repräsentation um (Static Single Assignment / SSA Form).
+* **Pfad-Reduktion:** Ein verschachtelter Baum `if (A) { if (B) { if (C) { ... } } }` wird im Zwischencode auf denselben Entscheidungspfad reduziert wie `if (!A) return; if (!B) return; if (!C) return;`.
+* **Identischer Maschinencode:** Sobald Turbofan den Code optimiert, erzeugen beide Varianten exakt dieselbe Sequenz aus bedingten Sprungbefehlen (`test`, `jnz` / `jz`) auf Assemblerebene.
+
+---
+
+### 2. Hardware-Ebene: CPU Branch Prediction
+
+Unabhängig von der JS-Engine entscheidet die Hardware über die Geschwindigkeit von Verzweigungen:
+
+* Wenn Bedingungen wie `isLoggedIn` stabil sind (z. B. immer `true`), lernt der **Branch Predictor** der CPU das Muster nach wenigen Durchläufen.
+* Die CPU führt den Zweig spekulativ ohne Pipeline-Stall aus (Branch Prediction Penalty = 0 Takte).
+* Ob der nicht genommene Zweig am Ende der Funktion (`nested`) oder direkt hinter dem Check (`early return`) liegt, macht für die Ausführungszeit der CPU keinen Unterschied.
+
+---
+
+### 3. Warum misst man im Firefox (SpiderMonkey) manchmal Unterschiede?
+
+SpiderMonkey (Firefox) und V8 (Chrome) verfolgen unterschiedliche Strategien bei der Bytecode-Erzeugung und den JIT-Stufen:
+
+| Aspekt | Chrome (V8) | Firefox (SpiderMonkey) |
+| --- | --- | --- |
+| **Pipeline** | Ignition (Interpreter) $\rightarrow$ Sparkplug $\rightarrow$ Maglev $\rightarrow$ Turbofan | C++ Interpreter $\rightarrow$ Baseline Interpreter $\rightarrow$ Baseline Compiler $\rightarrow$ WarpMonkey |
+| **Bytecode-Layout** | V8 optimiert Jump-Targets früh im Bytecode-Generator; Basic Blocks werden linear angeordnet. | SpiderMonkey behält in frühen Phasen oft ein Bytecode-Layout bei, das näher an der Quellcode-Struktur liegt. |
+| **Bailout / OSR** | Sehr aggressives Inlining und Dead-Code-Elimination im `Maglev`/`Turbofan`-Layer. | `WarpMonkey` nutzt Transpilation über CacheIR; je nach Verschachtelungstiefe können Scope- und Frame-Handling im Baseline-Tier minimal variieren. |
+
+In **nicht-hochoptimiertem Code** (z. B. Skripte, die nur wenige Male laufen und im Interpreter bzw. Baseline JIT verbleiben):
+
+* Verursacht tiefe Verschachtelung in manchen Engines zusätzlichen Overhead beim Verwalten von Lexical Environments/Scopes auf dem Stack.
+* Early Returns erlauben es dem Interpreter, den aktuellen Stack-Frame schneller abzubauen, ohne tiefer liegende Scope-Hierarchien zu durchlaufen.
+
+Sobald der Code jedoch "heiß" läuft (nach einigen tausend Iterationen), eliminieren sowohl Turbofan als auch WarpMonkey diesen Unterschied vollständig.
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nested if-statements</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>Nested if-statements</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const isSystemUpgrading = false;
+      const isLoggedIn = true;
+      const hasAdminRights = true;
+
+      const items = [
+        {
+          name: 'Item A',
+          cost: 150,
+        },
+        {
+          name: 'Item B',
+          cost: 250,
+        },
+        {
+          name: 'Item C',
+          cost: 350,
+        },
+      ];
+
+      function processRequests() {
+        if (isSystemUpgrading) {
+          console.log('System is currently being upgraded.');
+          return;
+        }
+
+        if (!isLoggedIn || !hasAdminRights) {
+          console.log('You must be logged in and have administrative privileges to view items.');
+          return;
+        }
+
+        items.forEach((item) => {
+          console.log(`Item Name: ${item.name}`);
+          if (item.cost > 200) {
+            console.log('Item cost is greater than 200.');
+          } else {
+            console.log('Item cost is less than or equal to 200.');
+          }
+        });
+      }
+
+      processRequests();
+    </script>
+  </body>
+</html>
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Extraction</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>Extraction</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const isSystemUpgrading = false;
+      const isLoggedIn = true;
+      const hasAdminRights = true;
+
+      const items = [
+        {
+          name: 'Item A',
+          cost: 150,
+        },
+        {
+          name: 'Item B',
+          cost: 250,
+        },
+        {
+          name: 'Item C',
+          cost: 350,
+        },
+      ];
+
+      // Extraction
+      function displayItemDetails(item) {
+        console.log(`Item Name: ${item.name}`);
+        if (item.cost > 200) {
+          console.log('Item cost is greater than 200.');
+        } else {
+          console.log('Item cost is less than or equal to 200.');
+        }
+      }
+
+      // auslagerung in utils/helper Ordner möglich
+      function hasAccessRights() {
+        // if (isLoggedIn && hasAdminRights) {
+        //   return true
+        // } else {
+        //   return false
+        // }
+
+        // return (isLoggedIn && hasAdminRights) ? true : false;
+
+        return isLoggedIn && hasAdminRights;
+      }
+
+      function processRequests() {
+        // Guard (early returns bzw. inversion)
+        if (isSystemUpgrading) {
+          console.log('System is currently being upgraded.');
+          return;
+        }
+
+        // Extraction
+        if (!hasAccessRights()) {
+          console.log('You must be logged in and have administrative privileges to view items.');
+          return;
+        }
+
+        items.forEach(displayItemDetails); // Funktionsreferenz
+      }
+
+      processRequests();
+    </script>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DRY - Don't Repeat Yourself</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>DRY - Don't Repeat Yourself</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      function calculateRectangles() {
+        // Rectangle 1
+        const length1 = 15;
+        const width1 = 10;
+        const area1 = length1 * width1;
+        console.log('Area of Rectangle 1:', area1);
+
+        // Rectangle 2
+        const length2 = 12;
+        const width2 = 8;
+        const area2 = length2 * width2;
+        console.log('Area of Rectangle 2:', area2);
+
+        // Rectangle 3
+        const length3 = 10;
+        const width3 = 5;
+        const area3 = length3 * width3;
+        console.log('Area of Rectangle 3:', area3);
+      }
+
+      calculateRectangles();
+    </script>
+  </body>
+</html>
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DRY - Don't Repeat Yourself - Regel anwenden</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>DRY - Don't Repeat Yourself - Regel anwenden</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // IIFE - Immediately invoked function expression. - sorgt für eingeschränkten Gültigkeitsbereich (Schutz) vom Code
+      (() => {
+        // === DOM & VARS =======
+        const DOM = {
+          output: document.querySelector('.output'),
+        };
+
+        const rectangles = [
+          { length: 15, width: 10 },
+          { length: 12, width: 8 },
+          { length: 10, width: 5 },
+        ];
+
+        const rectangle = { length: 10, width: 12 };
+
+        // === INIT =============
+        // Newspaper-Metapher Prinzip
+        const init = () => {
+          const areas = calcRectangles(rectangles);
+
+          let html = '';
+          areas.forEach((area, idx) => {
+            html += `Area of Rectange ${idx + 1}: ${area}<br />`;
+          });
+
+          DOM.output.innerHTML = html;
+        };
+
+        // === EVENTHANDLER =====
+
+        // === XHR/FETCH ========
+
+        // === FUNCTIONS ========
+        const calcRectangles = (rects = []) => {
+          rects = Array.isArray(rects) ? rects : [rects];
+
+          const areas = rects.map((rect) => rect.length * rect.width);
+
+          return areas;
+        };
+
+        init();
+      })();
+    </script>
+  </body>
+</html>
+
+<!-- 
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DRY - Don't Repeat Yourself</title>
+  </head>
+  <body>
+    <h1>DRY - Don't Repeat Yourself</h1>
+
+    <script>
+      'use strict';
+
+      function calculateRectangles() {
+        const rectangles = [
+          { length: 15, width: 10 },
+          { length: 12, width: 8 },
+          { length: 10, width: 5 },
+        ];
+
+        rectangles.forEach((rect, index) => {
+          const area = rect.length * rect.width;
+          console.log(`Area of Rectangle ${index + 1}:`, area);
+        });
+      }
+
+      calculateRectangles();
+    </script>
+  </body>
+</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>Syntax Error</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>Syntax <code>Error</code></h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      {
+        const age = 25;
+        // console.log('My age is, age); // Uncaught SyntaxError: Invalid or unexpected token
+        console.log('My age is, age');
+
+        // function addNumbers(num1, num2 {
+        //     return num1 + num2;
+        // }
+
+        // => SyntaxError: Unexpected token '{'
+
+        // const addNumbers (num1,num2) => {
+        //   return num1 + num2;
+        // }
+        // Uncaught SyntaxError: Missing initializer in const declaration
+
+        const addNumbers = (num1, num2) => {
+          return num1 + num2;
+        };
+
+        console.log(1, 2);
+
+        // let person = {
+        //   firstName: 'John'
+        //   lastName: 'Doe',
+        // }
+
+        // => SyntaxError: Unexpected identifier 'lastName'
+
+        // let person = {
+        //   firstName: 'John',
+        //   lastName: 'Doe',
+        // };
+
+        // const const = "value"; // => SyntaxError: Unexpected token 'const'
+        // let class = "Math"; // => SyntaxError: Unexpected token 'class'
+        // let for = 'for statement' // => SyntaxError: Unexpected token 'for'
+        // const 🤡 = 'clown' // => SyntaxError: Invalid or unexpected token
+        // const % = 'arithmetic'; // => SyntaxError: Invalid or unexpected token
+
+        // const Math = 'test';
+        // const isNaN = 'is nicht';
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reference Error</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>Reference Error</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      {
+        const firstName = 'John';
+
+        // if (firstName === John) {
+        //   // ReferenceError: John is not defined
+        //   console.log(firstName);
+        // }
+
+        // if (firstname === 'John') {
+        //   // Uncaught ReferenceError: firstname is not defined
+        //   console.log(firstName);
+        // }
+
+        if (firstName === 'John') {
+          console.log(firstName);
+        }
+
+        function greet() {
+          console.log('Hello, ' + fullName);
+          console.log(typeof fullName);
+        }
+
+        // greet(); // => ReferenceError: fullName is not defined
+
+        // function greet(fullName) {
+        //   console.log(`Hello, ${fullName}`);
+        // }
+
+        greet('John Wick');
+      }
+    </script>
+  </body>
+</html>