Häufig gestellte Fragen und Antworten zu JavaScript-Interviews

JavaScript in Ihrem Portfolio zu haben, erhöht die Chancen, eine Rolle als Softwareentwickler zu bekommen. Schauen wir uns dennoch die häufig gestellten Fragen zu JavaScript-Interviews an.

JavaScript ist eine der am häufigsten verwendeten Sprachen in der Webentwicklung. Es wird jetzt verwendet, um fast jede Art von Anwendung zu entwickeln.

Bevor wir uns den Interviewfragen zuwenden, sehen wir uns die Vorteile des Erlernens von JavaScript an.

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

JavaScript wird hauptsächlich für das Web erstellt. Aber es ist nicht nur für das Web jetzt. Mit Hilfe von Umgebungen wie Knoten, Deno, usw., wir können es auf fast jeder Plattform ausführen.

Schauen wir uns einige Vorteile davon an.

Vorteile von JavaScript

Einfach loslegen. Sie können es auch ohne Programmierkenntnisse lernen.
Große Community drumherum. Sie erhalten alle Hilfe, die Sie wollen, wenn Sie irgendwo feststecken.
Es gibt viele Bibliotheken/Frameworks, die mit JavaScript erstellt wurden, was dazu beiträgt, Anwendungen schneller zu entwickeln.
Wir können Frontend-, Backend-, Android-, iOS- usw. Anwendungen mit JavaScript entwickeln. Wir können damit fast jede Art von Anwendung erstellen. Aber es ist robuster in der Webentwicklung.

What are the data types in JavaScript?

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

Nummer
Schnur
Boolean
Undefiniert
Null
BigInt
Symbol
Betreff

Alle Datentypen außer Betreff werden primitive Werte genannt. Und sie sind unveränderlich.

What are the built-in methods in JavaScript?

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

Nummer
- zuFixed
- toString
- ...
Schnur
- toLowerCase
- beginnt mit
- DiagrammAt
- ...
Feld
- Filter
- Karte
- für jeden
- ...

Es gibt viele eingebaute Methoden für jeden Datentyp. Sie können die Referenzen für alle eingebauten Methoden verschiedener Datentypen und Datenstrukturen überprüfen.

How to create an array in JavaScript?

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

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

// Empty array
const arr = [];

// Array with some random values
const randomArr = [1, "One", true];

console.log(arr, randomArr);

Wir können ein Array mit erstellen Array Konstrukteur. Der Konstruktor wird selten verwendet, um Arrays in allgemeinen Projekten zu erstellen.

// Empty array
const arr = new Array();

// Array with some random values
const randomArr = new Array(1, "One", true);

console.log(arr, randomArr);

JavaScript-Arrays sind änderbar, dh wir können sie nach dem Erstellen beliebig ändern.

How to create an object in JavaScript?

Neben dem Array ist das Objekt eine weitere zentrale Datenstruktur in JavaScript. Objekte verwenden die Schlüssel-Wert-Paare speichern. Der Schlüssel muss ein unveränderlicher Wert sein, während der Wert beliebig sein kann. Sehen wir uns an, wie Objekte in JavaScript erstellt werden.

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

// Empty object
const object = {};

// Object with some random values
const randomObject = { 1: 2, one: "Two", true: false };

console.log(object, randomObject);

Wir können Objekte mit erstellen Object Konstrukteur. Leute verwenden dies selten in allgemeinen Projekten.

// Empty object
const object = new Object();

// Object with some random values
const randomObject = new Object();
randomObject[1] = 2;
randomObject["one"] = "Two";
randomObject[true] = false;

console.log(object, randomObject);

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

How do you debug JavaScript code?

Das Debuggen von Code ist nicht einfach. Und es unterscheidet sich von einer Programmiersprache zur anderen, von einem Projekt zum anderen usw.; Sehen wir uns die allgemeinen Dinge an, die zum Debuggen von JavaScript verwendet werden.

# 1. Protokollierung

Wir können das benutzen console.log Anweisungen an mehreren Stellen in unserem Code, um den Fehler zu identifizieren. Der Code stoppt die Ausführung der nächsten Codezeilen, wenn es einen Fehler in der vorherigen Zeile gibt.

Die Protokollierung ist eine der alten Debugging-Methoden, die für kleine Projekte ziemlich effektiv ist. Es ist eine gängige Debugging-Technik für jede Programmiersprache.

