Java Script: Hoisting & Scope

<!DOCTYPE html>
<html>
  <body>
    <ul id="result">
      
    </ul>
    <script type="text/javascript">
      function msg(msg, style){
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(msg));
        li.setAttribute("style", 'color:'+(style?style:"green")+";");
        document.getElementById("result").appendChild(li);
      }
      function info(name, obj){
        var mm = name ;
        if(typeof obj === "undefined"){
          mm += " is undefined";
          msg(mm, 'red');
        }else{
          mm += " is a " + typeof obj;
          msg(mm);
        } 
      }
      // Normal Declare
      msg("before var func", "blue");
      info("var func1:", test);
      var test = function(){};
      msg("after var func", "blue");
      info("var func1:", test);
      
      msg("", "black");
      
      msg("before var str", "blue");
      info("var str:", test2);
      var test2 = "";
      msg("after var str", "blue");
      info("var str:", test2);
      
      msg("", "black");
      
      msg("before function func", "blue");
      info("function func:", test3);
      function test3(){};
      msg("after function func", "blue");
      info("function func:", test3);
      
      msg("------------------------------------------------------", "black");
      
      
      // Declare in a if block
      msg("outer block before var func", "blue");
      info("var func:", test4);
      if(true){
        msg("in block before var func", "blue");
        info("var func:", test4);
        var test4 = function(){};
        
        msg("in block after var func", "blue");
        info("var func:", test4);
      }
      msg("outer block after var func", "blue");
      info("var func:", test4);
      
      msg("", "black");
      
      msg("outer block before var str", "blue");
      info("var str:", test5);
      if(true){
        msg("in block before var str", "blue");
        info("var str:", test5);
        var test5 = "";
        
        msg("in block after var str", "blue");
        info("var str:", test5);
      }
      msg("outer block after var str", "blue");
      info("var str:", test5);
      
      msg("", "black");
      
      msg("outer block before var func", "blue");
      info("var func:", test6);
      if(true){
        msg("in block before var func", "blue");
        info("var func:", test6);
        function test6(){};
        
        msg("in block after var func", "blue");
        info("var func:", test6);
      }
      msg("outer block after var func", "blue");
      info("var func:", test6);
      
      msg("------------------------------------------------------", "black");
      
      // Declare in a function block
      msg("out of function scope before var func", "blue");
      msg("Error: var func is not defined", "red");
      (function(){
        msg("in function scope before var func", "blue");
        info("var func:", test7);
        var test7 = function(){};
        
        msg("in function scope after var func", "blue");
        info("var func:", test7);
      })();
      msg("outer function scope after var func", "blue");
      msg("Error: var func is not defined", "red");
      
      msg("", "black");
      
      msg("out of function scope before var str", "blue");
      msg("Error: var str is not defined", "red");
      (function(){
        msg("in function scope before var str", "blue");
        info("var str:", test8);
        var test8 = "";
        
        msg("in function scope after var str", "blue");
        info("var str:", test8);
      })();
      msg("outer function scope after var str", "blue");
      msg("Error: var str is not defined", "red");
      
      msg("", "black");
      
      msg("out of function scope before function func", "blue");
      msg("Error: function func is not defined", "red");
      (function(){
        msg("in function scope before function func", "blue");
        info("function func:", test9);
        function test9(){};
        msg("in function scope after function func", "blue");
        info("function func:", test9);
      })();
      msg("outer function scope after function func", "blue");
      msg("Error: function func is not defined", "red");
      
    </script>
  </body>
</html>