Hinweis
Als Tagged-Template-Literale werden Template-Literale bezeichnet, denen eine Funktion vorausgeht:
html`<div>Hello, ${destination}</div>`
Hier wird die Funktion html mit den Template-Fragmenten '<div>Hello, ' und '</div>' sowie dem Wert des Ausdrucks destination aufgerufen.
In Kapitel 6 erfahren Sie, wie Sie eigene Tag-Funktionen schreiben.
1.12Objekte
JavaScript-Objekte unterscheiden sich von denen in klassengestützten Sprachen wie Java und C++. Ein JavaScript-Objekt ist lediglich eine Menge von »Eigenschaften« genannten Name-Wert-Paaren wie dem folgenden:
{ name: 'Harry Smith', age: 42 }
Ein solches Objekt enthält nur öffentliche Daten und bietet keine Kapselung und kein Verhalten. Es ist auch keine Instanz einer bestimmten Klasse. Kurz gesagt, ist es etwas ganz anderes als ein Objekt im Sinne der objektorientierten Programmierung. Wie Sie in Kapitel 2 noch sehen werden, ist es zwar möglich, Klassen und Methoden zu definieren, doch unterscheiden sich die Mechanismen sehr stark von denen in den meisten anderen Sprachen.
Natürlich ist es möglich, ein Objekt in einer Variablen zu speichern:
const harry = { name: 'Harry Smith', age: 42 }
Bei einer solchen Variablen können Sie mit der üblichen Punktschreibweise auf die Eigenschaften des Objekts zugreifen:
let harrysAge = harry.age
Dadurch können Sie vorhandene Eigenschaften bearbeiten und neue hinzufügen:
harry.age = 40
harry.salary = 90000
Hinweis
Obwohl die Variable harry als const definiert wurde, können Sie das Objekt verändern, auf das sie verweist. Nicht möglich ist es dagegen, einer const-Variablen einen anderen Wert zuzuweisen:
const sally = { name: 'Sally Lee' }
sally.age = 28 // Zulässig: Ändert das Objekt, auf das sally verweist
sally = { name: 'Sally Albright' }
// Fehler: Einer const-Variablen kann kein neuer Wert zugewiesen
// werden
Mit anderen Worten: const verhält sich wie final in Java und nicht wie const in C++.
Um eine Eigenschaft zu entfernen, verwenden Sie den Operator delete:
delete harry.salary
Der Versuch, auf eine nicht vorhandene Eigenschaft zuzugreifen, resultiert in dem Wert undefined:
let boss = harry.supervisor // undefined
Ein Eigenschaftenname kann auch berechnet werden. Verwenden Sie in einem solchen Fall eckige Array-Klammern, um auf den Wert der Eigenschaft zuzugreifen:
let field = 'Age'
let harrysAge = harry[field.toLowerCase()]
1.13Objektliteral-Syntax
Dies ist der erste von mehreren Abschnitten mit mittlerem Niveau in diesem Kapitel. Wenn Sie gerade erst damit beginnen, JavaScript zu lernen, können Sie ihn getrost überspringen.
Am Ende eines Objektliterals kann auch ein Komma stehen. Dadurch wird es einfacher, bei der Erweiterung des Codes zusätzliche Eigenschaften hinzuzufügen:
let harry = {
name: 'Harry Smith',
age: 42, // Dahinter können weitere Eigenschaften ergänzt werden.
}
Beim Deklarieren von Objektliteralen werden die Werte der Eigenschaften oft in Variablen mit demselben Namen gespeichert:
let age = 43
let harry = { name: 'Harry Smith', age: age}
// Die Eigenschaft 'age' wird auf den Wert der Variablen age gesetzt.
Es gibt dafür die folgende Kurzschreibweise:
let harry = { name: 'Harry Smith', age} // Die Eigenschaft age ist jetzt 43.
Berechnete Eigenschaftennamen in Objektliteralen werden mit eckigen Klammern angegeben:
let harry = { name: 'Harry Smith', [field.toLowerCase()]: 42 }
Die Namen von Eigenschaften sind immer Strings. Wenn ein Name die Regel für Bezeichner nicht erfüllt, müssen Sie ihn in einem Objektliteral in Anführungszeichen setzen:
let harry = { name: 'Harry Smith', 'favorite beer': 'IPA' }
Ein Zugriff auf eine solche Eigenschaft ist mit der Punktschreibweise nicht möglich. Verwenden Sie stattdessen eckige Klammern:
harry['favorite beer'] = 'Lager'
Solche Eigenschaftennamen sind eher unüblich, können manchmal aber durchaus praktisch sein. Stellen Sie sich beispielsweise ein Objekt vor, bei dem die Namen der Eigenschaften Dateinamen und die Werte die Inhalte dieser Dateien sind.
Vorsicht
Wenn es beim Parsen unklar ist, ob eine öffnende geschweifte Klammer ein Objektliteral oder eine Blockanweisung einleitet, wird davon ausgegangen, dass eine Blockanweisung vorliegt. Geben Sie als Beispiel Folgendes in die Browserkonsole oder Node.js ein:
{} - 1
In diesem Fall wird der leere Block ausgeführt und anschließend der Ausdruck -1 ausgewertet und angezeigt.
Bei dem folgenden Ausdruck geschieht jedoch etwas anderes:
1 - {}
Hier wird {} als ein leeres Objekt aufgefasst und in NaN umgewandelt. Anschließend wird das Ergebnis (ebenfalls NaN) angezeigt.
In der Praxis treten solche Mehrdeutigkeiten jedoch nicht auf. Wenn Sie ein Objektliteral erstellen, speichern Sie es gewöhnlich in einer Variablen, übergeben es als Argument oder geben es als Ergebnis zurück. In all diesen Fällen erwartet der Parser keinen Block.
Sollte es Ihnen jemals passieren, dass ein Objektliteral fälschlicherweise als Block geparst wird, können Sie ganz einfach Abhilfe schaffen: Schließen Sie das Objektliteral in runde Klammern ein. Ein Beispiel dafür finden Sie in Abschnitt 1.16, »Destrukturierung«.