Supportive Is: an elegant utility to check types of values in JavaScript
Tags: is, typescript, javascript, mongez
Published: 2022-10-11 20:41:31

---
title: Supportive Is: an elegant utility to check types of values in JavaScript 
published: true
description: 
tags: is, typescript, javascript, mongez
# Use a ratio of 100:42 for best results.
---

## Introduction

As we already know, JavaScript is a dynamic language, which means that we don't need to specify the type of the variable when we declare it, and we can change the type of the variable at any time.

## Supportive Is

Supportive Is is a package that helps you to check the type of the value in JavaScript, it's a very simple package that has only one object `Is` that contains a lot of methods to check the type of the value.

## Installation

```bash
npm i @mongez/supportive-is
```

OR

```bash
yarn add @mongez/supportive-is
```

## Before we move on

Before we move on, I want to mention that this package covers three main things, data type checks, dom checks, and whether browser is enabling some technologies (i.e notifications/service worker/ full screen and so on), so stay calm and keep up with me.

Also don't forget to check **the super empty** method, it will be in the middle of the article.

## Usage

Just import the `Is` object from the package and use it.

```ts
import Is from '@mongez/supportive-is';

// start using it
```

## Primitives

Primitives are the most basic data types in JavaScript, they are immutable and can't be changed, they are:  `string` ,  `number` ,  `boolean` ,  `null` ,  `undefined` ,  `symbol` ,  `bigint` .

However, there are some other cases where we need to check if the value is just `integer` or `float`, this will be in handy as well, also checking for `numeric` values regardless of the type whether its number or string.

Check for `string`:

```ts
Is.string('hello world'); // true
```

Check for `number`:

```ts
Is.number(123); // true
```

Check for `boolean`:

```ts
Is.boolean(true); // true
```

Or `Is.bool` for short:

```ts
Is.bool(true); // true
```

Check for `null`:

```ts
Is.null(null); // true
```

Check for `undefined`:

```ts
Is.undefined(undefined); // true
```

Check for `symbol`:

```ts
Is.symbol(Symbol('hello world')); // true
```

Check for `bigint`:

```ts
Is.bigint(BigInt(123)); // true
```

Check for `integer`:

```ts
Is.integer(123); // true
```

Or `Is.int` for short:

```ts
Is.int(123); // true
```

Check for `float`:

```ts
Is.float(123.45); // true
```

Check for `numeric`:

```ts
Is.numeric(123); // true
Is.numeric('123'); // true
```

## Objects

Objects are the most common data type in JavaScript, they are mutable and can be changed, we'll go through the most common objects in JavaScript.

Let's start with `object`, which refers to literally any object in JavaScript:

```ts
Is.object({}); // true
Is.object([]); // true
Is.object(new Date()); // true
Is.object(new Map()); // true
Is.object(new Set()); // true
Is.object(new WeakMap()); // true
Is.object(new WeakSet()); // true
Is.object(new Promise(() => {})); // true
Is.object(new Error()); // true
Is.object(new RegExp()); // true
Is.object(new ArrayBuffer()); // true
Is.object(new SharedArrayBuffer()); // true
Is.object(new DataView(new ArrayBuffer())); // true
Is.object(new Int8Array()); // true
Is.object(new Uint8Array()); // true
Is.object(new Uint8ClampedArray()); // true
Is.object(new Int16Array()); // true
```

As javascript validates `null` as an object, this is prevented by the `Is` object:

```ts
Is.object(null);
```

Check for only plain objects:

```ts
Is.plainObject({}); // true
Is.plainObject([]);
Is.plainObject(new Date());
Is.plainObject(new Map());
```

Check for `array`:

```ts
Is.array([]); // true
```

Check for `date`:

```ts
Is.date(new Date()); // true
```

Check for `map`:

```ts
Is.map(new Map()); // true
```

Check for `set`:

```ts
Is.set(new Set()); // true
```

Check for `weakmap`:

```ts
Is.weakmap(new WeakMap()); // true
```

Check for `weakset`:

```ts
Is.weakset(new WeakSet()); // true
```

Check for `promise`:

```ts
Is.promise(new Promise(() => {})); // true
```

Check for `error`:

```ts
Is.error(new Error('An Error In The Sky')); // true
```

Check for `regular expression`:

```ts
Is.regexp(/hello/); // true
Is.regexp(new RegExp('hello')); // true
```

