Objektreferenzen
Dauer: 20 Minuten
typeof
-Operator- Werte einfacher Datentypen werden kopiert
- Arrays und Objekte werden referenziert
Ziel: Verständnis von Objektreferenzen im Gegensatz zu einfachen Datentypen
Mit dem typeof
-Operator kann der Datentyp
eines Wertes oder einer Variablen/Konstanten
herausgefunden werden:
const type = typeof 1234;
console.log(type); // --> number
let x = "Hallo";
console.log(typeof x); // --> string
// Arrays haben den Typ object
console.log(typeof [1,2,3,4]); // --> object
console.log(typeof {name: 'Bob'}); // --> object
Hierbei ist besonders zu beachten, dass
Arrays und Objekte den gleichen Datentyp haben,
nämlich object
.
Tipp: Mit der Methode Array.isArray()
kann herausgefunden werden, ob der Wert
einer Konstanten oder Variablen ein Array ist.
Werte einfacher Datentypen kopieren
number
, string
und boolean
werden
als „einfache“ Datentypen bezeichnet
— im Gegensatz zu Werten vom Typ object
,
die nicht zu den einfachen Datentypen gehören.
Dies lässt sich dadurch begründen, dass Arrays
und Objekte, die beide vom Typ object
sind,
sich aus mehreren Werten zusammensetzen, die
einerseits auf einfachen Datentypen basieren
können oder andererseits ebenfalls den Typ
object
haben können (Arrays können z.B. Objekte
enthalten, die wiederum…).
Wenn wir in einer Variablen (oder Konstanten) Werte einfacher Datentypen haben, dann können wir diese durch Zuweisung kopieren:
let name1 = "Alice";
let name2 = name1;
console.log(name1); // --> Alice
console.log(name2); // --> Alice
Hierbei handelt es sich um Kopien der
Werte, d.h. sowohl name1
als auch name2
„enthalten“ einen eigenen string
-Wert.
Beide Werte haben durch die Zuweisung (Kopie)
die gleichen Buchstaben.
Arrays und Objekte haben Referenzen
Arrays und Objekte sind vom Typ object
und keine einfachen Datentypen. Diese verhalten
sich bei Zuweisungen von Variablen/Konstanten
nicht wie einfache Datentypen:
const object1 = { name: "Object1" };
const object2 = object1;
object2.name = "Object2";
// Wert von name wurde in object1 UND object2 geändert!
console.log(object1.name); // --> Object2
console.log(object2.name); // --> Object2
const list1 = [1,2,3];
const list2 = list1;
list2[0] = 1000
// Element 0 in list1 UND list2 wurde geändert!
console.log(list1); // --> [1000,2,3]
console.log(list2); // --> [1000,2,3]
Objekte und Arrays werden also bei Zuweisungen nicht kopiert. Dies liegt daran, dass Variablen und Konstanten bei Objekten und Arrays eine Referenz auf einen Speicherbereich enthalten und nicht die Werte wie bei einfachen Datentypen.
Daher wirkt sich eine Änderung der Eigenschaften eines Objekts oder der Elemente eines Arrays direkt auf den Speicherbereich aus. Alle Variablen und Konstanten, die mit ihrer Referenz auf diesen Speicherbereich für das betroffene Objekt oder Array verweisen, sind dann von dieser Änderung betroffen bzw. enthalten über die Referenz die geänderten Werte.
Dies lässt sich durch eine grafische Skizze
gut nachvollziehen, siehe z.B. bei
https://javascript.info/object-copy. Dort
wird auch beschrieben, wie Objekte mit
Object.assign
kopiert werden können.