Häufig gestellte Fragen und Antworten in JavaScript-Interviews

Häufig gestellte Fragen und Antworten im JavaScript-Interview

Wenn Sie JavaScript in Ihrem Portfolio haben, erhöhen Sie Ihre Chancen auf eine Stelle als Softwareentwickler. Schauen wir uns auch die häufig gestellten JavaScript-Interview-Fragen an.

JavaScript ist eine der am häufigsten verwendeten Sprachen in der Webentwicklung. Sie wird heute für die Entwicklung fast aller Arten von Anwendungen verwendet.

Bevor wir uns mit den Fragen im Vorstellungsgespräch befassen, sollten wir uns die Vorteile des Erlernens von JavaScript ansehen.

JavaScript ist eine leichtgewichtige, interpretierte oder just-in-time kompilierte Programmiersprache. Sie ist eine der Kernsprachen des World Wide Web. Sie kennen die anderen beiden Kernsprachen des www. Wenn nicht, sollten Sie besser nach ihnen suchen.

JavaScript wurde hauptsächlich für das Web entwickelt. Aber es ist nicht mehr nur für das Web. Mit Hilfe von Umgebungen wie Knotenpunkt, Deno usw. können wir es auf fast jeder Plattform einsetzen.

Wir sehen uns einige Vorteile davon an.

Vorteile von JavaScript

Einfacher Einstieg. Sie können es auch ohne Programmierkenntnisse erlernen.
Eine große Community rund um JavaScript. Sie erhalten jede Hilfe, die Sie brauchen, wenn Sie irgendwo nicht weiterkommen.
Es gibt eine Vielzahl von Bibliotheken/Frameworks, die mit JavaScript erstellt wurden, was die Entwicklung von Anwendungen beschleunigt.
Wir können Frontend-, Backend-, Android-, iOS- usw. Anwendungen mit JavaScript entwickeln. Wir können damit fast jede Art von Anwendung erstellen. Aber bei der Webentwicklung ist es robuster.

Was sind die Datentypen in JavaScript?

Die Datentypen werden verwendet, um verschiedene Arten von Daten zu speichern. Die Datentypen unterscheiden sich von einer Programmiersprache zu anderen. In JavaScript haben wir 8 Datentypen. Schauen wir sie uns nacheinander an.

Zahl
Zeichenkette
Boolesch
Undefiniert
Null
BigInt
Symbol
Objekt

Alle Datentypen außer Objekt werden als primitive Werte bezeichnet. Und sie sind unveränderlich.

Was sind die eingebauten Methoden in JavaScript?

Die eingebauten Methoden in JavaScript sind für jeden Datentyp unterschiedlich. Wir können auf diese eingebauten Methoden über den jeweiligen Datentyp zugreifen. Sehen wir uns einige eingebaute Methoden für verschiedene Datentypen und Datenstrukturen an.

Zahl
- toFixed
- toString
- …
Zeichenkette
- toLowerCase
- startsWith
- chartAt
- …
Array
- Filter
- karte
- forEach
- …

Für jeden Datentyp gibt es eine Menge eingebauter Methoden. Sie können die Referenzen für alle eingebauten Methoden der verschiedenen Datentypen und Datenstrukturen überprüfen.

Wie erstellt man ein Array in JavaScript?

Arrays sind eine der wichtigsten Datenstrukturen in JavaScript. Da JavaScript dynamisch ist, können Arrays jede Art von Daten enthalten. Sehen wir uns an, wie man Arrays in JavaScript erstellt.

Wir können ein Array mit eckigen Klammern[] erstellen. Es ist einfach und schnell, Objekte zu erstellen

// Leeres Array
const arr = [];

// Array mit einigen Zufallswerten
const randomArr = [1, "One", true];

console.log(arr, randomArr);

Wir können ein Array mit dem Array-Konstruktor erstellen. In allgemeinen Projekten wird der Konstruktor nur selten zur Erstellung von Arrays verwendet.

// Leeres Array
const arr = new Array();

// Array mit einigen Zufallswerten
const randomArr = new Array(1, "One", true);

console.log(arr, randomArr);

JavaScript-Arrays sind veränderbar, d.h. wir können sie nach der Erstellung beliebig verändern.

Wie erstellt man ein Objekt in JavaScript?

Neben dem Array ist das Objekt eine weitere zentrale Datenstruktur in JavaScript. In Objekten werden Schlüssel-Wert-Paare gespeichert. Der Schlüssel muss ein unveränderlicher Wert sein, während der Wert ein beliebiger Wert sein kann. Schauen wir uns an, wie man Objekte in JavaScript erstellt.