# 2. Entwicklertools

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

Eine der am häufigsten verwendeten Debugging-Methoden ist das Setzen von Breakpoints in den Entwicklertools. Die Haltepunkte stoppen die Ausführung von JavaScript und geben alle Informationen über die Ausführung im Moment aus.

Wir können mehrere Haltepunkte um die Stelle herum setzen, an der wir Fehler erhalten, und sehen, was sie verursacht. Dies ist die effektivste Methode zum Debuggen von JavaScript-Webanwendungen.

# 3. IDEs

Wir können die IDEs verwenden, um JavaScript zu debuggen. VS Code unterstützt das Debuggen mit Haltepunkten. Die Debugging-Funktion kann je nach verwendeter IDE unterschiedlich sein. Aber die meisten IDEs haben diese Funktion.

How to add JavaScript code in an HTML file?

Wir können die JavaScript-HTML-Datei mithilfe von hinzufügen script Schild. Sie können das Beispiel unten überprüfen.

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

    <script>
      // JavaScript code goes here
      console.log("This is JavaScript code");
    </script>
  </body>
</html>

What are cookies?

Cookies sind Schlüssel-Wert-Paare, die zum Speichern kleiner Informationen verwendet werden. Die Informationen können alles sein. Wir können die Ablaufzeit der Cookies einstellen, die nach ihrer Ablaufzeit gelöscht werden. Diese 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 Entwicklertools öffnen.

Wir können das Cookie in JavaScript lesen document.cookie. Es werden alle von uns erstellten Cookies zurückgegeben.

console.log("All cookies", document.cookie);

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

Wir können die Cookies erstellen, indem wir das Schlüssel-Wert-Paar auf setzen document.cookie. Sehen wir uns ein Beispiel an.

document.cookie = "one=One;";

In der obigen Syntax ist die one Cookie-Schlüssel und One ist sein Wert. Wir können dem Cookie weitere Attribute wie Domain, Pfad, Ablaufdatum usw. hinzufügen. jeder von ihnen sollte durch a getrennt werden Semikolon (;). Alle Attribute sind optional.

Sehen wir uns ein Beispiel mit Attributen an.

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

Im 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 GMT sein.

Sehen wir uns an, wie Sie mehrere Cookies erstellen.

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

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

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

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

Verwenden Sie als Ablaufdatum ein Datum in der Zukunft, wenn Sie den Code testen, damit er richtig funktioniert. Wenn Sie das gleiche Datum einhalten Jan 31 2023 auch nach dem Jan 31 2023, Cookies werden nicht erstellt.

Wir haben gesehen, wie Cookies erstellt und aktualisiert werden. Sehen wir uns an, wie Cookies gelöscht werden.

Das Löschen von Cookies ist einfach. Ändern Sie einfach das Ablaufdatum des Cookies auf ein beliebiges vergangenes Datum. Sehen Sie sich das Beispiel unten an.

// Creating cookies
document.cookie = "one=One;expires=Jan 31 2023;path=/;";
document.cookie = "two=Two;expires=Jan 31 2023;path=/;";
document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

// Deleting the last cookie
document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

Das letzte Cookie finden Sie nicht in den Cookies, da es in der letzten Zeile des Codes gelöscht wird. Das war's für das Min-Cookies-Tutorial.

What are the different JavaScript frameworks?

Es gibt eine Menge von JavaScript-Frameworks dort draußen. React, Vue, Angular usw. für die UI-Entwicklung. Express, Koa, Nest usw. für die serverseitige Entwicklung. WeiterJS, Gatsby usw. für die Generierung statischer Websites. React Native, Ionic usw. für die Entwicklung mobiler Apps. Wir haben hier einige der JavaScript-Frameworks erwähnt. Sie können weitere Frameworks finden, deren Erforschung viel Zeit in Anspruch nehmen wird. Entdecken Sie, wann Sie sie brauchen.

Closures in JavaScript

Ein Abschluss ist eine Funktion, die mit ihrem lexikalischen Gültigkeitsbereich und ihrer übergeordneten lexikalischen Umgebung gebündelt ist. Mit Closures können wir auf die Outer-Scope-Daten zugreifen. Die Closures werden gebildet, wenn die Funktionen erstellt werden.

