JSFiddle - React, Tailwind, and code Playground

!!(typeof x) test

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<table class="table table-condensed table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th><code>typeof x</code></th>
      <th><code>typeof x !== 'undefined'</code></th>
      <th><code>!_.isUndefined(x)</code></th>
      <th><code>!_.isNil(x)</code></th>
      <th><code>!_.isEmpty(x)</code></th>
    <tr>
  </thead>
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>
<script type="text/html" id="template">
  {{#each this}}
  	<tr>
      <td>{{name}}</td>
      <td>{{typeof value}}</td>
      <td>{{typeNotUndefined value}}</td>
      <td>{{isUndefined value}}</td>
      <td>{{isNil value}}</td>
      <td>{{isEmpty value}}</td>
    </tr>
  {{/each}}
</script>

JavaScript

var tests = [
	{
  	name: 'No key'
  },
	{
  	name: 'undefined',
    value: undefined
  },
	{
  	name: 'null',
    value: null
  },
  {
  	name: 'Boolean',
    value: false
  },
  {
  	name: 'String',
    value: 'foo'
  },
  {
  	name: 'Number',
    value: 123
  },
  {
  	name: 'Object',
    value: { foo: 'bar' }
  },
  {
  	name: 'Array',
    value: [1, 2, 3]
  },
  {
  	name: 'function',
    value: function () { return 'foo'; }
  }
];

var src = $('#template').html();
var tpl = Handlebars.compile(src);

Handlebars.registerHelper('typeof', function (value) {
	return typeof value;
});

Handlebars.registerHelper('typeNotUndefined', function (value, context) {
	return typeof value !== 'undefined';
});

Handlebars.registerHelper('isUndefined', function (value) {
	return !_.isUndefined(value);
});

Handlebars.registerHelper('isNil', function (value) {
	return !_.isNil(value);
});

Handlebars.registerHelper('isEmpty', function (value) {
	return !_.isEmpty(value);
});

$('tbody').html(tpl(tests));