Wir können Objekte mit geschweiften Klammern {} erstellen. Es ist einfach und schnell, Objekte zu erstellen.

// Leeres Objekt
const object = {};

// Objekt mit einigen Zufallswerten
const randomObject = { 1: 2, one: "Zwei", true: false };

console.log(object, randomObject);

Wir können Objekte mit dem Object-Konstruktor erstellen. In allgemeinen Projekten wird dies nur selten verwendet.

// Leeres Objekt
const object = new Object();

// Objekt mit einigen Zufallswerten
const randomObject = new Object();
randomObject[1] = 2;
randomObject["one"] = "Two";
randomObject[true] = false;

console.log(object, randomObject);

JavaScript-Objekte sind veränderbar, d.h. wir können sie nach der Erstellung ändern, wie Sie im 2. Beispiel sehen.

Wie kann man JavaScript-Code debuggen?

Das Debuggen von Code ist nicht ganz einfach. Und es ist von einer Programmiersprache zur anderen, von einem Projekt zum anderen usw. unterschiedlich. Sehen wir uns die üblichen Dinge an, die zum Debuggen von JavaScript verwendet werden.

#1. Protokollierung

Wir können die console.log-Anweisungen an mehreren Stellen in unserem Code verwenden, um den Fehler zu identifizieren. Der Code stoppt die Ausführung der nächsten Codezeilen, wenn in der vorherigen Zeile ein Fehler auftritt.

Die Protokollierung ist eine der alten Debugging-Methoden, die bei kleinen Projekten sehr effektiv ist. Es ist eine gängige Debugging-Technik für jede Programmiersprache.

#2. Tools für Entwickler

JavaScript wird hauptsächlich für die Entwicklung von Webanwendungen verwendet. Daher verfügen fast alle Browser über Entwickler-Tools, die beim Debuggen des JavaScript-Codes helfen.

Eine der am häufigsten verwendeten Debugging-Methoden ist das Setzen von Haltepunkten in den Entwicklertools. Die Haltepunkte halten die Ausführung von JavaScript an und geben alle Informationen über die Ausführung in diesem Moment wieder.

Wir können mehrere Haltepunkte um die Stelle herum setzen, an der wir Fehler erhalten, und sehen, was die Ursache dafür ist. Das ist die effektivste Methode zum Debuggen von JavaScript-Webanwendungen.

#3. IDEs

Wir können die IDEs zum Debuggen von JavaScript verwenden. VS Code unterstützt das Debuggen mit Haltepunkten. Die Debugging-Funktion kann sich je nach der von Ihnen verwendeten IDE unterscheiden. Aber die meisten IDEs verfügen über diese Funktion.

Wie füge ich JavaScript-Code in eine HTML-Datei ein?

Wir können die JavaScript-HTML-Datei mit dem Script-Tag einfügen. Sehen Sie sich das folgende Beispiel an.

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Geekflare</title>
 </head>
 <body>
 <h1>Geekflare</h1>

 <script>
 // JavaScript-Code kommt hier hin
 console.log("Dies ist JavaScript-Code");
 </script>
 </body>
</html&gt>

Was sind Cookies?

Cookies sind Schlüssel-Wert-Paare, die zum Speichern kleiner Informationen verwendet werden. Bei den Informationen kann es sich um alles Mögliche handeln. Wir können die Verfallszeit der Cookies festlegen, die dann nach Ablauf der Zeit gelöscht werden. Sie werden häufig verwendet, um die Informationen der Benutzer zu speichern.

Cookies werden nicht gelöscht, selbst wenn wir die Seite aktualisieren, bis wir sie löschen oder sie ablaufen. Sie können die Cookies jeder Webanwendung/Webseite in jedem Browser überprüfen, indem Sie die Entwicklerwerkzeuge öffnen.

Wir können das Cookie in JavaScript mit document.cookie auslesen. Es gibt alle Cookies zurück, die wir erstellt haben.

console.log("Alle Cookies", document.cookie);

Es wird eine leere Zeichenkette zurückgegeben, wenn keine Cookies vorhanden sind.

Wir können die Cookies erstellen, indem wir das Schlüssel-Wert-Paar in document.cookie eingeben. Lassen Sie uns ein Beispiel sehen.

document.cookie = "eins=Eins;";

In der obigen Syntax ist One der Schlüssel des Cookies und One ist sein Wert. Wir können dem Cookie weitere Attribute wie Domain, Pfad, Expires usw. hinzufügen; jedes dieser Attribute sollte durch ein Semikolon (;) getrennt werden. Alle Attribute sind optional.

Lassen Sie uns ein Beispiel mit Attributen sehen.

