typeof, instanceof und null – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

typeof, instanceof und null

Der typeof Ope­ra­tor in Ja­va­Script ver­rät, wel­chem Da­ten­typ ein Wert ent­spricht. Mit dem instanceof-Ope­ra­tor lässt sich prü­fen, ob ein Ob­jekt die In­stanz ei­nes be­stimm­ten Kon­struk­tors ist. Der Wert Null wirkt da­bei et­was in­kon­sistent.

Die folgende Funktion gibt ein Objekt mit einem Eintrag zurück, der als Argument übergeben wurde.

function makeObject (val) {
  return { value: val };
}

makeObject("👋 Hi");
// => { value: "👋 Hi" }

Wenn allerdings ein Objekt übergeben wird, das bereits eine value-Property hat, soll die Funktion einfach das Objekt zurückgeben. Wie funktioniert das?

Datentyp mit typeof herausfinden

Um festzustellen, ob das Argument ein Objekt ist, kann dessen Datentyp überprüft werden. Das funktioniert in JavaScript mit dem typeof-Operator, der den Namen des Datentyps als String zurückgibt.

typeof true
// => "boolean"
typeof 42
// => "number"
typeof "Text"
// => "string"
typeof function () {}
// => "function"
typeof {}
// => "object"
typeof undefined
// => "undefined"

Mit einem Vergleichsoperator kann diese Fähigkeit genutzt werden, um den Datentyp eines Wertes in einer if-Bedingung zu prüfen.

function makeObject(val) {
  if (typeof val === "object") {
    return val;
  }
  return { value: val };
}

makeObject({ value: "Ist bereits ein Objekt" });
// => { value: "Ist bereits ein Objekt" }

// Aber: Das Objekt wird auch zurückgegeben,
// selbst wenn es leer ist
makeObject({});
// => {}

Damit die Funktion das übergebene Objekt nur zurückgibt, wenn es auch ein value-Property hat, kann die Bedingung mit einer logischen UND-Verknüpfung erweitert werden.

function makeObject(val) {
  if (typeof val === "object" && val.value) {
    return val;
  }
  return { value: val };
}

makeObject({ value: "Ist bereits ein Objekt" });
// => { value: "Ist bereits ein Objekt" }

makeObject({});
// => { value: {} }

Null – Ein Objekt, das keines ist

Es gibt einen Datentyp, bei dem typeof nicht wie erwartet funktioniert: null. Null gibt es in vielen objektorientierten Programmiersprachen. In JavaScript repräsentiert er das absichtliche Fehlen eines Objekts.
Wie bereits der Datentyp undefined hat Null nur einen möglichen Wert: null. Und ebenfalls wie undefined ist auch null ein falsy-Wert

// Mit einer doppelten Negation
// (zwei Ausrufezeichen) könnt ihr
// jeden Wert in JavaScript in
// einen boolschen Wert umwandeln
!!undefined
// => false
!!null
// => false

Wird der typeof-Operator auf null angewendet gibt er jedoch nicht "null" zurück, sondern "object".

typeof null
// => "object"

Laut typeof ist Null also ein Objekt, obwohl der Wert gerade darüber definiert ist, dass er kein Objekt ist. Doch es wird noch verrückter: Ein anderer Operator widerspricht dem Ergebnis – instanceof.

Vererbung überprüfen

In JavaScript ist fast alles ein Objekt. Der typeof-Operator hilft oftmals nicht weiter, denn ob ein Wert ein Array ist oder ein Datumsobjekt oder etwas ganz anderes, lässt sich damit nicht überprüfen. Er gibt jedes Mal bloß "object" zurück.

typeof {}
// => "object"
typeof []
// => "object"
typeof new Date()
// => "object"
typeof Math
// => "object"

typeof sagt nur, dass es ein Objekt ist, aber nicht was für eins. Die Fähigkeiten eines Objekts werden über dessen Konstruktor festgelegt. Deswegen ist es interessanter, zu schauen, ob ein Objekt die Instanz eines bestimmten Konstruktors ist.
Das funktioniert über den instanceof-Operator.

({}) instanceof Object
// => true
([]) instanceof Array
// => true
(new Date()) instanceof Date
// => true

Der Operator gilt dabei für die gesamte Prototypkette. Deswegen gibt er auch true zurück, wenn ein Objekt keine direkte Instanz eines Konstruktors ist, aber von ihm erbt.

function Beispiel () {}

// Erbe die Eigenschaften von Array
Beispiel.prototype = new Array();

var bsp = new Beispiel();

bsp instanceof Beispiel
// => true

// Wegen Vererbung aber auch:
bsp instanceof Array
// => true

Alle Objekte erben vom Object-Konstruktor, deswegen gelten sie alle auch als dessen Instanz.

bsp instanceof Object
// => true

Bis auf Null, das laut typeof-Operator ein Objekt ist, laut instanceof-Operator allerdings keine Instanz von Object.

typeof null
// => "object"
null instanceof Object
// => false
// WTF?!

Darüber hinaus lässt sich über die Notwendigkeit von null in JavaScript streiten. Während undefined allgegenwärtig ist, lässt sich null nur sehr selten in der Sprache finden und in den wenigen Fällen, in denen es vorkommt, ließe es sich vermutlich auch durch undefined ersetzen.