Introduction to Objects

Objekte sind ein sehr wichtiger Datentyp in JavaScript, weil man nur zwei Arten von Datentypen als Variable weiterreichen kann: Primitives und Objects.

What are objects?

Objekte sind Daten, die key-value pairs enthalten. Ein leeres Objekt wird mit geschwungenen Klammern {} angelegt, kann aber, wie ein Array, auch gleich mit Daten befüllt werden. Mehrere key-value pairs werden mit Beistrichen getrennt.

const emtpyObject = {};
const personData = { firstName: 'Ava', lastName: 'Gardner' };

Jeder key gibt eine Referenz zu einem value. Eine gute Analogie ist ein Wörterbuch. Der key ist das Wort, der value die Erklärung.

Object values

Objekte können alle in JavaScript gültigen Werte enthalten. Das bedeutet, man kann neben Primitives (Strings, Numbers, Booleans) auch Arrays, weitere Objekte und Funktionen speichern.

const myCat = {
  firstName: 'Pedro',
  'Middle Name': 'P.',  // invalid identifier
  lastName: 'Hofer',
  age: 4,
  color: 'black',
  purrPurr: function (purr) {
    console.log(purr);
  },
  favoriteFood: ['Animonda', 'ZooRoyal', 'Whiskas'],
}

Der Schlüssel (key) repräsentiert eine Eigenschaft (property), über die wir auf den Wert (value) zugreifen können – und zwar sowohl, um einen Wert zuzuweisen (setting) als auch einen Wert auszulesen (getting).

Getting the value of a property

dot notation
Man schreibt den Namen des Objekts, dann einen Punkt ., dann den Namen der Eigenschaft. Die dot notation ist die übliche Methode.

bracket notation
Man schreibt den Namen des Objekts, direkt anschließend den Namen der Eigenschaft als String (d.h., der muss immer in Anführungszeichen gesetzt werden) in einer eckigen Klammer [].

Bracket notation wird nur in zwei Fällen verwendet:

• Wenn der Name einer Eigenschaft ein invalid identifier ist (siehe Valid variable names)
• Wenn man den Wert einer Eigenschaft durch eine Variable holen muss

myCat.firstName;      // Pedro
myCat['Middle Name']; // P. (this is an invalid identifier - mind the quotation marks!)
myCat.lastName;       // Hofer
myCat.age;            // 4
myCat.color;          // black
// this function is the value of the property purrPurr
// since it is contained in an object, we call it method
myCat.purrPurr('Pedro says: Meooooow!!!');
myCat['purrPurr']('Mrrrrow!!');
myCat.favoriteFood[2];

// dot vs. bracket notation
const age = myCat.age;
const age = myCat['age']; // string of the property => use quotation marks!

Getting the value of a property through a variable

(Warum genau wollen wir das tun? Es wirkt umständlich mit den extra Variablen …)

// 1. Die gesuchte Eigenschaft (favouriteFood) wird in einer Variablen gespeichert:
const foodToBuy = 'favoriteFood';

// 2. Dieser Zugriff funktioniert nicht (weil das Objekt keine solche Eigenschaft besitzt):
const foodToBuyWithDotNotation = myCat.foodToBuy;
console.log(foodToBuyWithDotNotation); // undefined

// 3. um foodToBuy zu verwenden, brauchen wir die bracket notation:
// - wir deklarieren eine neue Variable pedrosFood
// - und weisen ihr myCat[foodToBuy] zu:
const pedrosFood = myCat[foodToBuy];

// 4. JavaScript ersetzt nun foodToBuy durch 'favoriteFood',
// daher haben wir implizit folgendes gemacht:
const pedrosFood = myCat['favoriteFood'];

Setting the value of a property

Wir können ganz einfach bestehende Werte eines Objekts ändern oder auch neue Key-Value Pairs hinzufügen. Dazu wird einer bestehenden oder neuen Eigenschaft ein (neuer) Wert zugewiesen. Auch hier nehmen wir wieder bevorzugt die dot notation.

// with dot notation
myCat.favoriteCanOpener = 'Axel';
// with bracket notation
myCat['secondFavoriteCanOpener'] = 'Birgit';

Deleting properties

Key-Value Pairs können mit dem Keyword delete gelöscht werden. Dazu schreiben wir delete, gefolgt vom Objekt und der zu löschenden Eigenschaft in dot oder bracket notation.

delete myCat.lastName;
delete myCat['Middle Name'];

Functions are objects in JavaScript

Funktionen sind eine spezielle Art von Objekten in JavaScript. Daher können auch Funktionen Eigenschaften haben (die man wahrscheinlich aber nicht nutzen wird).

function functionName() {}
functionName.property = 'Hello!';
console.log(functionName.property); // Hello!

Da Funktionen Objekte sind, können Funktionen auch als Werte von Objekten verwendet werden. Die Eigenschaften, die eine Funktion als Wert enthalten, werden Methoden genannt.
purrPurr ist eine Methode des Objekts myCat.

const myCat = {
  purrPurr: function (purr) {
    console.log(purr);
  },
};

Da Methoden Funktionen sind, verhalten sie sich auch exakt so. Um eine Methode aufzurufen, setzen wir eine Klammer (), nachdem wir die Methode mit der dot Notation geholt haben.

// dot notation
myCat.purrPurr('Meooow');
// bracket notation - hier wieder einen String verwenden!
myCat['purrPurr']('Meoow');

Comparing objects

Objekte sind anders als Primitive. Sie können daher nicht mit strict oder loose equality verglichen werden. Das Ergebnis wird immer falsch sein. Warum ist das so?

Objects are compared by reference

In JavaScript hat jedes Objekt so etwas wie einen Identitätsnachweis. Diesen Identitätsnachweis nennen wir Referenz auf ein Objekt. Wenn zwei Objekte mit dem strict equality operator verglichen werden, vergleichen wir eigentlich die Identitätsausweise. Und diese sind eben niemals gleich.

Checking if two objects have the same value

Um zu prüfen, ob zwei Objekte die gleichen Werte besitzen, muss man jedes einzelne Property-Value-Paar vergleichen. Das macht man mit einer Schleife.