berblick ber die JavaScript-Sprache

Datentypen

Beginnen wir mit den Bausteinen jeder Sprache: den Typen. JavaScript-Programme manipulieren Werte, und all diese Werte gehren einem Typ an. JavaScript bietet sieben Primitivtypen:

• Number: wird fr alle Zahlenwerte (Ganzzahlen und Gleitkommazahlen) verwendet, auer fr sehr groe Ganzzahlen.
• BigInt: wird fr beliebig groe Ganzzahlen verwendet.
• String: wird zur Speicherung von Text verwendet.
• Boolean: true und false normalerweise fr bedingte Logik verwendet.
• Symbol: wird zur Erstellung eindeutiger Identifikatoren verwendet, die nicht kollidieren.
• Undefined: zeigt an, dass einer Variablen kein Wert zugewiesen wurde.
• Null: deutet auf einen vorstzlichen Nicht-Wert hin.

Alles andere wird als ein Objekt bezeichnet. Hufige Objekttypen sind:

• Function
• Array
• Map
• RegExp
• Error

Funktionen sind in JavaScript keine speziellen Datenstrukturen - sie sind nur eine spezielle Art von Objekten, die aufgerufen werden knnen.

Zahlen

JavaScript hat zwei eingebaute numerische Typen: Number und BigInt.

Der Number-Typ ist ein IEEE 754 64-Bit-Doppelgenauigkeits-Gleitkommawert, was bedeutet, dass ganze Zahlen sicher zwischen -(253 1) und 253 1 ohne Przisionsverlust dargestellt werden knnen, und Gleitkommazahlen knnen bis zu 1.79 10308 gespeichert werden. Innerhalb von Zahlen unterscheidet JavaScript nicht zwischen Gleitkommazahlen und Ganzzahlen.

console.log(3 / 2); // 1.5, not 1

Ein offensichtlicher Ganzzahl ist also in Wirklichkeit implizit eine Gleitkommazahl. Aufgrund der IEEE 754-Codierung kann die Gleitkommaarithmetik manchmal ungenau sein.

console.log(0.1 + 0.2); // 0.30000000000000004

Bei Operationen, die Ganzzahlen erwarten, wie z.B. bitweise Operationen, wird die Zahl in eine 32-Bit-Ganzzahl konvertiert.

Zahlenliterale knnen auch Prfixe haben, um die Basis (binr, oktal, dezimal oder hexadezimal) anzugeben, oder ein Exponenten-Suffix.

console.log(0b111110111); // 503
console.log(0o767); // 503
console.log(0x1f7); // 503
console.log(5.03e2); // 503

Der BigInt-Typ ist ein Ganzzahl mit beliebiger Lnge. Sein Verhalten ist hnlich wie bei C-Ganzzahltypen (z.B. wird die Division auf null abgeschnitten), auer dass er unbegrenzt wachsen kann. BigInts werden mit einem Zahlenliteral und einem n-Suffix angegeben.

console.log(-3n / 2n); // -1n

Die standardmigen arithmetischen Operatoren werden untersttzt, einschlielich Addition, Subtraktion, Restarithmetik, usw. BigInts und Nummern knnen in arithmetischen Operationen nicht gemischt werden.

Das Math-Objekt bietet standardmige mathematische Funktionen und Konstanten.

Math.sin(3.5);
const circumference = 2 * Math.PI * r;

Es gibt drei Mglichkeiten, eine Zeichenkette in eine Zahl umzuwandeln:

• parseInt(), das die Zeichenkette fr eine Ganzzahl analysiert.
• parseFloat(), das die Zeichenkette fr eine Gleitkommazahl analysiert.
• Die Number()-Funktion, die eine Zeichenkette so analysiert, als wre sie ein Zahlenliteral und viele verschiedene Zahlenreprsentationen untersttzt.

Sie knnen auch das unre Plus + als Abkrzung fr Number() verwenden.

Zahlenwerte umfassen auch NaN (kurz fr "Not a Number") und Infinity. Viele "ungltige mathematische" Operationen werden NaN zurckgeben - zum Beispiel, wenn versucht wird, eine nicht-numerische Zeichenkette zu parsen, oder bei der Verwendung von Math.log() auf einem negativen Wert. Die Division durch null erzeugt Infinity (positiv oder negativ).

NaN ist ansteckend: Wenn Sie ihn als Operanden fr irgendeine mathematische Operation bereitstellen, wird das Ergebnis ebenfalls NaN sein. NaN ist der einzige Wert in JavaScript, der nicht gleich sich selbst ist (laut IEEE 754-Spezifikation).

Zeichenketten

Zeichenketten in JavaScript sind Sequenzen von Unicode-Zeichen. Dies sollte eine gute Nachricht fr jeden sein, der mit Internationalisierung zu tun hatte. Genauer gesagt sind sie UTF-16 kodiert.

console.log("Hello, world");
console.log(""); // Nearly all Unicode characters can be written literally in string literals

Zeichenketten knnen mit einfachen oder doppelten Anfhrungszeichen geschrieben werden JavaScript unterscheidet nicht zwischen Zeichen und Zeichenketten. Wenn Sie ein einzelnes Zeichen darstellen mchten, verwenden Sie einfach eine Zeichenkette, die aus diesem einzelnen Zeichen besteht.

console.log("Hello"[1] === "e"); // true