document.cookie = "one=Eins;expires=Jan 31 2023;path=/;";

In dem obigen Code haben wir dem Cookie ein Ablaufdatum und einen Pfad hinzugefügt. Wenn das Ablaufdatum nicht angegeben wird, wird das Cookie nach der Sitzung gelöscht. Der Standardpfad ist der Dateipfad. Das Format des Ablaufdatums sollte in GMT angegeben werden.

Schauen wir uns an, wie Sie mehrere Cookies erstellen können.

document.cookie = "one=Eins;expires=Jan 31 2023;path=/;";
document.cookie = "two=Zwei;expires=Jan 31 2023;path=/;";
document.cookie = "three=Drei;expires=Jan 31 2023;path=/;";

Die Cookies werden nicht überschrieben, wenn der Schlüssel oder Pfad beim Setzen mehrerer Cookies unterschiedlich ist. Wenn der Schlüssel und der Pfad gleich sind, wird das vorherige Cookie überschrieben. Sehen Sie sich das folgende Beispiel an, bei dem das zuvor gesetzte Cookie überschrieben wird.

document.cookie = "one=One;expires=Jan 31 2023;path=/;";
document.cookie = "one=Two;path=/;";

Wir haben das Verfallsdatum aus dem Cookie entfernt und den Wert geändert.

Verwenden Sie als Ablaufdatum ein zukünftiges Datum, wenn Sie den Code testen, damit er korrekt funktioniert. Wenn Sie das Datum 31. Januar 2023 auch nach dem 31. Januar 2023 beibehalten, werden die Cookies nicht erstellt.

Wir haben gesehen, wie Sie Cookies erstellen und aktualisieren können. Sehen wir uns nun an, wie Sie Cookies löschen können.

Das Löschen von Cookies ist ganz einfach. Ändern Sie einfach das Verfallsdatum des Cookies auf ein beliebiges Datum in der Vergangenheit. Sehen Sie sich das folgende Beispiel an.

// Erstellen von Cookies
document.cookie = "one=Eins;expires=Jan 31 2023;path=/;";
document.cookie = "two=Zwei;expires=Jan 31 2023;path=/;";
document.cookie = "drei=Drei;expires=Jan 31 2023;path=/;";

// Löschen des letzten Cookies
document.cookie = "drei=Drei;expires=Jan 1 2023;path=/;";

Sie werden das letzte Cookie nicht in den Cookies finden, da es in der letzten Zeile des Codes gelöscht wird. Das war's mit dem Tutorial über Cookies.

Was sind die verschiedenen JavaScript-Frameworks?

Es gibt eine ganze Reihe von JavaScript-Frameworks. React, Vue, Angular, usw. für die UI-Entwicklung. Express, Koa, Nest, usw., für die serverseitige Entwicklung. NächsteJSGatsby, usw., für die Erstellung statischer Websites. React Native, Ionic usw. für die Entwicklung mobiler Anwendungen. Wir haben hier einige der JavaScript-Frameworks erwähnt. Sie können noch weitere Frameworks finden, deren Erkundung viel Zeit in Anspruch nehmen wird. Erforschen Sie sie, wenn Sie sie brauchen.

Schließungen in JavaScript

Eine Closure ist eine Funktion, die mit ihrem lexikalischen Bereich und ihrer übergeordneten lexikalischen Umgebung gebündelt ist. Mit Closures können wir auf die Daten des äußeren Bereichs zugreifen. Die Closures werden bei der Erstellung der Funktionen gebildet.

function outer() {
 const a = 1;
 function inner() {
 // Wir können hier auf alle Daten aus dem äußeren Funktionsbereich zugreifen
 // Die Daten stehen auch dann zur Verfügung, wenn wir diese Funktion außerhalb der äußeren Funktion ausführen 
 // da die Closure von inner bei ihrer Erstellung gebildet wurde
 console.log("Zugriff auf a innerhalb von inner", a);
 }
 return inner;
}

const innerFn = outer();
innerFn();

Closures werden in JavaScript-Anwendungen häufig verwendet. Vielleicht haben Sie sie schon einmal verwendet, ohne zu wissen, dass es sich um Closures handelt. Es gibt noch viel mehr über Closures zu lernen. Stellen Sie sicher, dass Sie dieses Konzept vollständig gelernt haben.

Heben in JavaScript

Hoisting ist ein Prozess in JavaScript, bei dem die Deklaration von Variablen, Funktionen und Klassen vor der Ausführung des Codes an den Anfang des Anwendungsbereichs verschoben wird.

// Zugriff auf `name` vor der Deklaration
console.log(name);

// Deklaration und Initialisierung von `name`
var name = "Geekflare";

