About Type Checking
Knowning what the type of a piece of data is, is often very important for code to run smoothly and without errors.
Javascript has several ways to check the type of a value or object.
Javascript's type checking mechanisms can be somewhat unreliable.
For better type safety and stronger types, you should probably use TypeScript, a language that builds on JavaScript, but with the type syntax of a static-typed language.
The typeof operator
The typeof operator returns the type of its operand.
The output is a string matching the name of one of the primitive data types, except for "null".
It can also be "function" or "object".
typeof undefined;
// => "undefined"
typeof true;
// => "boolean"
typeof 42;
// => "number"
typeof 'Hello, World!';
// => "string"
typeof function () {
return 'Hello, World';
};
// => "function"
typeof [1, 2, 3, 4];
// => "object"
typeof { city: 'Stockholm', country: 'Sweden' };
// => "object"
For [historical reasons][typeof null is "object"].
The instanceof operator
For checking the type of an object, you can use the instanceof operator.
It evaluates into a boolean depending on whether the second operand is included in the first operands' prototype chain.
To clarify, instanceof will return whether the first operand is an instance of second operand or one of its child classes.
instanceof only works on objects.
class Beverage {
// ...
}
// The Coffee class is a child of the Beverage class.
class Coffee extends Beverage {
// ...
}
const java = new Coffee();
java instanceof Coffee;
// => true
java instanceof Beverage;
// => true
The Array class has a method called Array.isArray() that checks if its argument is an array.
While instanceof Array will not work with an array created in a different realm such as an iframe in a webpage, Array.isArray() will.
This is because the Array class has a different constructor in each realm, and each iframe has its own realm, meaning that the function in the prototype chain will be different, causing instanceof Array to fail.
Array.isArray() is capable of ignoring this, and should always be used when possible.
It can also survive false positives where an object isn't actually an Array, and merely has Array in its prototype chain.
({ __proto__: Array.prototype }) instanceof Array
// => true
Array.isArray({ __proto__: Array.prototype })
// => false
The in operator
The in operator returns whether the first operand is a property of the second operand.
It does not check that the property has a defined value.
A property set to undefined will still be detected by in.
class Coffee {
constructor() {
this.temperature = 'hot';
this.isDarkMatter = undefined;
}
coolDown() {
this.temperature = 'warm';
}
}
const espresso = new Coffee();
'temperature' in espresso;
// => true
'color' in espresso;
// => false
'isDarkMatter' in espresso;
// => true
in will return true for inherited properties and methods.
"coolDown" in espresso
// => true
"constructor" in espresso
// => true
To avoid this, use Object.hasOwn() instead
The Object.hasOwn() function
The Object.hasOwn() method returns whether the specified object owns the given property (it is not inherited or a method).
class Coffee {
constructor() {
this.temperature = 'hot';
}
coolDown() {
this.temperature = 'warm';
}
}
const cappuccino = new Coffee();
Object.hasOwn(cappucino, 'temperature');
// => true
Object.hasOwn(cappucino, 'constructor');
// => false
Object.hasOwn(cappucino, 'coolDown');
// => false
1 exercise
Learn Type Checking