Um die Lnge einer Zeichenkette (in Code-Einheiten) zu finden, greifen Sie auf ihre length-Eigenschaft zu.

Zeichenketten haben Hilfsmethoden, um die Zeichenkette zu manipulieren und Informationen ber die Zeichenkette zu erhalten. Da alle Primitiven von Design aus unvernderlich sind, geben diese Methoden neue Zeichenketten zurck.

Der + Operator ist fr Zeichenketten berladen: Wenn einer der Operanden eine Zeichenkette ist, fhrt er eine Zeichenkettenverkettung statt einer Zahlenaddition durch. Eine spezielle Template Literal-Syntax ermglicht es, Zeichenketten mit eingebetteten Ausdrcken knapper zu schreiben. Im Gegensatz zu Pythons f-strings oder C#'s interpolierten Zeichenketten verwenden Template Literale Backticks (keine einfachen oder doppelten Anfhrungszeichen).

const age = 25;
console.log("I am " + age + " years old."); // String concatenation
console.log(`I am ${age} years old.`); // Template literal

Andere Typen

JavaScript unterscheidet zwischen null, das einen absichtlichen Nicht-Wert anzeigt (und nur ber das null-Schlsselwort zugnglich ist), und undefined, das das Fehlen eines Wertes anzeigt. Es gibt viele Mglichkeiten, undefined zu erhalten:

• Eine return-Anweisung ohne Wert (return;) gibt implizit undefined zurck.
• Der Zugriff auf eine nicht existierende Objekt-Eigenschaft (obj.iDontExist) gibt undefined zurck.
• Eine Variablendeklaration ohne Initialisierung (let x;) initialisiert die Variable implizit mit undefined.

JavaScript hat einen Boolean-Typ, mit mglichen Werten true und false, die beide Schlsselworte sind. Jeder Wert kann basierend auf den folgenden Regeln in einen Boolean umgewandelt werden:

1. false, 0, leere Zeichenketten (""), NaN, null und undefined werden alle zu false.
2. Alle anderen Werte werden zu true.

Sie knnen diese Umwandlung explizit mit der Boolean()-Funktion durchfhren:

Boolean(""); // false
Boolean(234); // true

Dies ist jedoch selten notwendig, da JavaScript diese Umwandlung automatisch durchfhrt, wenn es einen Boolean erwartet, z.B. in einer if-Anweisung (siehe Steuerstrukturen). Aus diesem Grund sprechen wir manchmal von "truthy" und "falsy", was Werte bedeutet, die in booleschen Kontexten zu true bzw. false werden.

Boolesche Operationen wie && (logisches und), || (logisches oder) und ! (logisches nicht) werden untersttzt; siehe Operatoren.

Der Symboltyp wird oft verwendet, um eindeutige Identifikatoren zu erstellen. Jedes mit der Symbol()-Funktion erstellte Symbol ist garantiert eindeutig. Auerdem gibt es registrierte Symbole, die gemeinsam genutzte Konstanten sind, und bekannte Symbole, die von der Sprache als Protokolle fr bestimmte Operationen verwendet werden. Mehr darber erfahren Sie im Symbolreferenz.

Variablen

Variablen in JavaScript werden mit einem der drei Schlsselwrter deklariert: let, const oder var.

let ermglicht es Ihnen, Block-Level-Variablen zu deklarieren. Die deklarierte Variable ist ab dem Block verfgbar, in dem sie eingeschlossen ist.

let a;
let name = "Simon";

// myLetVariable is *not* visible out here

for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
  // myLetVariable is only visible in here
}

// myLetVariable is *not* visible out here

const ermglicht es Ihnen, Variablen zu deklarieren, deren Werte sich niemals ndern sollen. Die Variable ist ab dem Block verfgbar, in dem sie deklariert ist.

const Pi = 3.14; // Declare variable Pi
console.log(Pi); // 3.14

Eine mit const deklarierte Variable kann nicht neu zugewiesen werden.

const Pi = 3.14;
Pi = 1; // will throw an error because you cannot change a constant variable.

const-Deklarationen verhindern nur Neuzuweisungen sie verhindern nicht nderungen des Variablenwerts, wenn es sich um ein Objekt handelt.

const obj = {};
obj.a = 1; // no error
console.log(obj); // { a: 1 }

var-Deklarationen knnen berraschende Verhaltensweisen aufweisen (zum Beispiel sind sie nicht blocklokal) und werden in modernem JavaScript-Code nicht empfohlen.

Wenn Sie eine Variable deklarieren, ohne ihr einen Wert zuzuweisen, ist ihr Wert undefined. Sie knnen keine const-Variable ohne einen Initialisierer deklarieren, da Sie sie spter ohnehin nicht ndern knnen.

let- und const-deklarierte Variablen besetzen immer noch den gesamten Umfang, in dem sie definiert sind, und befinden sich in einem Bereich, der als temporal dead zone bezeichnet wird, vor der tatschlichen Deklarationszeile. Dies hat einige interessante Wechselwirkungen mit der Variablenschattung, die in anderen Sprachen nicht vorkommen.

function foo(x, condition) {
  if (condition) {
    console.log(x);
    const x = 2;
    console.log(x);
  }
}

foo(1, true);

In den meisten anderen Sprachen wrde dies "1" und "2" protokollieren, da vor der Zeile const x = 2 x immer noch auf den Parameter x im ueren Gltigkeitsbereich verweisen sollte. In JavaScript, da jede Deklaration den gesamten Gltigkeitsbereich besetzt, wrde dies einen Fehler bei der ersten console.log-Anweisung auslsen: "Cannot access 'x' before initialization". Weitere Informationen finden Sie auf der Referenzseite von let.

JavaScript ist dynamisch typisiert. Typen (wie in dem vorherigen Abschnitt beschrieben) sind nur mit Werten, aber nicht mit Variablen assoziiert. Bei let-deklarierten Variablen knnen Sie ihren Typ immer durch Neuzuweisung ndern.

let a = 1;
a = "foo";

Operatoren

JavaScripts numerische Operatoren umfassen +, -, *, /, % (Restwert) und ** (Potenzierung). Werte werden mittels = zugewiesen. Jeder binre Operator hat auch ein zusammengesetztes Zuweisungsquivalent wie += und -=, die sich zu x = x operator y erweitern.

x += 5;
x = x + 5;

Sie knnen ++ und -- verwenden, um zu inkrementieren bzw. zu dekrementieren. Diese knnen als Prfix- oder Postfixoperatoren verwendet werden.

Der + Operator fhrt auch eine Zeichenkettenverkettung durch:

"hello" + " world"; // "hello world"

Wenn Sie einer Zahl (oder einem anderen Wert) eine Zeichenkette hinzufgen, wird alles zuerst in eine Zeichenkette konvertiert. Dies knnte Sie berraschen:

"3" + 4 + 5; // "345"
3 + 4 + "5"; // "75"

Das Hinzufgen einer leeren Zeichenkette zu etwas ist eine ntzliche Mglichkeit, es selbst in eine Zeichenkette zu konvertieren.

Vergleiche in JavaScript knnen mit <, >, <= und >= durchgefhrt werden, die sowohl fr Zeichenketten als auch fr Zahlen funktionieren. Fr die Gleichheit fhrt der doppelgleich Operator eine Typumwandlung durch, wenn Sie ihm verschiedene Typen bergeben, mit manchmal interessanten Ergebnissen. Andererseits versucht der dreifachgleich Operator keine Typumwandlung und wird normalerweise bevorzugt.

123 == "123"; // true
1 == true; // true

123 === "123"; // false
1 === true; // false

Der doppelgleich und dreifachgleich-Operator haben auch ihre Ungleichheitsgegenstcke: != und !==.

JavaScript hat auch bitweise Operatoren und logische Operatoren. Bemerkenswert ist, dass logische Operatoren nicht nur mit booleschen Werten arbeiten sie arbeiten nach der Wahrhaftigkeit des Wertes.

const a = 0 && "Hello"; // 0 because 0 is "falsy"
const b = "Hello" || "world"; // "Hello" because both "Hello" and "world" are "truthy"

Die Operatoren && und || verwenden Kurzschlusslogik, was bedeutet, dass die Ausfhrung ihres zweiten Operanden von ihrem ersten abhngt. Dies ist ntzlich, um null Objekte zu berprfen, bevor auf deren Attribute zugegriffen wird:

const name = o && o.getName();

Oder um Werte zwischenzuspeichern (wenn falsy-Werte ungltig sind):

const name = cachedName || (cachedName = getName());

Fr eine umfassende Liste von Operatoren siehe die Leitfaden-Seite oder den Referenzabschnitt. Sie knnten besonders an der Operatorprzedenz interessiert sein.

Grammatik

Die JavaScript-Grammatik ist der C-Familie sehr hnlich. Es gibt einige Punkte, die erwhnenswert sind:

• Bezeichner knnen Unicode-Zeichen haben, aber sie drfen keine der reservierten Wrter sein.
• Kommentare sind blicherweise // oder /* */, whrend viele andere Skriptsprachen wie Perl, Python und Bash # verwenden.
• Semikolons sind in JavaScript optional - die Sprache fgt sie automatisch ein, wenn ntig. Es gibt jedoch bestimmte Vorsichtsmanahmen, auf die Sie achten sollten, da Semikolons im Gegensatz zu Python immer noch Teil der Syntax sind.

Fr einen detaillierten Blick auf die JavaScript-Grammatik siehe die Referenzseite fr lexikalische Grammatik.

Steuerstrukturen

JavaScript hat eine hnliche Menge an Steuerstrukturen wie andere Sprachen der C-Familie. Bedingte Anweisungen werden von if und else untersttzt; Sie knnen sie verkettet verwenden:

let name = "kittens";
if (name === "puppies") {
  name += " woof";
} else if (name === "kittens") {
  name += " meow";
} else {
  name += "!";
}
name === "kittens meow";

JavaScript hat kein elif, und else if ist wirklich nur ein else-Zweig, der aus einer einzigen if-Anweisung besteht.

JavaScript verfgt ber while-Schleifen und do...while-Schleifen. Die erste ist gut fr grundlegende Schleifen; die zweite ist fr Schleifen, bei denen Sie sicherstellen mchten, dass der Schleifenkrper mindestens einmal ausgefhrt wird:

while (true) {
  // an infinite loop!
}

let input;
do {
  input = get_input();
} while (inputIsNotValid(input));

Die for-Schleife von JavaScript ist die gleiche wie in C und Java: Sie ermglicht es Ihnen, die Steuerungsinformationen fr Ihre Schleife in einer einzigen Zeile anzugeben.

for (let i = 0; i < 5; i++) {
  // Will execute 5 times
}