Wenn Sie den obigen Code ausführen, werden Sie keinen Fehler sehen. Aber in den meisten Sprachen werden Sie den Fehler erhalten. Die Ausgabe ist undefiniert, da die Deklarationen durch das Hailing nur nach oben verschoben werden und erst in Zeile 3 initialisiert werden.

Ändern Sie var wie folgt in let oder const und führen Sie den Code erneut aus.

// Zugriff auf `name` vor der Deklaration
console.log(name);

// Deklaration und Initialisierung von `name`
const name = "Geekflare";

Jetzt erhalten Sie den Referenzfehler, der besagt, dass wir nicht auf die Variable zugreifen können, bevor wir sie initialisiert haben.

ReferenzFehler: Kein Zugriff auf 'name' vor der Initialisierung möglich

Hier wurden auch let und const in ES6 eingeführt, auf die vor der Initialisierung nicht zugegriffen werden kann, wie der Fehler nahelegt. Das liegt daran, dass sich die mit let oder const deklarierten Variablen in der Temporal Dead Zone (TDZ) befinden, bis die Zeile initialisiert wird. Wir können von der TDZ aus nicht auf die Variablen zugreifen.

Curling in JavaScript

Currying ist eine Technik zur Umwandlung von Funktionen mit vielen Parametern in weniger Parameter mit mehreren Callables. Damit können wir eine aufrufbare Funktion add(a, b, c, d) in add(a)(b)(c)(d) callable umwandeln. Sehen wir uns ein Beispiel an, wie das geht.

function getCurryCallback(callback) {
 return function (a) {
 return function (b) {
 return function (c) {
 return function (d) {
 return callback(a, b, c, d);
       };
 };
 };
 };
}

function add(a, b, c, d) {
 return a b c d;
}

const curriedAdd = getCurryCallback(add);

// Aufrufen des curriedAdd
console.log(curriedAdd(1)(2)(3)(4));

Wir können die Funktion getCurryCallback verallgemeinern, die für verschiedene Funktionen verwendet wird, um sie in Curried Callables umzuwandeln. Weitere Einzelheiten dazu finden Sie in der JavaScript-Informationen.

Unterschied zwischen Dokument und Fenster

Das Fenster ist das oberste Objekt im Browser. Es enthält alle Informationen über das Browserfenster, wie Verlauf, Standort, Navigator usw.; es ist in JavaScript global verfügbar. Wir können es direkt in unserem Code verwenden, ohne es importieren zu müssen. Wir können auf die Eigenschaften und Methoden des window-Objekts ohne window zugreifen .

Das Dokument ist ein Teil des window-Objekts. Das gesamte HTML, das auf die Webseite geladen wird, wird in das document-Objekt umgewandelt. Das document-Objekt verweist auf das spezielle HTMLDocument-Element, das wie alle HTML-Elemente über verschiedene Eigenschaften und Methoden verfügt.

Das Window-Objekt steht für das Browser-Fenster und das Document-Objekt für das HTML-Dokument, das in dieses Browser-Fenster geladen wird.

Unterschied zwischen Client-Seite und Server-Seite

Die Client-Seite bezieht sich auf den Endbenutzer, der die Anwendung verwendet. Die Serverseite bezieht sich auf den Webserver, auf dem die Anwendung bereitgestellt wird.

In der Frontend-Terminologie können wir den Browser auf dem Computer des Benutzers als Client-Seite und die Cloud-Dienste als Server-Seite bezeichnen.

Unterschied zwischen innerHTML und innerText

Sowohl bei innerHTML auch bei innerText handelt es sich um Eigenschaften von HTML-Elementen. Mit diesen Eigenschaften können wir den Inhalt eines HTML-Elements ändern.

Wir können die Eigenschaft innerHTML einen HTML-String zuweisen, der wie normales HTML gerendert wird. Sehen Sie sich das folgende Beispiel an.

const titleEl = document.getElementById("title");

titleEl.innerHTML = '<span style="color:orange;">Geekflare</span>';

Fügen Sie ein Element mit der ID title zu Ihrem HTML-Code hinzu und fügen Sie das obige Skript in die JavaScript-Datei ein. Führen Sie den Code aus und sehen Sie sich die Ausgabe an. Sie sehen Geekflare in oranger Farbe. Und wenn Sie das Element untersuchen, befindet es sich innerhalb des span-Tags. Das innerHTML nimmt auch die HTML-Zeichenkette und rendert sie als normales HTML.

Der innerText auf der anderen Seite nimmt eine normale Zeichenkette und gibt sie so wieder, wie sie ist. Es wird kein HTML wie innerHTML wiedergeben. Ändern Sie im obigen Code das innerHTML in innerText und überprüfen Sie die Ausgabe.

