DanLevy.net

Quiz: Kennst du modernes JavaScript?

Beweise deine JavaScript‑Skills!

Kennst du den Unterschied zwischen ES2015 und ES2022?

1. 

ES2020

Wie lautet der Wert von result?

console.log(null ?? 100);

Der Null‑Koaleszenz‑Operator (??) gibt den rechten Operanden (b) zurück, wenn der linke Operanden (a) null oder undefined ist. In diesem Fall ist a null, also ist result 100.

Prüfe, ob der linke Operand null oder undefined ist; andere falsy-Werte werden nicht ersetzt.

2. 

ES2020

Was wird die Ausgabe des folgenden Codes sein?

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

Der Null‑Koaleszenz‑Operator (??) behandelt falsy‑Werte wie false als gültige Werte. Da value false ist, wird er als gültiger Wert angesehen und zurückgegeben.

false ist ein boolescher Wert und weder null noch undefined.

3. 

Optionale Verkettung

Was gibt der folgende Code aus?

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

Der optionale Verkettungsoperator (?.) stoppt die Auswertung, wenn die linke Seite null oder undefined ist. Da obj.foo null ist, evaluiert obj.foo?.bar zu undefined.

Die optionale Verkettung beendet den Zugriff, sobald der geprüfte Wert null oder undefined ist.

4. 

BigInt

Was ist die Ausgabe des folgenden Codes?

const a = 42n;
const result = a * 2n;
console.log(result);

BigInt‑Werte werden erzeugt, indem man an eine Zahl n anhängt. Man kann BigInt nicht mit normalen Zahlen in arithmetischen Operationen mischen. Hier sind beide Werte BigInt, sodass die Multiplikation funktioniert und 84n ergibt.

Beide Operanden tragen das Suffix n. Werden hier unterschiedliche Zahlentypen gemischt?

5. 

Dynamischer Import

Was wird hier ausgegeben?

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

Die import()‑Funktion gibt ein Promise zurück, das zum Modul‑Objekt aufgelöst wird. Da Promise‑Instanzen Objekte sind, gibt typeof modulePromise 'object' aus.

Ein dynamischer Import liefert sofort ein Promise. Welchen Typ meldet typeof für ein Promise?

6. 

Promise.allSettled

Was wird das Ergebnis des folgenden Codes sein?

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

Promise.allSettled gibt ein Array von Objekten zurück, die das Ergebnis jeder Promise beschreiben. Die erste Promise ist fulfilled mit dem Wert 'success', daher wird die Log‑Anweisung fulfilled: success ausgeben.

allSettled liefert Ergebnisobjekte mit status und value beziehungsweise reason.

7. 

String.matchAll

Was gibt str.matchAll() zurück?

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

String.matchAll gibt einen Iterator von Treffern zurück, nicht ein Array. Dieser Iterator kann verwendet werden, um alle passenden Gruppen aus einem String zu erhalten.

matchAll ermöglicht schrittweisen Zugriff auf die Treffer. Das Ergebnis ist noch kein Array.

8. 

Import-Meta

Was stellt import.meta.url dar?

console.log(import.meta.url);

import.meta ist ein Objekt, das Metadaten über das aktuelle Modul enthält. Die Eigenschaft import.meta.url stellt die URL des aktuellen Moduls dar und kann verwendet werden, um Informationen darüber zu erhalten, wo das Skript ausgeführt wird.

import.meta beschreibt das aktuell ausgeführte Modul, nicht den Zeitpunkt des Imports.

9. 

Logische Zuweisung

Wie lautet der Wert von a nach der logischen Zuweisung?

let a = null;
a ||= 10;
console.log(a);

Die logische ODER‑Zuweisung (||=) weist den rechten Wert zu, wenn der linke Wert falsy ist (null, undefined, 0, false usw.). Da a null ist, wird ihr der Wert 10 zugewiesen.

Die logische ODER-Zuweisung greift bei falsy-Werten.

10. 

Logische Nullish-Zuweisung

Wie lautet der Wert von b nach der Nullish‑Zuweisung?

let b = null;
b ??= 10;
console.log(b);

Die Nullish‑Coalescing‑Zuweisung (??=) weist den rechten Wert zu, wenn der linke Wert null oder undefined ist. Da b null ist, wird ihr der Wert 10 zugewiesen.

Die Nullish-Zuweisung greift nur bei null oder undefined.

11. 

WeakRef

Was bietet WeakRef?

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

WeakRef liefert eine schwache Referenz auf ein Objekt, wodurch das Objekt vom Garbage Collector freigegeben werden kann, wenn keine anderen Referenzen mehr existieren. Da obj hier noch stark referenziert wird, gibt deref() das ursprüngliche Objekt zurück. Wäre das Ziel bereits freigegeben, würde deref() undefined zurückgeben.

obj hält noch eine starke Referenz auf das Zielobjekt.

Loading comments...