JavaScript enthlt auch zwei andere prominente Schleifen: for...of, die ber iterierbare Elemente, insbesondere Arrays, iteriert, und for...in, die alle enumerable Eigenschaften eines Objekts besucht.

for (const value of array) {
  // do something with value
}

for (const property in object) {
  // do something with object property
}

Die switch-Anweisung kann fr mehrere Verzweigungen basierend auf Gleichheitsprfungen verwendet werden.

switch (action) {
  case "draw":
    drawIt();
    break;
  case "eat":
    eatIt();
    break;
  default:
    doNothing();
}

hnlich wie in C sind Case-Klauseln konzeptionell die gleichen wie Labels, sodass, wenn Sie eine break-Anweisung nicht hinzufgen, die Ausfhrung auf die nchste Ebene "fllt". Sie sind jedoch keine tatschlichen Sprungtabellen jeder Ausdruck kann Teil der Case-Klausel sein, nicht nur Zeichen- oder Zahlenliterale, und sie wrden nacheinander ausgewertet, bis einer dem Wert entspricht, der abgeglichen wird. Der Vergleich erfolgt zwischen den beiden mit dem ===-Operator.

Im Gegensatz zu einigen Sprachen wie Rust sind Kontrollstrukturen in JavaScript Anweisungen, was bedeutet, dass Sie sie nicht einer Variablen zuweisen knnen, wie const a = if (x) { 1 } else { 2 }.

JavaScript-Fehler werden mithilfe der try...catch-Anweisung behandelt.

try {
  buildMySite("./website");
} catch (e) {
  console.error("Building site failed:", e);
}

Fehler knnen mit der throw-Anweisung ausgelst werden. Viele eingebaute Operationen knnen ebenfalls Fehler auslsen.

function buildMySite(siteDirectory) {
  if (!pathExists(siteDirectory)) {
    throw new Error("Site directory does not exist");
  }
}

Im Allgemeinen knnen Sie den Typ des Fehlers, den Sie gerade abgefangen haben, nicht erkennen, da alles von einer throw-Anweisung geworfen werden kann. Sie knnen jedoch normalerweise davon ausgehen, dass es sich um eine Instanz von Error handelt, wie im obigen Beispiel. Es gibt einige eingebaute Unterklassen von Error, wie TypeError und RangeError, die Sie verwenden knnen, um zustzliche Semantik ber den Fehler bereitzustellen. Es gibt keine bedingte Ausnahmebehandlung in JavaScript wenn Sie nur eine Art von Fehler behandeln mchten, mssen Sie alles erfassen, den Fehlertyp mit instanceof identifizieren und dann die anderen Flle neu auslsen.

try {
  buildMySite("./website");
} catch (e) {
  if (e instanceof RangeError) {
    console.error("Seems like a parameter is out of range:", e);
    console.log("Retrying...");
    buildMySite("./website");
  } else {
    // Don't know how to handle other error types; throw them so
    // something else up in the call stack may catch and handle it
    throw e;
  }
}

Wenn ein Fehler von keinem try...catch im Aufrufstapel abgefangen wurde, wird das Programm beendet.

Fr eine umfassende Liste von Steuerflussanweisungen siehe den Referenzabschnitt.

Objekte

JavaScript-Objekte kann man sich als Sammlungen von Schlssel-Wert-Paaren vorstellen. Als solche sind sie hnlich:

• Dictionaries in Python.
• Hashes in Perl und Ruby.
• Hash-Tabellen in C und C++.
• HashMaps in Java.
• Assoziative Arrays in PHP.

JavaScript-Objekte sind Hashes. Im Gegensatz zu Objekten in statisch typisierten Sprachen haben Objekte in JavaScript keine festen Formen - Eigenschaften knnen jederzeit hinzugefgt, gelscht, umgeordnet, gendert oder dynamisch abgefragt werden. Objekt-Schlssel sind immer Zeichenketten oder Symbole - auch Array-Indizes, die kanonisch Ganzzahlen sind, sind tatschlich intern Zeichenketten.

Objekte werden blicherweise mit der Literalsyntax erstellt:

const obj = {
  name: "Carrot",
  for: "Max",
  details: {
    color: "orange",
    size: 12,
  },
};

Objekteigenschaften knnen zugnglich gemacht werden, indem man den Punkt (.) oder eckige Klammern ([]) verwendet. Wenn man die Punktnotation verwendet, muss der Schlssel ein gltiger Bezeichner sein. Eckige Klammern hingegen ermglichen das Indizieren des Objekts mit einem dynamischen Schlsselwert.

// Dot notation
obj.name = "Simon";
const name = obj.name;

// Bracket notation
obj["name"] = "Simon";
const name = obj["name"];

// Can use a variable to define a key
const userName = prompt("what is your key?");
obj[userName] = prompt("what is its value?");

Eigenschaftszugriffe knnen verkettet werden:

obj.details.color; // orange
obj["details"]["size"]; // 12

Objekte sind immer Referenzen, sodass, es sei denn, etwas kopiert das Objekt explizit, nderungen an einem Objekt von auen sichtbar sind.

const obj = {};
function doSomething(o) {
  o.x = 1;
}
doSomething(obj);
console.log(obj.x); // 1

Dies bedeutet auch, dass zwei separat erstellte Objekte niemals gleich (!==) sind, weil sie unterschiedliche Referenzen darstellen. Wenn Sie zwei Referenzen auf dasselbe Objekt halten, wrde eine Vernderung an einem durch das andere beobachtbar sein.

