JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
Log Output:
<p id="log"></p>
</body>
</html>
JavaScript
//log helper
function log(msg) {
if(document.getElementById('log')) {
document.getElementById('log').innerHTML += msg;
document.getElementById('log').innerHTML += '<br>';
} else {
console.log(msg);
}
}
// how to write guards in javascript
log('');
log('testing guards for var x = null;');
var x = null;
if(!x) log(' if(!x) ✓');
if(x == null) log('if(x == null) ✓');
if(x == undefined) log(' if(x == undefined) ✓');
if(typeof x == 'undefined') log(" if(typeof x == 'undefined')");
log('');
log('testing guards for var y;');
var y;
if(!y) log(' if(!y) ✓');
if(y == null) log(' if(y == null) ✓');
if(y == undefined) log(' if(y == undefined) ✓');
if(typeof y == 'undefined') log(" if(typeof y == 'undefined') ✓");
// if you redefine undefined if(x == undefined) doesnt work anymore
log('');
log("testing guards for var y; and var undefined = 'a value';");
var undefined = 'a value';
if(!y) log(' if(!y) ✓');
if(y == null) log(' if(y == null) ✓');
if(y == undefined) log(' if(y == undefined) ✓');
if(typeof y == 'undefined') log(" if(typeof y == 'undefined') ✓");
//if you guard with if(x) you get other falsy values like "", 0, false
log('');
log('testing guards for var f1 = "";');
var f1 = "";
if(!f1) log(' if(!f1) ✓');
if(f1 == null) log(' if(f1 == null)');
if(f1 == undefined) log(' if(f1 == undefined)');
if(typeof f1 == 'undefined') log(" if(typeof f1 == 'undefined')");
log('');
log('testing guards for var f2 = 0;');
var f2 = 0;
if(!f2) log(' if(!f2) ✓');
if(f2 == null) log(' if(f2 == null)');
if(f2 == undefined) log(' if(f2 == undefined)');
if(typeof f2 == 'undefined') log(" if(typeof f2 == 'undefined')");
log('');
log('testing guards for var f3 = false;');
var f3 = false;
if(!f3) log(' if(!f3) ✓');
if(f3 == null) log(' if(f3 == null)');
if(f3 == undefined) log(' if(f3 == undefined)');
if(typeof f3 == 'undefined') log(" if(typeof f3 == 'undefined')");