function outer() {
  const a = 1;
  function inner() {
    // We can access all the data from the outer function scope here
    // The data will be available even if we execute this function outside the outer function 
    // as inners' closure formed while creating it
    console.log("Accessing a inside inner", a);
  }
  return inner;
}

const innerFn = outer();
innerFn();

Closures werden häufig in JavaScript-Anwendungen verwendet. Möglicherweise haben Sie sie schon einmal verwendet, ohne zu bemerken, dass es sich um Verschlüsse handelt. Es gibt noch viel mehr über die Schließungen zu erfahren. Stellen Sie sicher, dass Sie dieses Konzept vollständig gelernt haben.

Hoisting in JavaScript

Hoisting ist ein Prozess in JavaScript, bei dem die Deklaration von Variablen, Funktionen und Klassen an den Anfang des Gültigkeitsbereichs verschoben wird, bevor der Code ausgeführt wird.

// Accessing `name` before declaring
console.log(name);

// Declaring and initializing the `name`
var name = "Geekflare";

Wenn Sie den obigen Code ausführen, wird kein Fehler angezeigt. In den meisten Sprachen erhalten Sie jedoch den Fehler. Die Ausgabe wird sein undefined da das Heben die Deklarationen nur nach oben verschiebt und sie erst in Zeile 3 initialisiert.

Ändern Sie die var zu let or const wie folgt, und führen Sie den Code erneut aus.

// Accessing `name` before declaring
console.log(name);

// Declaring and initializing the `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.

ReferenceError: Cannot access 'name' before initialization

Also, hier die let und const werden in ES6 eingeführt, auf die vor der Initialisierung nicht zugegriffen werden kann, wie der Fehler andeutet. Dies liegt daran, dass die mit deklarierten Variablen mit let or const wird sich in der Temporal Dead Zone (TDZ) befinden, bis die Zeile initialisiert wird. Wir können nicht auf die Variablen von TDZ zugreifen.

Currying in JavaScript

Currying ist eine Technik, um Funktionen mit vielen Parametern in weniger Parameter mit mehreren Callables umzuwandeln. Damit können wir eine aufrufbare Funktion add(a, b, c, d) in add(a)(b)(c)(d) aufrufbar umwandeln. Sehen wir uns ein Beispiel an, wie es 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);

// Calling the curriedAdd
console.log(curriedAdd(1)(2)(3)(4));

Wir können die verallgemeinern getCurryCallback die Funktion, die für verschiedene Funktionen verwendet wird, um sie in Currying Callables umzuwandeln. Sie können sich darauf beziehen JavaScript-Info für mehr Details darüber.

Difference between document and window

Dieses window ist das oberste Objekt im Browser. Es enthält alle Informationen über das Browserfenster, wie Verlauf, Standort, Navigator usw.; es ist weltweit in JavaScript verfügbar. Wir können es ohne Importe direkt in unserem Code verwenden. Wir können auf die Eigenschaften und Methoden der zugreifen window Objekt ohne window.

Dieses document ist der Teil von window Objekt. Das gesamte auf der Webseite geladene HTML wird in das Dokumentobjekt konvertiert. Das document-Objekt bezieht sich auf das spezielle HTMLDocument-Element, das wie alle HTML-Elemente andere Eigenschaften und Methoden haben wird.

Dieses window das Objekt repräsentiert das Browserfenster und document stellt das in diesem Browserfenster geladene HTML-Dokument dar.

Difference between client-side and server-side

Die Clientseite 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 Browser auf den Computern der Benutzer als Client-Seite und Cloud-Dienste als Server-Seite bezeichnen.

Difference between innerHTML and innerText

Beide innerHTML und innerText sind die Eigenschaften von HTML-Elementen. Mit diesen Eigenschaften können wir den Inhalt eines HTML-Elements ändern.

Wir können den HTML-String zuweisen innerHTML eine Eigenschaft, die wie normales HTML gerendert wird. Überprüfen Sie das folgende Beispiel.

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

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

Fügen Sie ein Element mit der ID hinzu title zu Ihrem HTML und fügen Sie das obige Skript zur JavaScript-Datei hinzu. Führen Sie den Code aus und sehen Sie sich die Ausgabe an. Du wirst Geekflare in oranger Farbe. Und wenn Sie das Element untersuchen, befindet es sich im Inneren span Schild. Also die innerHTML nimmt den HTML-String und rendert ihn als normales HTML.