const me = {};
const stillMe = me;
me.x = 1;
console.log(stillMe.x); // 1

Weitere Informationen zu Objekten und Prototypen finden Sie auf der Object-Referenzseite. Weitere Informationen zur Initialisierungssyntax fr Objekte finden Sie auf der entsprechenden Referenzseite.

Diese Seite hat alle Details ber Objektprototypen und Vererbung weggelassen, weil Sie Vererbung normalerweise mit Klassen erreichen knnen, ohne den zugrunde liegenden Mechanismus zu berhren (von dem Sie vielleicht gehrt haben, dass er schwer verstndlich ist). Um mehr darber zu lernen, siehe Vererbung und die Prototypkette.

Arrays

Arrays in JavaScript sind eigentlich eine spezielle Art von Objekt. Sie funktionieren sehr wie normale Objekte (numerische Eigenschaften knnen natrlich nur mit der []-Syntax zugegriffen werden), aber sie haben eine magische Eigenschaft namens length. Diese ist immer um eins hher als der hchste Index im Array.

Arrays werden normalerweise mit Array-Literalen erstellt:

const a = ["dog", "cat", "hen"];
a.length; // 3

JavaScript-Arrays sind immer noch Objekte Sie knnen ihnen beliebige Eigenschaften zuweisen, einschlielich willkrlicher Zahlenindizes. Der einzige "Magie" ist, dass length automatisch aktualisiert wird, wenn Sie einen bestimmten Index setzen.

const a = ["dog", "cat", "hen"];
a[100] = "fox";
console.log(a.length); // 101
console.log(a); // ['dog', 'cat', 'hen', empty  97, 'fox']

Das oben erhaltene Array wird als Sparses Array bezeichnet, da es nicht besetzte Slots in der Mitte gibt, was dazu fhrt, dass die Engine es von einem Array in eine Hash-Tabelle deoptimiert. Stellen Sie sicher, dass Ihr Array dicht besiedelt ist!

Indizierung auerhalb der Grenzen wirft keinen Fehler. Wenn Sie einen nicht vorhandenen Array-Index abfragen, erhalten Sie einen Wert von undefined zurck:

const a = ["dog", "cat", "hen"];
console.log(typeof a[90]); // undefined

Arrays knnen beliebige Elemente enthalten und knnen nach Belieben wachsen oder schrumpfen.

const arr = [1, "foo", true];
arr.push({});
// arr = [1, "foo", true, {}]

Arrays knnen mit der for-Schleife durchlaufen werden, wie es in anderen C-hnlichen Sprachen mglich ist:

for (let i = 0; i < a.length; i++) {
  // Do something with a[i]
}

Oder, da Arrays iterable sind, knnen Sie die for...of-Schleife verwenden, die gleichbedeutend mit C++/Java's for (int x : arr)-Syntax ist:

for (const currentValue of a) {
  // Do something with currentValue
}

Arrays verfgen ber eine Vielzahl von Array-Methoden. Viele von ihnen wrden das Array durchlaufen zum Beispiel wrde map() einen Callback auf jedes Array-Element anwenden und ein neues Array zurckgeben:

const babies = ["dog", "cat", "hen"].map((name) => `baby ${name}`);
// babies = ['baby dog', 'baby cat', 'baby hen']

Funktionen

Zusammen mit Objekten sind Funktionen die Kernkomponenten zum Verstndnis von JavaScript. Die grundlegendste Funktionsdeklaration sieht so aus:

function add(x, y) {
  const total = x + y;
  return total;
}

Eine JavaScript-Funktion kann 0 oder mehr Parameter bernehmen. Der Funktionskrper kann so viele Anweisungen enthalten, wie Sie mchten, und kann eigene Variablen deklarieren, die auf diese Funktion lokal beschrnkt sind. Die return-Anweisung kann verwendet werden, um jederzeit einen Wert zurckzugeben und die Funktion zu beenden. Wenn keine Rckgabeanweisung verwendet wird (oder eine leere Rckgabe ohne Wert), gibt JavaScript undefined zurck.

Funktionen knnen mit mehr oder weniger Parametern aufgerufen werden, als sie erwartet. Wenn Sie eine Funktion aufrufen, ohne die erwarteten Parameter zu bergeben, werden diese auf undefined gesetzt. Wenn Sie mehr Parameter bergeben, als erwartet, ignoriert die Funktion die zustzlichen Parameter.

add(); // NaN
// Equivalent to add(undefined, undefined)

add(2, 3, 4); // 5
// added the first two; 4 was ignored

Es gibt mehrere andere Parametersyntaxen. Zum Beispiel erlaubt die Rest-Parameter-Syntax das Sammeln aller durch den Aufrufer bergebenen zustzlichen Parameter in einem Array, hnlich wie Python's *args. (Da JS auf Sprachebene keine benannten Parameter hat, gibt es kein **kwargs.)

function avg(...args) {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
}

avg(2, 3, 4, 5); // 3.5

Im obigen Code enthlt die Variable args alle Werte, die an die Funktion bergeben wurden.

Der Restparameter speichert alle Argumente nachdem, wo er erklrt wird, aber nicht davor. Mit anderen Worten, function avg(firstValue, ...args) speichert den ersten Wert, der in die Funktion bergeben wird, in der Variable firstValue und die verbleibenden Argumente in args.

