Pemula Exercism • javascript

Type Checking

Ringkasan Pelajaran

# About

About

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 ream, 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.

```javascript
({ __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.

```javascript
"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

Originally from Exercism javascript concepts