Dieses innerText auf der anderen Seite nimmt eine normale Zeichenfolge und rendert sie so, wie sie ist. Es wird kein HTML wie dargestellt innerHTML. Ändere das innerHTML zu innerText in den obigen Code und überprüfen Sie die Ausgabe.

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

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

Jetzt sehen Sie genau die Zeichenfolge, die wir auf der Webseite bereitgestellt haben.

Difference between let and var

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

Dieses let ist ein blockbezogenes und var ist funktionsbezogen.

{
  let a = 2;
  console.log("Inside block", a);
}
console.log("Outside block", a);

Führen Sie den obigen Code aus. Sie erhalten eine Fehlermeldung in der letzten Zeile, da wir nicht darauf zugreifen können let a außerhalb des Blocks, weil es blockbezogen ist. Ändern Sie es jetzt in var und führen Sie es erneut aus.

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

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

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

Sie erhalten einen Referenzfehler, wenn Sie den obigen Code ausführen, da wir nicht darauf zugreifen können var a es außerhalb der Funktion, weil es funktionsbezogen ist.

Wir können die Variablen mit neu deklarieren var Schlüsselwort, aber wir können die Variablen nicht mit neu deklarieren let Stichwort. Sehen wir uns ein Beispiel an.

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

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

Das erste Stück Code löst keinen Fehler aus und der Wert ist a wird auf den zuletzt zugewiesenen Wert geändert. Der zweite Codeabschnitt löst einen Fehler aus, da wir Variablen nicht mit neu deklarieren können let.

Difference between session storage and local storage

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 Zeichenfolgen konvertiert, wenn Sie einen anderen Datentyp oder eine andere Datenstruktur angeben.

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

Wir können auf Sitzungsspeicher und Standortspeicher zugreifen, ihn aktualisieren und löschen sessionStorage und localStorage Objekte bzw.

What is NaN in JavaScript?

Dieses NaN wird abgekürzt als Keine-Nummer. Es stellt dar, dass etwas in JavaScript keine legale/gültige Zahl ist. Es gibt einige Fälle, wo wir bekommen NaN als Ausgabe wie 0/0, undefined * 2, 1 + undefined, null * undefined usw..,

What is Lexical scoping?

Der lexikalische Geltungsbereich bezieht sich auf den Zugriff auf die Variablen aus dem Geltungsbereich seiner Eltern. Nehmen wir an, wir haben eine Funktion mit zwei inneren Funktionen. Die innerste Funktion kann auf die Bereichsvariablen ihrer beiden übergeordneten Funktionen zugreifen. Ebenso kann die 2nd-Level-Funktion auf den äußersten Funktionsumfang zugreifen. Sehen wir es uns an einem Beispiel an.

function outermost() {
  let a = 1;
  console.log(a);
  function middle() {
    let b = 2;
    // `a` are accessible here
    console.log(a, b);
    function innermost() {
      let c = 3;
      // both `a` and `b` are accessible here
      console.log(a, b, c);
    }
    innermost();
  }
  middle();
}
outermost();

JavaScript verwendet eine Bereichskette, um die Variable zu finden, wenn wir irgendwo im Code darauf zugreifen. Zuerst wird die Variable im aktuellen Bereich und dann im übergeordneten Bereich bis zum globalen Bereich überprüft.

What is passed by value and passed by reference?

Dieses Wert weitergeben und als Referenz weitergeben Es gibt zwei Möglichkeiten, die Argumente an eine Funktion in JavaScript zu übergeben.

Wertübergabe: Es erstellt eine Kopie der Originaldaten und übergibt sie an die Funktion. Wenn wir also Änderungen an der Funktion vorgenommen haben, wirkt sich dies nicht auf die ursprünglichen Daten aus. Überprüfen Sie das folgende Beispiel.

