JavaScript `is` Helper Function

In this example below you will see how to do a JavaScript `is` Helper Function with some HTML / CSS and Javascript

`is` can be used with every object and allows you to get its class as String. This is more consistend as the use of the JavaScript `typeof` function and allows better detection of native classes.

Thumbnail
This awesome code was written by 0x04, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x04 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JavaScript `is` Helper Function</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>JavaScript `is` Helper Function</h1>
<p>`is` can be used with every object and allows you to get its class as String. This is more consistend as the use of the JavaScript `typeof` function and allows better detection of native classes.</p>
<p>@license MIT</p>
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Using_toString_to_detect_object_type">Using toString() to detect object class</a> for more details, or take a look to the code.</p>
<h2>Here are some comparisation asserts between <a href="#typeof">typeof</a> and <a href="#is">is</a>:</h2>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0x04/javascript-is-helper-function-GpltB */
body
{
  padding: 10px;
  background: linear-gradient(
      45deg,
      #333 25%,
      #222 25%,
      #222 50%,
      #222 50%,
      #333 50%,
      #333 75%,
      #222 75%
  );
  background-size: 64px 64px;
  font-family: monospace;
  font-weight: bold;
  color: #fff;
}

a
{
  color: #fff;
}

.assert
{
  padding: 20px;
  margin-bottom: 5px;
  border-radius: 8px;
}

.assert-success
{
  background-color: #393;
  border-left: 20px solid #363;
}

.assert-fail
{
  background-color: #933;
  border-left: 20px solid #633;
}

/*Downloaded from https://www.codeseek.co/0x04/javascript-is-helper-function-GpltB */
//------------------------------------------------------------------------------
//
// @section Definition of `is` helper function
//
//------------------------------------------------------------------------------

/**
 * Returns the internal class name of the given object.
 * @see {Using toString() to detect object class|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Using_toString_to_detect_object_type}
 * @param {*} value
 * @return {String} 'Array', 'Boolean', 'Date', 'Number', 'Object' etc.
 */
function is(value)
{
  var string = Object.prototype.toString.call(value);

  // `string` contains something like "[object Object]"
  // so extract the interessting part:         ^^^^^^.
  // Quite simple :-)
  return string.substring(8, string.length - 1);
}


//------------------------------------------------------------------------------
//
// @section Demo
//
//------------------------------------------------------------------------------

var asserts = document.createElement('div');
asserts.classList.add('asserts');
document.body.appendChild(asserts);

function createAssertElement(text, result)
{
  var assert = document.createElement('div');
  assert.classList.add('assert', result ? 'assert-success' : 'assert-fail');
  assert.innerHTML = text;
  return assert;
}

function assert(text, result)
{
  asserts.appendChild(createAssertElement(text, result));
}

header = document.createElement('h3');
header.textContent = 'typeof ...';
header.id = 'typeof';
asserts.appendChild(header);

assert('typeof true == "boolean"', typeof true == "boolean");
assert('typeof [ 1, 2, 3 ] == "array"', typeof [ 1, 2, 3 ] == "array");
assert('typeof tfunction(){}rue == "boolean"', typeof function(){} == "function");
assert('typeof new Date() == "date"', typeof new Date() == "date");
assert('typeof 0x133700 == "number"', typeof 0x133700 == "number");
assert('typeof { a: 1 } == "object"', typeof { a: 1 } == "object");
assert('typeof /test/ == "regexp"', typeof /test/ == "regexp");
assert('typeof "foobar" == "string"', typeof "foobar" == "string");
assert('typeof new function(){} == "object"', typeof new function(){} == "object");
assert('typeof document == "htmldocument"', typeof document == "htmldocument");


header = document.createElement('h3');
header.textContent = 'is(...)';
header.id = 'is';
asserts.appendChild(header);

assert('is(true) == "Boolean"', is(true) == "Boolean");
assert('is([ 1, 2, 3 ]) == "Array"', is([ 1, 2, 3 ]) == "Array");
assert('is(function(){}) == "Function"', is(function(){}) == "Function");
assert('is(new Date()) == "Date"', is(new Date()) == "Date");
assert('is(0x133700) == "Number"', is(0x133700) == "Number");
assert('is({ a: 1 }) == "Object"', is({ a: 1 }) == "Object");
assert('is(/test/) == "RegExp"', is(/test/) == "RegExp");
assert('is("foobar") == "String"', is("foobar") == "String");
assert('is(new function(){}) == "Object"', is(new function(){}) == "Object");
assert('is(document) == "HTMLDocument"', is(document) == "HTMLDocument");
// and so on.

Comments