<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]();
});
This Pen doesn't use any external CSS resources.