const titleEl = document.getElementById("title");

titleEl.innerText = '<span style="color:orange;">Geekflare</span>';

Jetzt sehen Sie genau den String, den wir auf der Webseite angegeben haben.

Unterschied zwischen let und var

Die Schlüsselwörter let und var werden verwendet, um Variablen in JavaScript zu erstellen. Das Schlüsselwort let wurde in ES6 eingeführt.

Let ist ein block-scoped und var ist ein funktionsgebundenes Element.

{
 let a = 2;
 console.log("Innerhalb Block", a);
}
console.log("Außerhalb Block", a);

Führen Sie den obigen Code aus. Sie erhalten in der letzten Zeile eine Fehlermeldung, da wir nicht auf let a außerhalb des Blocks zugreifen können, da es block-scoped ist. Ändern Sie nun den Wert in var und führen Sie den Code erneut aus.

{
 var a = 2;
 console.log("Innerhalb des Blocks", a);
}
console.log("Außerhalb des Blocks", a);

Sie werden keine Fehlermeldung erhalten, da wir auch außerhalb des Blocks auf die Variable a zugreifen können. Setzen wir nun den Block durch eine Funktion ein.

function sample() {
 var a = 2;
 console.log("Inside function", a);
}
sample();
console.log("Outside function", a);

Wenn Sie den obigen Code ausführen, erhalten Sie einen Referenzfehler, da wir außerhalb der Funktion nicht auf var a zugreifen können, da sie funktionsgebunden ist.

Wir können die Variablen mit dem Schlüsselwort var neu deklarieren, aber nicht mit dem Schlüsselwort let. Lassen Sie uns ein Beispiel sehen.

var a = "Geekflare";
var a = "Chandan";
console.log(a);

let a = "Geekflare";
let a = "Chandan";
console.log(a);

Der erste Code löst keinen Fehler aus und der Wert von a wird auf den zuletzt zugewiesenen Wert geändert. Der 2. Teil des Codes wird einen Fehler auslösen, da wir Variablen nicht mit let neu deklarieren können.

Unterschied zwischen Sitzungsspeicher und lokalem Speicher

Der Sitzungsspeicher und der lokale Speicher werden verwendet, um Informationen auf den Computern der Benutzer zu speichern, auf die ohne Internet zugegriffen werden kann. Wir können die Schlüssel-Wert-Paare sowohl im Sitzungsspeicher als auch im lokalen Speicher speichern. Sowohl Schlüssel als auch Wert werden in Strings umgewandelt, wenn Sie einen anderen Datentyp oder eine andere Datenstruktur angeben.

Der Sitzungsspeicher wird gelöscht, wenn die Sitzung beendet ist (wenn der Browser geschlossen wird). Der Ortsspeicher wird erst gelöscht, wenn wir ihn löschen.

Mit den Objekten sessionStorage und localStorage können wir auf den Sitzungsspeicher und den Ortsspeicher zugreifen, sie aktualisieren und löschen.

Was ist NaN in JavaScript?

NaN ist die Abkürzung für Not-a-Number. Es steht dafür, dass etwas in JavaScript keine zulässige/gültige Zahl ist. Es gibt einige Fälle, in denen wir NaN als Ausgabe erhalten, z.B. 0/0, undefiniert * 2, 1 undefiniert, null * undefiniert usw..,

Was ist lexikalisches Scoping?

Der lexikalische Geltungsbereich bezieht sich auf den Zugriff auf die Variablen aus dem Geltungsbereich ihrer Eltern. Nehmen wir an, wir haben eine Funktion mit zwei inneren Funktionen. Die innerste Funktion kann auf die Variablen des Bereichs ihrer beiden übergeordneten Funktionen zugreifen. In ähnlicher Weise kann die Funktion der 2. Ebene auf den Bereich der äußersten Funktion zugreifen. Lassen Sie uns das an einem Beispiel sehen.

function outermost() {
 let a = 1;
 console.log(a);
 function middle() {
 let b = 2;
 // `a` sind hier zugänglich
 console.log(a, b);
 function innermost() {
 let c = 3;
 // sowohl `a` als auch `b` sind hier zugänglich
 console.log(a, b, c);
 }
 innermost();
 }
 middle();
}
outermost();

JavaScript verwendet eine Bereichskette, um die Variable zu finden, wenn wir irgendwo im Code auf sie zugreifen. Zuerst wird die Variable im aktuellen Bereich, dann im übergeordneten Bereich und schließlich im globalen Bereich überprüft.