Wenn eine Funktion eine Liste von Argumenten akzeptiert und Sie diese bereits in einem Array haben, knnen Sie die Spread-Syntax im Funktionsaufruf verwenden, um das Array als Liste von Elementen zu streuen. Beispiel: avg(...numbers).

Wir erwhnten, dass JavaScript keine benannten Parameter hat. Es ist jedoch mglich, sie mit Objettdestructuring zu implementieren, das es erlaubt, Objekte bequem zu packen und zu entpacken.

// Note the { } braces: this is destructuring an object
function area({ width, height }) {
  return width * height;
}

// The { } braces here create a new object
console.log(area({ width: 2, height: 3 }));

Es gibt auch die Standardparametersyntax, die es ermglicht, dass ausgelassene Parameter (oder solche, die als undefined bergeben werden) einen Standardwert haben.

function avg(firstValue, secondValue, thirdValue = 0) {
  return (firstValue + secondValue + thirdValue) / 3;
}

avg(1, 2); // 1, instead of NaN

Anonyme Funktionen

JavaScript lsst Sie anonyme Funktionen erstellen das sind Funktionen ohne Namen. In der Praxis werden anonyme Funktionen in der Regel als Argumente zu anderen Funktionen verwendet, sofort einer Variable zugewiesen, die verwendet werden kann, um die Funktion aufzurufen, oder von einer anderen Funktion zurckgegeben.

// Note that there's no function name before the parentheses
const avg = function (...args) {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
};

Das macht die anonyme Funktion aufrufbar, indem avg() mit einigen Argumenten aufgerufen wird das heit, es ist semantisch gleichbedeutend mit der Deklaration der Funktion mit der function avg() {}-Deklarationssyntax.

Es gibt eine andere Mglichkeit, anonyme Funktionen zu definieren durch Verwendung eines Pfeilfunktausdrucks.

// Note that there's no function name before the parentheses
const avg = (...args) => {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
};

// You can omit the `return` when simply returning an expression
const sum = (a, b, c) => a + b + c;

Pfeilfunktionen sind nicht semantisch gleichwertig zu Funktionsausdrcken fr weitere Informationen siehe die Referenzseite.

Es gibt eine weitere Mglichkeit, wie anonyme Funktionen ntzlich sein knnen: Sie knnen gleichzeitig deklariert und in einem einzigen Ausdruck aufgerufen werden, der als Sofort aufgerufener Funktionsausdruck (IIFE) bezeichnet wird:

(function () {
  // 
})();

Fr Anwendungsflle von IIFEs knnen Sie mehr ber das Emulieren privater Methoden mit Closures lesen.

Rekursive Funktionen

JavaScript erlaubt es Ihnen, Funktionen rekursiv aufzurufen. Dies ist besonders ntzlich beim Umgang mit Baumstrukturen, wie sie im DOM des Browsers zu finden sind.

function countChars(elm) {
  if (elm.nodeType === 3) {
    // TEXT_NODE
    return elm.nodeValue.length;
  }
  let count = 0;
  for (let i = 0, child; (child = elm.childNodes[i]); i++) {
    count += countChars(child);
  }
  return count;
}

Funktionsausdrcke knnen auch benannt werden, was es ihnen ermglicht, rekursiv zu sein.

const charsInBody = (function counter(elm) {
  if (elm.nodeType === 3) {
    // TEXT_NODE
    return elm.nodeValue.length;
  }
  let count = 0;
  for (let i = 0, child; (child = elm.childNodes[i]); i++) {
    count += counter(child);
  }
  return count;
})(document.body);

Der Name, der einem Funktionsausdruck wie oben angegeben wird, ist nur im eigenen Geltungsbereich der Funktion verfgbar. Dies ermglicht mehr Optimierungen durch die Engine und fhrt zu lesbarerem Code. Der Name erscheint auch im Debugger und in einigen Stack-Traces, was Ihnen Zeit bei der Fehlersuche sparen kann.

Wenn Sie funktionale Programmierung gewohnt sind, beachten Sie die Leistungsimplikationen der Rekursion in JavaScript. Obwohl die Sprachspezifikation Tail-Call-Optimierung spezifiziert, hat nur JavaScriptCore (verwendet von Safari) sie implementiert, aufgrund der Schwierigkeit, Stack-Traces wiederherzustellen und der Debuggierbarkeit. Bei tiefer Rekursion ziehen Sie in Erwgung, stattdessen Iteration zu verwenden, um Stapelberlufe zu vermeiden.

Funktionen sind first-class-Objekte

JavaScript-Funktionen sind first-class-Objekte. Dies bedeutet, dass sie Variablen zugewiesen, als Argumente an andere Funktionen bergeben und von anderen Funktionen zurckgegeben werden knnen. Darber hinaus untersttzt JavaScript Closures ohne explizite Erfassung, was Ihnen erlaubt, bequem funktionale Programmierstile anzuwenden.

// Function returning function
const add = (x) => (y) => x + y;
// Function accepting function
const babies = ["dog", "cat", "hen"].map((name) => `baby ${name}`);

Beachten Sie, dass JavaScript-Funktionen selbst Objekte sind - wie alles andere in JavaScript - und Sie knnen Eigenschaften zu ihnen hinzufgen oder ndern, wie wir es frher in dem Abschnitt ber Objekte gesehen haben.

