Beispiel-JavaScript-Karteikarten aus unserer App

Laden Sie unsere App aus dem App Store oder Google Play herunter, um mehr kostenlose Lernkarten zu erhalten, oder abonnieren Sie für Zugriff auf alle Lernkarten.

Was ist lexikalischer Geltungsbereich in JavaScript?

Lexikalischer Bereich in JavaScript ist ein Prinzip, bei dem der Sichtbarkeitsbereich einer Variablen durch ihre Position im Code bestimmt wird. Das bedeutet, dass Variablen innerhalb des Blocks, in dem sie definiert wurden, sowie in allen verschachtelten Blöcken zugänglich sind. Dies ermöglicht die Erstellung von Closures und die Kontrolle über den Variablenzugriff. Beispiel für die Verwendung des lexikalischen Bereichs im JavaScript-Code:

function outerFunction() {
  let outerVariable = `Ich bin draußen!`;

  function innerFunction() {
    console.log(outerVariable); // Hat Zugang zu 'outerVariable'
  }

  innerFunction();
}
outerFunction(); // Zeigt `Ich bin draußen!`

Der lexikalische Bereich ermöglicht es einer inneren Funktion, auf Variablen zuzugreifen, die in einer äußeren Funktion definiert wurden, auch nachdem die äußere Funktion abgeschlossen ist. Dies ist ein Schlüsselelement bei der Erstellung von Closures in JavaScript, das eine flexiblere Verwaltung des Zustands in Anwendungen ermöglicht.

Was ist Hoisting?

"Heben" ist ein Mechanismus in JavaScript-Sprachen, bei dem Variablen und Funktionen an den Anfang ihres Geltungsbereichs verschoben werden, bevor der Code ausgeführt wird. In der Praxis bedeutet dies, dass wir Funktionen oder Variablen verwenden können, bevor sie tatsächlich deklariert wurden.

Es sollte jedoch beachtet werden, dass das Heben für Variablen und Funktionen leicht unterschiedlich funktioniert.

Für mit var deklarierte Variablen wird nur die Deklaration gehoben, nicht die Initialisierung. Vor der Deklaration initialisierte Variablen werden als undefiniert zurückgegeben.

Ein Beispiel für Heben-Code für Variablen:

console.log(myVar); // undefiniert
var myVar = 5;
console.log(myVar); // 5

Bei Funktionen verschiebt das Heben sowohl die Deklaration als auch die Definition der Funktion nach oben, was die Verwendung der Funktion vor ihrer Deklaration ermöglicht.

Ein Beispiel für Hebe-Code für Funktionen:

console.log(myFunction()); // "Hallo Welt"

function myFunction() {
  return "Hallo Welt";
}

Das Heben tritt nicht auf für Variablen, die mit let und const deklariert wurden.

Was ist eine Pfeilfunktion und welche Vorteile bietet sie?

Eine Pfeilfunktion, auch bekannt als Pfeilfunktion, ist eine Art von Funktion, die in ECMAScript 6 (ES6) eingeführt wurde. Sie werden Pfeilfunktionen genannt, weil sie eine spezielle Syntax mit einem Pfeil ( => ) zur Definition der Funktion verwenden.

Zum Vergleich könnte eine herkömmliche Funktion so aussehen:

function sum(a, b) {
  return a + b;
}

Ihr Äquivalent als Pfeilfunktion ist:

const sum = (a, b) => a + b;

Der Hauptvorteil einer Pfeilfunktion besteht darin, dass sie keinen eigenen Ausführungskontext (Bindung an this) erstellt, was oft eine Fehlerquelle in JavaScript ist. Bei Pfeilfunktionen wird this vom umgebenden Kontext geerbt. Ein weiterer Vorteil ist die Kürze der Syntax, besonders nützlich, wenn Funktionen als Argumente für andere Funktionen verwendet werden, z.B. in Funktionen höherer Ordnung.

Andererseits sind Pfeilfunktionen aufgrund des Fehlens eines eigenen this nicht geeignet für die Definition von Konstruktor (kreativen) Objekten oder für die Erstellung von Methoden in Prototyp-Objekten.

Was ist ein Promise-Objekt und wie kann es verwendet werden?

Das Promise-Objekt in JavaScript wird verwendet, um asynchrone Operationen zu verarbeiten. Ein Promise stellt einen Wert dar, der zum Zeitpunkt der Erstellung des Promise möglicherweise noch nicht verfügbar ist, aber in Zukunft verfügbar sein könnte, oder auch nie.

Ein Promise-Objekt kann in einem von drei Zuständen sein:
1. Pending - Die Operation läuft noch, sie ist weder erfolgreich abgeschlossen noch mit Fehlern beendet.
2. Fulfilled - Die Operation wurde erfolgreich abgeschlossen, Promise hat einen Wert zurückgegeben.
3. Rejected - Die Operation wurde mit einem Fehler abgeschlossen, Promise hat den Grund für den Fehler zurückgegeben.

Ein Promise, das erfüllt oder abgewiesen wurde, gilt als "abgewickelt" und sein Zustand ändert sich nie.

Erstellen eines Promise-Objekts:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operation erfolgreich.');
  } else {
    reject('Operation fehlgeschlagen.');
  }
});

Verwendung eines Promise-Objekts:

promise
  .then(result => {
    console.log(result); // Gibt aus: 'Operation erfolgreich.'
  })
  .catch(error => {
    console.log(error);
  });

Die .then()-Methode wird ausgeführt, wenn das Promise erfüllt ist, und .catch(), wenn es abgelehnt wird. In beiden Fällen wird das Ergebnis der Operation oder der Grund für die Ablehnung des Promise als Argument übergeben.