Was ist Wertübergabe und Referenzübergabe?

Die Wertübergabe und die Referenzübergabe sind zwei Möglichkeiten, die Argumente an eine Funktion in JavaScript zu übergeben.

Wertübergabe: Es wird eine Kopie der ursprünglichen Daten erstellt und an die Funktion weitergegeben. Wenn wir auch Änderungen in der Funktion vornehmen, hat dies keine Auswirkungen auf die Originaldaten. Sehen Sie sich das folgende Beispiel an.

function sample(a) {
 // Ändern Sie den Wert von `a`
 a = 5;
 console.log("Inside function", a);
}
let a = 3;
sample(a);
console.log("Outside function", a);

Sie werden sehen, dass der ursprüngliche Wert von a nicht geändert wird, obwohl wir ihn innerhalb der Funktion geändert haben.

Übergabe durch Referenz: Die Referenz der Daten wird an die Funktion übergeben. Wenn wir auch eine Änderung in der Funktion vornehmen, werden auch die ursprünglichen Daten geändert.

function sample(arr) {
 // Hinzufügen eines neuen Wertes zum Array
 arr.push(3);
 console.log("Inside function", arr);
}
let arr = [1, 2];
sample(arr);
console.log("Outside function", arr);

Sie werden sehen, dass der ursprüngliche Wert von arr geändert wird, wenn wir ihn innerhalb der Funktion ändern.

Hinweis: Alle primitiven Datentypen werden als Wert übergeben, und nicht-primitive werden als Referenz übergeben.

Was ist Memoisierung?

Die Memoisierung ist eine Technik, bei der die berechneten Werte in Caches gespeichert werden und bei erneutem Bedarf verwendet werden, ohne dass sie erneut berechnet werden müssen. Dadurch wird die Ausführung des Codes beschleunigt, wenn die Berechnung sehr umfangreich ist. Es gibt einen Kompromiss beim Speicherplatz, der aber im Vergleich zur Zeit keine große Rolle spielt.

const memo = {};
function add(a, b) {
 const key = `${a}-${b}`;

 // Überprüfung, ob wir den Wert bereits berechnet haben oder nicht
 if (memo<x><x><x>[key]</x></x></x>) {
 console.log("Nicht erneut berechnen");
 return memo<x><x><x>[key]</x></x></x>;
 }

 // Hinzufügen des neu berechneten Wertes zum Cache
 // hier ist der Cache ein einfaches globales Objekt
 memo<x><x><x>[Schlüssel]</x></x></x> = a b;
 return memo<x><x><x>[Schlüssel]</x></x></x>;
}

console.log(add(1, 2));
console.log(add(2, 3));
console.log(add(1, 2));

Dies ist ein einfaches Beispiel, das die Memoisierung demonstriert. Das Hinzufügen von zwei Zahlen ist hier keine schwere Rechenaufgabe. Es ist nur für die Demo.

Was ist der Rest-Parameter?

Der Restparameter wird verwendet, um alle verbleibenden Parameter in einer Funktion zu sammeln. Nehmen wir an, wir haben eine Funktion, die mindestens 2 Argumente akzeptiert und maximal eine beliebige Anzahl von Parametern annehmen kann. Da wir nicht die maximale Anzahl von Argumenten haben, können wir die ersten 2 Parameter mit normalen Variablen und alle anderen mit dem Restparameter sammeln, indem wir den Restoperator verwenden.

function sample(a, b, ...rest) {
 console.log("Restparameter", rest);
}

sample(1, 2, 3, 4, 5);

Der rest-Parameter ist im obigen Beispiel ein Array mit den letzten drei Argumenten. Auf diese Weise können wir eine beliebige Anzahl von Parametern für eine Funktion haben.

Eine Funktion kann nur einen Restparameter haben. Und der restliche Parameter sollte der letzte in der Reihenfolge der Parameter sein.

Was ist Objekt-Destrukturierung?

Die Objektdestrukturierung wird verwendet, um auf die Variablen des Objekts zuzugreifen und ihnen Variablen zuzuweisen, die denselben Namen wie die Objektschlüssel haben. Lassen Sie uns ein Beispiel sehen.

const object = { a: 1, b: 2, c: 3 };

// Destrukturierung von Objekten
const { a, b, c } = object;

// Jetzt werden a, b, c als normale Variablen verwendet
console.log(a, b, c);

Wir können die Variablen der destrukturierten Variablen in der gleichen Zeile wie folgt ändern.

const object = { a: 1, b: 2, c: 3 };

// Ändern der Namen von `a` und `b`
const { a: changedA, b: changedB, c } = object;

