This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hasan Zohdy
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
falseif the value is adocumentorwindowobject.
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 returntrueif 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ز
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hasan Zohdy
Hasan Zohdy | Sciencx (2022-10-11T20:41:31+00:00) Supportive Is: an elegant utility to check types of values in JavaScript. Retrieved from https://www.scien.cx/2022/10/11/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.