<h3>JS ES5 Console Test</h3>
<p>Open console window for test.</p>
<button>functionalScopeTest</button>
<button>overlapValNameTest</button>
<button>skipVarKeywordValueTest</button>
<button>valueHoistingTest1</button>
<button>valueHoistingTest2</button>
<button>functionHoistingTest</button>
<button>hoistingExam1</button>
<button>hoistingExam2</button>
<button>hoistingExam3</button>
var overlapValue = 10;

function skipVarKeywordValueTest() {
  skipVarKeywordValue = 20;
}

var handler = {
  functionalScopeTest: function() {
    console.log("유효범위");
    var a = 0;
    if (true) {
      var b = 0;
      for (var c = 0; c < 5; c++) {
        console.log("c=" + c);
      }
      console.log("c=" + c);
    }
    console.log("b=" + b);
  },

  overlapValNameTest: function() {
    console.log("변수명 중복");
    var overlapValue = 20;
    console.log("overlapValue = " + overlapValue);
  },

  skipVarKeywordValueTest: function() {
    console.log("var 생략");
    skipVarKeywordValueTest();
    console.log("skipVarKeywordValue = " + skipVarKeywordValue);
  },

  valueHoistingTest1: function() {
    console.log("변수 호이스팅 1");
    console.log("valueHoistingValue1=" + valueHoistingValue1);
    var valueHoistingValue1 = 10;
    console.log("valueHoistingValue1=" + valueHoistingValue1)
  },

  valueHoistingTest2: function() {
    console.log("변수 호이스팅 2");
    var valueHoistingValue2;
    console.log("valueHoistingValue2=" + valueHoistingValue2);
    valueHoistingValue2 = 10;
    console.log("valueHoistingValue2=" + valueHoistingValue2);
  },

  functionHoistingTest: function() {
    console.log("함수 호이스팅");
    var functionHoistingValue = 30;

    function hoistingExam() {
      console.log("functionHoistingValue=" + functionHoistingValue);
      var functionHoistingValue = 10;
      console.log("functionHoistingValue=" + functionHoistingValue);
    }
    hoistingExam();
  },

  hoistingExam1: function() {
    console.log("함수 선언문 호이스팅");
    hoistingExam1();

    function hoistingExam1() {
      var hoisting_val = 10;
      console.log("hoisting_val =" + hoisting_val);
    }
  },

  hoistingExam2: function() {
    console.log("함수 표현식 호이스팅");
    hoistingExam2();
    var hoistingExam2 = function() {
      var hoisting_val = 10;
      console.log("hoisting_val =" + hoisting_val);
    }
  },

  hoistingExam3: function() {
    console.log("함수 생성자 호이스팅");
    hoistingExam3();
    var hoistingExam3 = new Function("", "return console.log('hoisting');");
  }

};

// event binding for test
$("button").click(function() {
  var name = $(this).text();
  console.log("[%s]", name);
  handler[name]();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js