// Jetzt werden changedA, changedB, c als normale Variablen verwendet
console.log(changedA, changedB, c);

Was ist Array-Destrukturierung?

Die Array-Destrukturierung wird verwendet, um auf die Variablen des Arrays zuzugreifen und sie Variablen zuzuweisen. Lassen Sie uns ein Beispiel sehen.

const array = [1, 2, 3];

// Array-Destrukturierung
// Sie basiert auf dem Index des Arrays
const [a, b, c] = array;

// Jetzt können wir a, b, c als normale Variablen verwenden
console.log(a, b, c);

Was sind Event Capturing und Event Bubbling?

Veranstaltung Einfangen und Event Bubbling sind zwei Arten der Ereignisweitergabe im HTML DOM. Nehmen wir an, es gibt zwei HTML-Elemente, eines in einem anderen. Und ein Ereignis tritt bei dem inneren Element auf. Der Modus der Ereignisausbreitung entscheidet nun über die Reihenfolge der Ausführung dieser Ereignisse.

Event Bubbling: Der Event-Handler wird zuerst auf dem Element ausgeführt, dann auf dessen Element und dann bis zum obersten Element. Dies ist das Standardverhalten für alle Ereignisse.

Event Capturing: Wir müssen im Ereignis angeben, dass wir diese Art der Ereignisausbreitung verwenden möchten. Wir können dies beim Hinzufügen des Ereignis-Listeners angeben. Die Ereignisse werden in der folgenden Reihenfolge ausgeführt, wenn wir die Ereignisaufzeichnung aktiviert haben.

Die Ereignisse werden vom obersten Element aus ausgeführt, bis das Zielelement unten ist.
Das Ereignis auf dem Zielelement wird erneut ausgeführt.
Die blubbernde Ereignisfortpflanzung findet erneut statt, bis das oberste Element oben ist.

Wir können die Ereignisfortpflanzung stoppen, indem wir die Methode event.stopPropogation im Event-Handler aufrufen.

Was sind die Promises in JavaScript?

Das Objekt Promise wird für asynchrone Operationen verwendet, die in der Zukunft mit einem Erfolgs- oder Misserfolgsstatus abgeschlossen werden sollen.

Ein Promise kann sich in einem der folgenden Zustände befinden.

pending - wenn die Operation noch im Gange ist.
erfüllt - wenn die Operation erfolgreich abgeschlossen wurde. Wir haben Ergebnisse (falls vorhanden) im Erfolgsstatus.
abgelehnt - wenn der Vorgang mit einem Fehler abgeschlossen wurde. Wir haben den Grund (Fehler), warum der Vorgang fehlgeschlagen ist.

Lassen Sie uns zwei Beispiele für erfolgreiche und fehlgeschlagene Vorgänge betrachten.

// Promise, das erfolgreich abgeschlossen wird
const successPromise = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve({ message: "Erfolgreich abgeschlossen" });
 }, 300);
});
successPromise
.then((data) => {
 console.log(data);
 })
.catch((error) => {
 console.log(error);
 });

// Versprechen, das mit einem Fehlerstatus abgeschlossen wird
constPromise = new Promise((resolve, reject) => {
 setTimeout(() => {
 reject(new Error("Das Versprechen ist zum Testen fehlgeschlagen"));
 }, 300);
});
failurePromise
.then((data) => {
 console.log(data);
 })
.catch((error) => {
 console.log(error);
 });

Sie können bei Bedarf mehr als eine Verkettung haben. Die zuvor zurückgegebenen Daten werden in den nächsten then-Callback übernommen.

Erklären Sie die verschiedenen Arten von Gültigkeitsbereichen in JavaScript

Es gibt zwei Arten von Geltungsbereichen in JavaScript. Den globaler Bereich und den lokaler Bereich.

Vielleicht haben Sie auch schon vom Funktionsbereich und vom Blockbereich gehört. Das sind lokale Geltungsbereiche für var und let bzw. const.

Was sind selbst-aufrufende Funktionen?

Die selbstaufrufenden Funktionen sind namenlose Funktionen, die sofort nach ihrer Erstellung ausgeführt werden. Lassen Sie uns einige Beispiele sehen.

// Ohne Parameter
(function sayHello() {
 console.log("Hallo, Welt!");
})();

// Mit Parametern
(function add(a, b) {
 console.log("Summe", a b);
})(1, 2);

Wir können sogar die Argumente an die sich selbst aufrufenden Funktionen übergeben, wie Sie im Beispiel gesehen haben.

Was sind Pfeilfunktionen?

