Supportive Is: an elegant utility to check types of values in JavaScript

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

npm i @mongez/supportive-is

OR

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.

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:

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

Check for number:

Is.number(123); // true

Check for boolean:

Is.boolean(true); // true

Or Is.bool for short:

Is.bool(true); // true

Check for null:

Is.null(null); // true

Check for undefined:

Is.undefined(undefined); // true

Check for symbol:

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

Check for bigint:

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

Check for integer:

Is.integer(123); // true

Or Is.int for short:

Is.int(123); // true

Check for float:

Is.float(123.45); // true

Check for numeric:

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:

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:

Is.object(null);

Check for only plain objects:

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

Check for array:

Is.array([]); // true

Check for date:

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

Check for map:

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

Check for set:

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

Check for weakmap:

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

Check for weakset:

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

Check for promise:

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

Check for error:

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

Check for regular expression:

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.

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.

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:

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:

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

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

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

Check if element is in the DOM:

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

Check if the given value is a form element

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:

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

Check if the given value is a form data

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}():

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:

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.

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ز