Was ist ein Callback?

Ein Callback, auch als Callback-Funktion bezeichnet, ist eine Funktion, die als Argument an eine andere Funktion übergeben und dann nach Abschluss dieser Funktion ausgeführt (zurückgerufen) wird. Callback-Funktionen werden häufig in JavaScript verwendet, insbesondere bei asynchronen Operationen wie AJAX-Anfragen oder Ereignisbehandlung.

Callback-Funktionen erhalten in der Regel die Ergebnisse einer bestimmten Operation als Argumente, sodass sie für die Verarbeitung oder Analyse dieser Ergebnisse verwendet werden können.

Die Verwendung einer solchen Funktion in der Praxis könnte wie folgt aussehen:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Time passed!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('This is a callback!');
}, 2000);

In diesem Fall erhält die Funktion `executeAfterTimeout` eine `callback`-Funktion als Parameter, die ausgeführt wird, nachdem eine bestimmte Zeit verstrichen ist. Callback-Funktionen sind äußerst nützlich für die Verwaltung des asynchronen Kontrollflusses in JavaScript.

Was ist der Nullish Coalescing Operator und wie funktioniert er?

Der Nullish Coalescing Operator (??) ist ein logischer Operator, der die rechte Seite der Operation zurückgibt, wenn die linke Seite null oder undefiniert ist. Mit anderen Worten, wenn eine Variable leer ist, gibt der Nullish Coalescing Operator den definierten Wert als Ergebnis zurück.

Die Grundnotation ist:

let value = null ?? 'default value';

In diesem Fall, da die linke Seite (value) null ist, ist das Ergebnis 'default value'. Zusätzlich unterscheidet sich dieser Operator vom OR-Operator (||), da die OR-Funktion die rechte Seite zurückgibt, wenn die linke Seite falsch ist (falsch, 0, '', null, undefiniert, NaN), während der Nullish Coalescing Operator lediglich die rechte Seite zurückgibt, wenn die linke Seite null oder undefiniert ist.

Beispiel mit OR:

let value1 = 0 || 'default';
console.log(value1); // Ausgabe: 'default' weil 0 ist ein falscher Wert

Beispiel mit nullish coalescing:

let value2 = 0 ?? 'default';
console.log(value2); // Ausgabe: 0 weil 0 ist nicht null oder undefiniert

Also, im Unterschied zu OR, behandelt der Nullish Coalescing Operator 0, '' und NaN nicht als "leere" Werte.

Was ist Symbol und wann sollte es verwendet werden?

Ein Symbol in JavaScript ist ein einzigartiger und unveränderlicher Datentyp, der oft dazu verwendet wird, einzigartige Eigenschaften von Objekten zu identifizieren.

Ein Symbol kann durch Aufrufen des Symbol() Konstruktors erstellt werden, welcher jedes Mal, wenn er aufgerufen wird, ein einzigartiges Symbol erstellt. Selbst wenn wir den Symbol() Konstruktor mit dem gleichen Argument aufrufen, wird jedes erstellte Symbol anders sein.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // gibt false zurück

Symbole werden oft dazu verwendet, (einzigartige) Eigenschaften von Objekten zu definieren, insbesondere wenn wir möchten, dass diese Eigenschaft verborgen oder privat ist. Es deckt auch Eigenschaften ab, die nicht berücksichtigt werden, wenn über Objekte mit for...in oder for...of iteriert wird und die nicht von der Object.keys() Methode zurückgegeben werden. Darüber hinaus ermöglichen Symbole das Erstellen von "Pseudo"-privaten Eigenschaften.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'Das ist privat';

console.log(obj[privateProperty]); // 'Das ist privat'
console.log(Object.keys(obj)); // []

Es gibt keine definitiven Regel dafür, wann man Symbol verwenden sollte. Normalerweise werden sie verwendet, wenn wir eine einzigartige Eigenschaft auf einem Objekt erstellen möchten, die nicht leicht gesehen oder geändert werden kann, oder wir Methoden definieren möchten, die das Verhalten von Objekten auf einer niedrigen Ebene beeinflussen.

Was sind WeakMap und WeakSet?

WeakMap und WeakSet sind spezielle Versionen von JavaScript Map und Set Objekten, die eine automatische Speicherfreigabe durch den Garbage Collector nicht verhindern.

WeakMap ist eine Sammlung von Schlüssel-Wert-Paaren, bei denen die Schlüssel Objekte sein müssen und die Werte alles sein können. Der Hauptunterschied zwischen Map und WeakMap besteht darin, dass die Schlüssel in WeakMap "schwach" gehalten werden, was bedeutet, dass, wenn es keine weiteren Referenzen auf das Schlüsselobjekt gibt, es vom Garbage Collector gelöscht wird und sein Eintrag in WeakMap automatisch entfernt wird.

Hier ist ein Beispiel für die Verwendung von WeakMap:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // überschreiben der Referenz

// john wird aus dem Speicher entfernt!

WeakSet ist ähnlich wie WeakMap zu Map. Es ist eine Sammlung von Objekten, aber es verhindert nicht die Garbage Collection, wenn das Objekt nirgends sonst sichtbar ist. Es fehlen typische Set-Methoden wie `size` und `clear`, und die `add`-Methode akzeptiert nur Objekte.

Beispiel für die Verwendung von WeakSet:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // überschreiben der Referenz

// john wird aus dem Speicher entfernt!

Sowohl WeakMap als auch WeakSet werden hauptsächlich in Situationen verwendet, in denen wir zusätzliche Informationen über Objekte speichern möchten, die entfernt werden sollen, wenn das Objekt selbst entfernt wird.

JavaScript-Karteikarten