Die Pfeilfunktion ist ein syntaktischer Zucker zur normalen Funktion mit einigen Änderungen. Sie verhalten sich in allgemeinen Anwendungsfällen wie normale Funktionen. Pfeilfunktionen sind sehr nützlich, wenn wir Rückrufe haben müssen. Schauen wir uns ihre Syntax an.

// Pfeilfunktionen geben standardmäßig zurück, wenn sie keine Klammern haben
let add = (a, b) => a b;

console.log(add(1, 2));

Es gibt einige Unterschiede zwischen den Pfeilfunktionen und normalen Funktionen.

Pfeilfunktionen haben keine eigenen this-Bindung. Das this-Schlüsselwort innerhalb der Pfeilfunktion verweist auf ihren übergeordneten Bereich this.
Pfeilfunktionen können nicht als Konstruktorfunktionen verwendet werden

Was sind Rückrufe?

Ein Callback ist eine Funktion, die an eine andere Funktion übergeben wird, die dann innerhalb dieser Funktion aufgerufen wird. Die Verwendung von Rückrufen ist in JavaScript weit verbreitet. Lassen Sie uns ein Beispiel sehen.

function sample(a, b, callback) {
 const result = a b;
 callback(result);
}

function finished(result) {
 console.log("Beendet mit", result);
}

sample(1, 2, finished);

Die Funktion finished wird als Callback an das Beispiel übergeben. Die Funktion finished wird mit dem Ergebnis aufgerufen, nachdem eine Aktion ausgeführt wurde. Sie werden sehen, dass Callbacks hauptsächlich bei asynchronen Operationen wie Versprechen, setTimeout usw. verwendet werden,

Was sind die verschiedenen Fehlertypen?

Lassen Sie uns einige Fehler in JavaScript überprüfen.

ReferenceError: Dieser Fehler tritt auf, wenn die Variable, auf die wir zugreifen, verfügbar ist.

TypFehler: JavaScript gibt diesen Fehler aus, wenn der Fehler nicht mit anderen Fehlertypen übereinstimmt. Er tritt auch auf, wenn wir versuchen, eine Aktion auszuführen, die nicht mit den Daten kompatibel ist.

SyntaxFehler: Dieser Fehler tritt auf, wenn die JavaScript-Syntax nicht korrekt ist.

Es gibt noch einige andere Arten von Fehlern. Aber dies sind die häufigsten Fehlertypen in JavaScript.

Was sind die verschiedenen Geltungsbereiche von Variablen in JavaScript?

Es gibt zwei Bereiche von Variablen in JavaScript. Die Variablen, die mit dem Schlüsselwort var deklariert werden, haben den Geltungsbereich einer Funktion und die Variablen, die mit let und const deklariert werden, haben den Geltungsbereich eines Blocks.

In der 17. Frage finden Sie weitere Einzelheiten über den Geltungsbereich dieser Variablen.

Was sind Escape-Zeichen in JavaScript?

Der Backslash ist das Escape-Zeichen in JavaScript. Es wird verwendet, um einige Sonderzeichen zu drucken, die wir im Allgemeinen nicht drucken können. Nehmen wir an, wir möchten ein Hochkomma (') innerhalb einer Zeichenkette ausgeben, was normalerweise nicht möglich ist, da die Zeichenkette am zweiten Hochkomma endet. In diesem Fall verwenden wir das Escape-Zeichen, um zu verhindern, dass die Zeichenkette an dieser Stelle endet.

const message = 'Hallo, ich bin Geekflare';
console.log(message);

Wir können die obige Ausgabe auch ohne Escape-Zeichen erreichen, indem wir die äußeren einfachen Apostrophe durch doppelte Apostrophe ersetzen. Aber das ist nur ein Beispiel für die Verwendung eines Escape-Zeichens. Es gibt andere Zeichen, für die wir definitiv ein Escape-Zeichen benötigen, wie z.B. \n, \t, \\ usw..,

Was sind BOM und DOM?

Browser-Objektmodell (BOM): Alle Browser haben ein BOM, das das aktuelle Browserfenster darstellt. Es enthält unser oberstes Fensterobjekt, das zur Manipulation des Browserfensters verwendet wird.

Dokument-Objektmodell (DOM): Browser erstellen das DOM, wenn das HTML in der Baumstruktur geladen wird. Wir können die HTML-Elemente mit Hilfe der DOM-API manipulieren.

Was ist ein Bildschirmobjekt?

Das Bildschirm-Objekt ist eine der Eigenschaften des globalen Fensterobjekts. Es enthält verschiedene Eigenschaften des Bildschirms, auf dem das aktuelle Browserfenster gerendert wird. Einige der Eigenschaften sind Breite, Höhe, Ausrichtung, pixelDepth, usw.