Innere Funktionen

JavaScript-Funktionsdeklarationen sind innerhalb anderer Funktionen erlaubt. Ein wichtiges Detail von verschachtelten Funktionen in JavaScript ist, dass sie auf Variablen im Gltigkeitsbereich ihrer bergeordneten Funktion zugreifen knnen:

function parentFunc() {
  const a = 1;

  function nestedFunc() {
    const b = 4; // parentFunc can't use this
    return a + b;
  }
  return nestedFunc(); // 5
}

Dies bietet eine groe Menge an Nutzen beim Schreiben von wartbarem Code. Wenn eine aufgerufene Funktion sich auf eine oder zwei weitere Funktionen sttzt, die fr keinen anderen Teil Ihres Codes ntzlich sind, knnen Sie diese Hilfsfunktionen innerhalb dieser Funktion verschachteln. Dies hlt die Anzahl der Funktionen, die sich im globalen Gltigkeitsbereich befinden, gering.

Dies ist auch ein groartiges Gegenmittel zur Versuchung, globale Variablen zu verwenden. Beim Schreiben von komplexem Code ist es oft verlockend, globale Variablen zu verwenden, um Werte zwischen mehreren Funktionen zu teilen, was zu schwer wartbarem Code fhrt. Verschachtelte Funktionen knnen Variablen in ihrem Elternteil teilen, sodass Sie diesen Mechanismus verwenden knnen, um Funktionen miteinander zu verknpfen, ohne Ihren globalen Namensraum zu verschmutzen.

Klassen

JavaScript bietet die class-Syntax, die der in Sprachen wie Java sehr hnlich ist.

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `Hello, I'm ${this.name}!`;
  }
}

const p = new Person("Maria");
console.log(p.sayHello());

JavaScript-Klassen sind nur Funktionen, die mit dem new-Operator instanziiert werden mssen. Jedes Mal, wenn eine Klasse instanziiert wird, gibt sie ein Objekt zurck, das die von der Klasse spezifizierten Methoden und Eigenschaften enthlt. Klassen erzwingen keine Code-Organisation - zum Beispiel knnen Sie Funktionen haben, die Klassen zurckgeben, oder Sie knnen mehrere Klassen pro Datei haben. Hier ist ein Beispiel dafr, wie ad hoc die Erstellung einer Klasse sein kann: es ist nur ein Ausdruck, der von einer Pfeilfunktion zurckgegeben wird. Dieses Muster wird als Mixin bezeichnet.

const withAuthentication = (cls) =>
  class extends cls {
    authenticate() {
      // 
    }
  };

class Admin extends withAuthentication(Person) {
  // 
}

Statische Eigenschaften werden durch Voranstellen von static erstellt. Private Felder und Methoden werden durch Voranstellen eines Hash-Zeichens # (nicht private) erstellt. Der Hash ist ein integraler Bestandteil des Elementnamens und unterscheidet ihn von einer normalen, mit einem String beschrifteten Eigenschaft. (Denken Sie an # als _ in Python.) Im Gegensatz zu den meisten anderen Sprachen gibt es absolut keinen Weg, ein privates Element auerhalb des Klassenkrpers zu lesen - nicht einmal in abgeleiteten Klassen.

Fr eine detaillierte Anleitung zu verschiedenen Klassenfeatures knnen Sie die Leitfaden-Seite lesen.

Asynchrone Programmierung

JavaScript ist von Natur aus einstrngig. Es gibt keine Parallelisierung; nur Nebenlufigkeit. Asynchrone Programmierung wird von einer Ereignisschleife angetrieben, die es ermglicht, eine Reihe von Aufgaben in die Warteschlange zu stellen und auf deren Abschluss zu warten.

Es gibt drei idiomatische Wege, asynchrone Code in JavaScript zu schreiben:

• Callback-basiert (wie setTimeout())
• Promise-basiert
• async/await, was ein syntaktischer Zucker fr Promises ist

Beispielsweise knnte eine Datei-Leseoperation in JavaScript folgendermaen aussehen:

// Callback-based
fs.readFile(filename, (err, content) => {
  // This callback is invoked when the file is read, which could be after a while
  if (err) {
    throw err;
  }
  console.log(content);
});
// Code here will be executed while the file is waiting to be read

// Promise-based
fs.readFile(filename)
  .then((content) => {
    // What to do when the file is read
    console.log(content);
  })
  .catch((err) => {
    throw err;
  });
// Code here will be executed while the file is waiting to be read

// Async/await
async function readFile(filename) {
  const content = await fs.readFile(filename);
  console.log(content);
}

Die Kernsprache spezifiziert keine asynchronen Programmierfunktionen, aber es ist entscheidend, wenn man mit der externen Umgebung interagiert von Benutzerberechtigungen anfordern bis Daten abrufen bis hin zum Lesen von Dateien. Wenn mglicherweise lang laufende Operationen asynchron sind, stellt dies sicher, dass andere Prozesse weiterlaufen knnen, whrend auf den Abschluss dieser Operation gewartet wird zum Beispiel wird der Browser nicht einfrieren, whrend auf das Klicken des Benutzers auf eine Schaltflche gewartet wird, um eine Berechtigung zu erteilen.

