Code-Bibliothek — Capypad · Code Zeile für Zeile lesen

JavaScript · MittelSnippet

Privater Status mit Closures

Eine Closure entsteht, wenn eine innere Funktion auf Variablen aus ihrem äußeren Scope verweist, was die Kapselung privater Daten ermöglicht.

snippet.js

javascript

1

2

3

4

5

function createCounter() {
  let count = 0;
  return () => ++count;
}
const counter = createCounter();

functionspatterns

JavaScript · MittelSnippet

Optional Chaining und Nullish Coalescing

Optional Chaining (?.) bricht die Auswertung ab, wenn die Referenz 'nullish' ist, während Nullish Coalescing (??) einen Standardwert nur für null oder undefined liefert.

snippet.js

javascript

1

2

3

const user = { profile: { name: 'Alice' } };
const city = user.address?.city ?? 'Unknown';
console.log(city);

syntaxbestpractices

JavaScript · MittelSnippet

Objekt-Destructuring mit Aliasing und Standardwerten

Destructuring ermöglicht das Extrahieren von Objekteigenschaften in Variablen mit benutzerdefinierten Namen (Aliasing) und Standardwerten, falls die Eigenschaft fehlt.

snippet.js

javascript

1

2

3

const config = { id: 101 };
const { id: userId, theme = 'dark' } = config;
console.log(userId, theme);

syntaxdatatypes

JavaScript · MittelSnippet

Deklarative Datentransformation

Das Verketten von Funktionen höherer Ordnung wie filter und map ermöglicht die Verarbeitung von Sammlungen auf eine saubere, lesbare und deklarative Weise.

snippet.js

javascript

1

2

3

4

const nums = [1, 2, 3, 4, 5];
const result = nums
  .filter(n => n > 2)
  .map(n => n * 2);

arraysfunctions

JavaScript · MittelSnippet

Resiliente parallele Asynchronität mit Promise.allSettled

Im Gegensatz zu Promise.all wartet Promise.allSettled darauf, dass alle Promises abgeschlossen sind, unabhängig davon, ob sie erfolgreich waren oder abgelehnt wurden.

snippet.js

javascript

1

2

3

const promises = [fetch('/api/1'), fetch('/api/2')];
const results = await Promise.allSettled(promises);
results.forEach(res => console.log(res.status));

asyncerrorhandling

JavaScript · MittelSnippet

Fortgeschrittene Verarbeitung mit Tagged Templates

Tagged Templates ermöglichen es, Template-Literale mit einer Funktion zu parsen. Das erste Argument enthält ein Array von String-Literalen, die weiteren Argumente sind die Werte der Ausdrücke. Dies ist nützlich für DSLs, das Bereinigen von HTML oder Internationalisierung.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

function sanitize(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    let val = String(values[i] || '');
    return acc + str + val.replace(/&/g, '&amp;').replace(/</g, '&lt;');
  }, '');
}
 
const input = '<script>alert(1)</script>';
const message = sanitize`User input: ${input}`;
console.log(message); // User input: &lt;script>alert(1)&lt;/script>

syntaxsecurity

JavaScript · MittelSnippet

Verwaltung privater Zustände mit WeakMap

WeakMap ist eine Sammlung von Schlüssel/Wert-Paaren, bei denen die Schlüssel Objekte sind und schwach referenziert werden. Dies ist ein Pattern zur Erstellung echter privater Zustände in JavaScript-Klassen, das sicherstellt, dass private Daten automatisch bereinigt werden, wenn die Instanz gelöscht wird.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

const privateData = new WeakMap();
 
class SecureUser {
  constructor(name, token) {
    privateData.set(this, { name, token });
  }
 
  getProfile() {
    const { name } = privateData.get(this);
    return `User: ${name}`;
  }
}
 
const user = new SecureUser('Alice', 'secret-123');
console.log(user.token); // undefined

datatypesoop

JavaScript · MittelSnippet

Sauberes Abbrechen von Async-Operationen mit AbortController

Das AbortController-Interface ermöglicht es, eine oder mehrere Web-Anfragen nach Bedarf abzubrechen. Dies ist wichtig, um das Entfernen von Komponenten in Frameworks zu handhaben oder Race Conditions zu vermeiden, wenn mehrere Anfragen nacheinander ausgelöst werden.

snippet.js

javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const controller = new AbortController();
const { signal } = controller;
 
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    return await response.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    }
  }
}
 
fetchData();
controller.abort(); // Immediately cancels the fetch

asyncbestpractices