function sample(a) {
  // changing the value of `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 der a wird nicht geändert, obwohl wir es innerhalb der Funktion geändert haben.

Nach Referenz weitergeben: es übergibt die Referenz der Daten an die Funktion. Wenn wir also Änderungen an der Funktion vorgenommen haben, werden dadurch auch die ursprünglichen Daten geändert.

function sample(arr) {
  // adding a new value to the 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 der arr wird geändert, wenn wir es innerhalb der Funktion ändern.

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

What is memoization?

Memoization ist eine Technik, die die berechneten Werte in Caches speichert und sie verwendet, wenn wir sie erneut benötigen, ohne sie erneut zu berechnen. Es beschleunigt die Ausführung des Codes, wenn die Berechnung sehr umfangreich ist. Es gibt einen Speicherkompromiß, der im Vergleich zur Zeit kein großes Problem darstellt.

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

  // checking whether we computed the value already or not
  if (memo[key]) {
    console.log("Not computing again");
    return memo[key];
  }

  // adding the newly computed value to cache
  // here cache is a simple global object
  memo[key] = a + b;
  return memo[key];
}

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

Es ist ein einfaches Beispiel, das das Auswendiglernen demonstriert. Hier ist das Addieren von zwei Zahlen keine schwere Rechenaufgabe. Es ist nur für die Demo.

What is the rest parameter?

Dieses Ruheparameter 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 akzeptieren kann. Da wir nicht die maximale Anzahl an Argumenten haben, können wir die ersten 2 Parameter mit normalen Variablen sammeln und alle anderen mit der Ruheparameter Verwendung der Ruhebetreiber.

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

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

Dieses Ruhe Parameter wird ein Array der letzten drei Argumente im obigen Beispiel sein. Damit können wir beliebig viele Parameter für eine Funktion haben.

Eine Funktion kann nur einen Ruheparameter haben. Und der rest-Parameter sollte der letzte in der Reihenfolge der Parameter sein.

What is object destructuring?

Die Objektdestrukturierung wird verwendet, um auf die Variablen des Objekts zuzugreifen und sie Variablen mit denselben Namen wie Objektschlüssel zuzuweisen. Sehen wir uns ein Beispiel an.

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

// Object destructuring
const { a, b, c } = object;

// Now, a, b, c will be used as normal variables
console.log(a, b, c);

Wir können die Variablen von destrukturierten Variablen in derselben Zeile wie folgt ändern.

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

// Changing the names of `a` and `b`
const { a: changedA, b: changedB, c } = object;

// Now, changedA, changedB, c will be used as normal variables
console.log(changedA, changedB, c);

What is array destructuring?

Die Array-Destrukturierung wird verwendet, um auf die Variablen aus dem Array zuzugreifen und sie Variablen zuzuweisen. Sehen wir uns ein Beispiel an.

const array = [1, 2, 3];

// Array destructuring
// It's based on the index of the array
const [a, b, c] = array;

// Now, we can use a, b, c as normal variables
console.log(a, b, c);

What are event capturing and event bubbling?

Ereignis Capturing und Ereignis sprudelt gibt zwei Möglichkeiten der Ereignisweitergabe in HTML DOM. Nehmen wir an, es gibt zwei HTML-Elemente, eines in einem anderen. Und am inneren Element tritt ein Ereignis auf. Nun entscheidet der Ereignisausbreitungsmodus über die Reihenfolge der Ausführung dieser Ereignisse.

Ereignissprudeln: Es führt den Event-Handler zuerst auf dem Element aus, dann auf dessen Element und dann ganz nach oben zum obersten Element. Dies ist das Standardverhalten aller Ereignisse.

Ereigniserfassung: wir müssen für den Fall angeben, dass wir diese Art der Ereignisweitergabe verwenden müssen. Wir können es beim Hinzufügen des Ereignis-Listeners angeben. Die Ereignisse werden in der folgenden Reihenfolge ausgeführt, wenn die Ereigniserfassung aktiviert ist.

Die Ereignisse beginnen mit der Ausführung vom obersten Element bis zum Zielelement nach unten.
Das Ereignis auf dem Zielelement wird erneut ausgeführt.
Die Sprudelereignisausbreitung findet erneut statt, bis das oberste Element oben ist.

Wir können die Ereignisausbreitung stoppen, indem wir anrufen event.stopPropogation eine Methode im Ereignishandler.

What are the Promises in JavaScript?

Dieses Promise Das Objekt wird für die asynchronen Operationen verwendet, die in Zukunft mit einem Erfolgs- oder Fehlerstatus abgeschlossen werden.

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

pending – wenn der Vorgang noch läuft.
fulfilled – wenn der Vorgang erfolgreich abgeschlossen wurde. Wir werden Ergebnisse (falls vorhanden) im Erfolgszustand haben.
rejected – wenn der Vorgang mit einem Fehler abgeschlossen wurde. Wir werden den Grund (Fehler) haben, warum es fehlgeschlagen ist.

Sehen wir uns zwei Beispiele für Erfolgs- und Fehlerfälle an.

// Promise which will complete successfully
const successPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({ message: "Completed successfully" });
  }, 300);
});
successPromise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