Wenn Sie einen asynchronen Wert haben, ist es nicht mglich, seinen Wert synchron zu erhalten. Wenn Sie beispielsweise ein Promise haben, knnen Sie nur ber die then()-Methode auf das eventuelle Ergebnis zugreifen. hnlich kann await nur in einem asynchronen Kontext verwendet werden, was typischerweise eine asynchrone Funktion oder ein Modul ist. Promises blockieren niemals nur die Logik, die vom Ergebnis des Promises abhngt, wird verschoben; alles andere wird whrenddessen weiter ausgefhrt. Wenn Sie ein funktionaler Programmierer sind, erkennen Sie vielleicht Promises als Monaden an, die mit then() abgebildet werden knnen (sie sind jedoch keine richtigen Monaden, da sie sich selbst abflachen; d.h. Sie knnen nicht Promise<Promise<T>> haben).

Tatschlich hat das einstrngige Modell Node.js zu einer beliebten Wahl fr serverseitige Programmierung gemacht, aufgrund seiner nicht-blockierenden IO, die den Umgang mit einer groen Anzahl von Datenbank- oder Dateisystemanfragen sehr leistungsfhig macht. Rechenintensive Aufgaben, die reines JavaScript sind, blockieren jedoch weiterhin den Hauptthread. Um eine echte Parallelisierung zu erreichen, mssen Sie mglicherweise Worker verwenden.

Um mehr ber asynchrone Programmierung zu erfahren, knnen Sie ber die Verwendung von Promises lesen oder das asynchrone JavaScript-Tutorial befolgen.

Module

JavaScript spezifiziert auch ein Modulsystem, das von den meisten Laufzeitumgebungen untersttzt wird. Ein Modul ist normalerweise eine Datei, die durch ihren Dateipfad oder ihre URL identifiziert wird. Sie knnen die import- und export-Anweisungen verwenden, um Daten zwischen Modulen auszutauschen:

import { foo } from "./foo.js";

// Unexported variables are local to the module
const b = 2;

export const a = 1;

Im Gegensatz zu Haskell, Python, Java usw. ist die Auflsung von JavaScript-Modulen vollstndig durch den Host definiert sie basiert normalerweise auf URLs oder Dateipfaden, sodass relative Dateipfade "einfach funktionieren" und relativ zum Pfad des aktuellen Moduls anstatt zu einem Projekthauptverzeichnis sind.

Die JavaScript-Sprache bietet jedoch keine Standardbibliotheksmodule alle Kernfunktionalitten werden durch globale Variablen wie Math und Intl bereitgestellt. Dies ist auf die lange Geschichte von JavaScript zurckzufhren, das kein Modulsystem hatte, und auf die Tatsache, dass das Opt-in in das Modulsystem einige nderungen an der Laufzeiteinrichtung erfordert.

Verschiedene Laufzeitumgebungen knnen unterschiedliche Modulsysteme verwenden. Zum Beispiel verwendet Node.js den Paketmanager npm und basiert hauptschlich auf Dateisystemen, whrend Deno und Browser vollstndig URL-basiert sind und Module von HTTP-URLs abgerufen werden knnen.

Weitere Informationen finden Sie auf der Leitfaden-Seite zu Modulen.

Sprache und Laufzeit

Auf dieser Seite haben wir immer wieder erwhnt, dass bestimmte Funktionen sprachebene und andere laufzeitebene sind.

JavaScript ist eine universelle Skriptsprache. Die Kernsprachspezifikation konzentriert sich auf reine Berechnungslogik. Sie behandelt keinen Input/Output tatschlich ist das Verhalten eines JavaScript-Programms ohne zustzliche laufzeitebene APIs (insbesondere console.log()) vollstndig unbeobachtbar.

Eine Laufzeit oder ein Host ist etwas, das Daten an die JavaScript-Engine (den Interpreter) bermittelt, zustzliche globale Eigenschaften bereitstellt und Hooks bereitstellt, damit die Engine mit der Auenwelt interagieren kann. Modullsung, Datenlesen, Nachrichten drucken, Netzwerkanfragen senden usw. sind alles laufzeitebene Operationen. Seit seiner Einfhrung wurde JavaScript in verschiedenen Umgebungen angenommen, wie Browsern (die APIs wie DOM bereitstellen), Node.js (das APIs wie Dateisystemzugriff bereitstellt), usw. JavaScript wurde erfolgreich in Webanwendungen (was sein primrer Zweck war), mobilen Apps, Desktop-Apps, serverseitigen Apps, serverlosen Anwendungen, eingebetteten Systemen und mehr integriert. Whrend Sie die Kernfunktionen von JavaScript lernen, ist es auch wichtig, hostbereitgestellte Funktionen zu verstehen, um das Wissen nutzen zu knnen. Zum Beispiel knnen Sie ber alle Webplattform-APIs lesen, die von Browsern und manchmal auch von Nicht-Browsern implementiert werden.

Weitere Erkundung

Diese Seite bietet einen sehr grundlegenden Einblick darin, wie verschiedene JavaScript-Funktionen im Vergleich zu anderen Sprachen stehen. Wenn Sie mehr ber die Sprache selbst und die Feinheiten jeder Funktion erfahren mchten, knnen Sie den JavaScript-Leitfaden und die JavaScript-Referenz lesen.

Es gibt einige wesentliche Teile der Sprache, die wir aufgrund von Platz und Komplexitt weggelassen haben, die Sie jedoch selbst erkunden knnen:

• Vererbung und die Prototypkette
• Closures
• Regulre Ausdrcke
• Iteration