### 🔥 The Super Empty method

The super empty method is a method that checks if the value is empty or not, it's a very useful method that can be used in many cases, it validates strings, arrays, objects, maps, sets and any iterable objects, however, `Zeros (0)` and `false` values are **not** considered to be empty.

```ts
Is.empty(''); // true
Is.empty([]); // true
Is.empty({}); // true
Is.empty(new Map()); // true
Is.empty(new Set()); // true
Is.empty(null); // true
Is.empty(undefined); // true

// the falsy ones
Is.empty(0); // false
Is.empty(false); // false
```

Even if there is an object with `length` property, it will be ignored as long as itt is not `iterable`.

```ts
Is.empty({ length: 0 });
```

## Dealing with DOM

There also couple of methods that can be used to validate some DOM elements.

Check if the given value is a DOM element:

```ts
Is.element(document.querySelector('.my-element')); // true
```

> Note: This method will return `false` if the value is a `document` or `window` object.

Check if element is visible in the window screen:

```ts
Is.visible(document.querySelector('body')); // true
```

Check if element is hidden (not in screen, just hidden such as display hidden)

```ts
Is.hidden(document.querySelector('body'));
```

Check if element is in the DOM:

```ts
Is.inDOM(document.querySelector('.my-element')); // true
```

Check if the given value is a form element

```ts
Is.form(document.querySelector('form')); // true
```

Check if the given value is a form element, this will check for any input, textarea or select elements:

```ts
Is.input(document.querySelector('input')); // true
```

Check if the given value is a form data

```ts
Is.formData(new FormData()); // true
```

## Browser, Mobile And Desktop

We can also check the current user browser, device type and operating system.

To check browser type, you can either use `Is.browser(browserName)` or `Is.{browserName}()`:

```ts
Is.browser('chrome');
Is.browser('firefox');
Is.browser('safari');
Is.browser('edge');
Is.browser('ie'); 
Is.browser('opera');
// or
Is.chrome();
Is.firefox();
Is.safari();
Is.edge();
Is.ie();
Is.opera();
```

Now let's check if the user is browsing from mobile or desktop:

```ts
Is.mobile.android(); 
Is.mobile.ios();
Is.mobile.iphone();
Is.mobile.ipod();
Is.mobile.windows(); // windows mobile
Is.mobile.any(); // any mobile type

// check if working from desktop
Is.desktop();
```

> Note: The `Is.mobile.any()` method will return `true` if the user is browsing from any mobile device, including tablets.

Also note that `Is.desktop` is the negate of `Is.mobile.any()`.

### Our Final Part, the enabled checks

We can also check if the user has enabled some features in the browser, such as `cookies`, `localStorage`, `sessionStorage`, `geolocation`, `notifications` and tons of other stuff.

```ts
console.log(Is.enabled.cookies());
console.log(Is.enabled.localStorage());
console.log(Is.enabled.sessionStorage());
console.log(Is.enabled.indexedDB());
console.log(Is.enabled.webWorkers()); 
console.log(Is.enabled.serviceWorkers());
console.log(Is.enabled.notifications());
console.log(Is.enabled.pushNotifications());
console.log(Is.enabled.geoLocation()); // also geolocation is an alias (with lower L)
console.log(Is.enabled.webRTC());
console.log(Is.enabled.webAudio()); 
console.log(Is.enabled.microphone());
console.log(Is.enabled.camera());
console.log(Is.enabled.speechRecognition());
console.log(Is.enabled.speechSynthesis());
console.log(Is.enabled.fullScreen()); // also fullscreen is an alias (with lower S)
console.log(Is.enabled.vibration());
console.log(Is.enabled.touch());
console.log(Is.enabled.battery());
console.log(Is.enabled.fetch());
console.log(Is.enabled.history());
console.log(Is.enabled.darkMode()); // will validate prefers-color-scheme media query (dark mode)
console.log(Is.enabled.lightMode()); // will validate prefers-color-scheme media query (light mode)
console.log(Is.enabled.animation());
console.log(Is.enabled.transition());
```

## Conclusion

Finally i hope you enjoy this package, and if you have any suggestions or ideas, please feel free to post a comment to me in this post, it will be appreciated.

To see the entire package documentation, please visit the [repository page](https://github.com/hassanzohdy/supportive-is)ز