DEV Community

Hasan Zohdy
Hasan Zohdy

Posted on

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

#is #typescript #javascript #mongez

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
Enter fullscreen mode Exit fullscreen mode

OR

yarn add @mongez/supportive-is
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Check for number:

Is.number(123); // true
Enter fullscreen mode Exit fullscreen mode

Check for boolean:

Is.boolean(true); // true
Enter fullscreen mode Exit fullscreen mode

Or Is.bool for short:

Is.bool(true); // true
Enter fullscreen mode Exit fullscreen mode

Check for null:

Is.null(null); // true
Enter fullscreen mode Exit fullscreen mode

Check for undefined:

Is.undefined(undefined); // true
Enter fullscreen mode Exit fullscreen mode

Check for symbol:

Is.symbol(Symbol('hello world')); // true
Enter fullscreen mode Exit fullscreen mode

Check for bigint:

Is.bigint(BigInt(123)); // true
Enter fullscreen mode Exit fullscreen mode

Check for integer:

Is.integer(123); // true
Enter fullscreen mode Exit fullscreen mode

Or Is.int for short:

Is.int(123); // true
Enter fullscreen mode Exit fullscreen mode

Check for float:

Is.float(123.45); // true
Enter fullscreen mode Exit fullscreen mode

Check for numeric:

Is.numeric(123); // true Is.numeric('123'); // true
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Is.object(null);
Enter fullscreen mode Exit fullscreen mode

Check for only plain objects:

Is.plainObject({}); // true Is.plainObject([]); Is.plainObject(new Date()); Is.plainObject(new Map());
Enter fullscreen mode Exit fullscreen mode

Check for array:

Is.array([]); // true
Enter fullscreen mode Exit fullscreen mode

Check for date:

Is.date(new Date()); // true
Enter fullscreen mode Exit fullscreen mode

Check for map:

Is.map(new Map()); // true
Enter fullscreen mode Exit fullscreen mode

Check for set:

Is.set(new Set()); // true
Enter fullscreen mode Exit fullscreen mode

Check for weakmap:

Is.weakmap(new WeakMap()); // true
Enter fullscreen mode Exit fullscreen mode

Check for weakset:

Is.weakset(new WeakSet()); // true
Enter fullscreen mode Exit fullscreen mode

Check for promise:

Is.promise(new Promise(() => {})); // true
Enter fullscreen mode Exit fullscreen mode

Check for error:

Is.error(new Error('An Error In The Sky')); // true
Enter fullscreen mode Exit fullscreen mode

Check for regular expression:

Is.regexp(/hello/); // true Is.regexp(new RegExp('hello')); // true
Enter fullscreen mode Exit fullscreen mode

🔥 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
Enter fullscreen mode Exit fullscreen mode

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

Is.empty({ length: 0 });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Is.hidden(document.querySelector('body'));
Enter fullscreen mode Exit fullscreen mode

Check if element is in the DOM:

Is.inDOM(document.querySelector('.my-element')); // true
Enter fullscreen mode Exit fullscreen mode

Check if the given value is a form element

Is.form(document.querySelector('form')); // true
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Check if the given value is a form data

Is.formData(new FormData()); // true
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

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ز

Top comments (0)