// Promise which will complete with failure state
const failurePromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Failing the promise for testing"));
  }, 300);
});
failurePromise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

Du kannst mehr als einen haben then Verkettung ggf. Die zuvor zurückgesendeten Daten werden im nächsten übernommen then Ruf zurück.

Explain the different types of scope in JavaScript

Es gibt zwei Arten von Bereichen in JavaScript. Die globalen Präsenz und lokaler Geltungsbereich.

Möglicherweise haben Sie auch vom Funktionsumfang und Blockumfang gehört. Sie sind lokale Bereiche für var und let, const beziehungsweise.

What are self-invoking functions?

Die selbstaufrufenden Funktionen sind namenlose Funktionen, die unmittelbar nach der Erstellung ausgeführt werden. Sehen wir uns einige Beispiele an.

// Without any parameters
(function sayHello() {
  console.log("Hello, World!");
})();

// With parameters
(function add(a, b) {
  console.log("Sum", a + b);
})(1, 2);

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

What are arrow functions?

Die Pfeilfunktion ist syntaktischer Zucker zur normalen Funktion mit einigen Änderungen. Sie verhalten sich in allgemeinen Anwendungsfällen wie normale Funktionen. Pfeilfunktionen sind praktisch, wenn Rückrufe erforderlich sind. Sehen wir uns seine Syntax an.

// arrow functions will return by default if it doesn't have any brackets
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 Das Schlüsselwort innerhalb der Pfeilfunktion bezieht sich auf den übergeordneten Gültigkeitsbereich this.
Pfeilfunktionen können nicht als Konstruktorfunktionen verwendet werden

What are callbacks?

Ein Callback ist eine Funktion, die an eine andere Funktion übergeben wird, die innerhalb dieser Funktion aufgerufen wird. Die Verwendung von Rückrufen ist in JavaScript üblich. Sehen wir uns ein Beispiel an.

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

function finished(result) {
  console.log("Finished with", result);
}

sample(1, 2, finished);

Die Funktion finished wird als Callback an die übergeben sampledem „Vermischten Geschmack“. Seine finished Die Funktion wird mit dem Ergebnis aufgerufen, nachdem eine Aktion ausgeführt wurde. Sie werden die Verwendung von Rückrufen hauptsächlich in asynchronen Vorgängen wie Promises, setTimeout usw. sehen.

What are the different types of errors?

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

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

Typfehler: JavaScript löst diesen Fehler aus, wenn der Fehler nicht mit anderen Fehlertypen übereinstimmt. Es tritt auch auf, wenn wir versuchen, eine Aktion auszuführen, die mit den Daten nicht kompatibel ist.

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

Es gibt auch einige andere Arten von Fehlern. Dies sind jedoch die häufigsten Fehlertypen in JavaScript.

What are the different scopes of variables in JavaScript?

Es gibt zwei Bereiche von Variablen in JavaScript. Die mit der deklarierten Variablen var Schlüsselwort haben Funktionsumfang, und die mit deklarierten Variablen let und const werde das haben Blockbereich.

Weitere Einzelheiten zum Geltungsbereich dieser Variablen finden Sie in der 17. Frage.

What are escape characters in JavaScript?

Der Backslash ist das Fluchtzeichen in JavaScript. Es wird verwendet, um einige Sonderzeichen zu drucken, die wir im Allgemeinen nicht drucken können. Angenommen, wir möchten drucken apostrophe (') innerhalb eines Strings, was wir normalerweise nicht tun können, da der String am zweiten Apostroph endet. In diesem Fall verwenden wir das Escape-Zeichen, um zu vermeiden, dass die Zeichenfolge an dieser Stelle endet.

const message = 'Hi, I\'m Geekflare';
console.log(message);

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

What are BOM and DOM?

Browser-Objektmodell (BOM): Alle Browser haben eine Stückliste, die das aktuelle Browserfenster darstellt. Es enthält unser oberstes Fensterobjekt, das zum Manipulieren des Browserfensters verwendet wird.

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

What is a screen object?

Dieses 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, Orientierung, PixelTiefe, usw.