It’s #FrontendFriday – Typ-Check mit instanceof und typeof

instanceof-Operator

Der instanceof-Operator testet, ob die Eigenschaft prototype eines Konstruktors irgendwo in der Prototypenkette eines Objekts vorkommt. Der Rückgabewert ist ein boolean Wert.

Syntax

Wie ist die Syntax bei der Nutzung des instanceof-Operators? Die Syntax ist wie folgt:

object instanceof constructor

object – Objekt, welches getestet wird

constructor – Funktion, in dem das Objekt enthalten sein soll

Beispiele

Beispiel 1: Objekt Fahrzeug mit Marke, Modell und Jahr.

function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// Ausgabe: true

console.log(auto instanceof Object);
// Ausgabe: true

Quelle: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

In diesem Beispiel haben wir gesehen, dass sowohl die Konstante „auto“ als eine Instanz von „Car“ als auch „Object“ ist.

Beispiel 2: Reicht es aus, wenn eine einfache String-Variable deklariert wird oder muss wirklich der „String“-Konstruktor verwendet werden?

In diesem Beispiel sehen wir, dass eine „einfache“ Deklaration bei einem instanceof zu Fehler führen kann, auch wenn wir wissen, dass es ein String ist:

let literalString = 'This is a literal string';
let stringObject  = new String('String created with constructor');

literalString instanceof String;  // false, string literal is not a String
stringObject  instanceof String;  // true

literalString instanceof Object;  // false, string literal is not an Object
stringObject  instanceof Object;  // true

stringObject  instanceof Date;    // false

Hiermit können wir sehen, dass bei der Deklaration einer Variable wichtig ist, diesen mit dem Konstruktor des Objektes zu deklarieren.

typeof-Operator

Der typeof-Operator gibt einen String zurück, die den Typ des unbewerteten Operanden angibt.

Info:

Hinweis: ECMAScript 2019 und älter erlaubten Implementierungen, dass typeof einen beliebigen, von der Implementierung definierten String-Wert für nicht aufrufbare, nicht standardisierte exotische Objekte zurückgibt.

Der einzige bekannte Browser, der dies tatsächlich ausgenutzt hat, ist der alte Internet Explorer.

Syntax

Der Operator „typeof“ folgt mit dem Operand, auf den es überprüft werden soll:

typeof operand

Beispiele

Mit dem folgendem Beispiel kann man sehen, dass der Operator den Typ des Operanden zurückgibt:

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';

// Strings
typeof '' === 'string';
typeof 'bla' === 'string';
typeof `template literal` === 'string';
typeof '1' === 'string'; // note that a number within a string is still typeof string

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(1) === 'boolean'; // Boolean() will convert values based on if they're truthy or falsy
typeof !!(1) === 'boolean'; // two calls of the ! (logical NOT) operator are equivalent to Boolean()

// Undefined
typeof undefined === 'undefined';
typeof declaredButUndefinedVariable === 'undefined';
typeof undeclaredVariable === 'undefined';

Quelle: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof