Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="null vs undefined">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
var button = document.getElementsByTagName('button');
var message = 'This was previously defined';
function buttonArea(container){
  return function(text, func){
     var button = document.createElement('button');
     button.textContent = text;
     button.onclick = func;
     container.appendChild(button);
  };
}
var addButton = buttonArea(document.getElementsByTagName('body')[0]);

addButton('default', function(){
  logTextWithDefault();
  logTextWithOr();
});
addButton('defined', function(){
  logTextWithDefault(message);
  logTextWithOr(message);
});
addButton('undefined', function(){
  logTextWithDefault(undefined);
  logTextWithOr(undefined);
});
addButton('null', function(){
  logTextWithDefault(null);
  logTextWithOr(null);
});

addButton('log equality checks', function(){
  console.log(
    'null === undefined', null === undefined
  );
  console.log(
    'null == undefined', null == undefined
  );
  console.log(
    'null === null', null === null
  );
  console.log(
    'null == null', null == null
  );
  console.log(
    'undefined === undefined', undefined === undefined
  );
  console.log(
    'undefined == undefined', undefined == undefined
  );
});

addButton('log type checks', function(){
  console.log(
    `typeof null: ${typeof null}`
  );
  console.log(
    `typeof undefined: ${typeof undefined}`
  );
});

addButton('log coercion checks', function(){
  console.log(
    `string coercion \n null: ${null} \n undefined: ${undefined}`
  );
  console.log('number coercion of null');
  console.log(null + 1);
  console.log('number coercion of undefined');
  console.log(undefined + 1);
  console.log('boolean coercion of null');
  console.log(!!null);
  console.log('boolean coercion of undefined');
  console.log(!!undefined);
});

addButton('declaring undefined and null', function(){
  //var null = 'And now for...';
  var undefined = 'Something completely different';
  var someVar;
  console.log('declaring null results in a error');
  console.log('declaring a variable or function with the name undefined...', undefined);
  console.log("a variable that wasn't defined is still...", someVar);
  someVar = undefined;
  console.log('but if explicitly set will get the local instance variable undefined instead of the type...', someVar);
});


var logTextWithDefault = (message='default argument') => {
  console.log(message);
};
var logTextWithOr = function(someValue){
  var internalValue = someValue || 'default value';
  console.log(internalValue);
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">var button = document.getElementsByTagName('button');
var message = 'This was previously defined';
function buttonArea(container){
  return function(text, func){
     var button = document.createElement('button');
     button.textContent = text;
     button.onclick = func;
     container.appendChild(button);
  };
}
var addButton = buttonArea(document.getElementsByTagName('body')[0]);

addButton('default', function(){
  logTextWithDefault();
  logTextWithOr();
});
addButton('defined', function(){
  logTextWithDefault(message);
  logTextWithOr(message);
});
addButton('undefined', function(){
  logTextWithDefault(undefined);
  logTextWithOr(undefined);
});
addButton('null', function(){
  logTextWithDefault(null);
  logTextWithOr(null);
});

addButton('log equality checks', function(){
  console.log(
    'null === undefined', null === undefined
  );
  console.log(
    'null == undefined', null == undefined
  );
  console.log(
    'null === null', null === null
  );
  console.log(
    'null == null', null == null
  );
  console.log(
    'undefined === undefined', undefined === undefined
  );
  console.log(
    'undefined == undefined', undefined == undefined
  );
});

addButton('log type checks', function(){
  console.log(
    `typeof null: ${typeof null}`
  );
  console.log(
    `typeof undefined: ${typeof undefined}`
  );
});

addButton('log coercion checks', function(){
  console.log(
    `string coercion \n null: ${null} \n undefined: ${undefined}`
  );
  console.log('number coercion of null');
  console.log(null + 1);
  console.log('number coercion of undefined');
  console.log(undefined + 1);
  console.log('boolean coercion of null');
  console.log(!!null);
  console.log('boolean coercion of undefined');
  console.log(!!undefined);
});

addButton('declaring undefined and null', function(){
  //var null = 'And now for...';
  var undefined = 'Something completely different';
  var someVar;
  console.log('declaring null results in a error');
  console.log('declaring a variable or function with the name undefined...', undefined);
  console.log("a variable that wasn't defined is still...", someVar);
  someVar = undefined;
  console.log('but if explicitly set will get the local instance variable undefined instead of the type...', someVar);
});


var logTextWithDefault = (message='default argument') => {
  console.log(message);
};
var logTextWithOr = function(someValue){
  var internalValue = someValue || 'default value';
  console.log(internalValue);
}</script></body>
</html>