JSFiddle - React, Tailwind, and code Playground

by Jay Lim

HTML

<div class="card">
  <h2>typeof 연산자</h2>
  <ul>
    <li onclick="alertType(1)">var typeOne;</li>
    <li onclick="alertType(2)">var typeTwo = '김경민';</li>
    <li onclick="alertType(3)">var typeThree = 18;</li>
    <li onclick="alertType(4)">var typeFour = null;</li>
    <li onclick="alertType(5)">var typeFive = function(){...}</li>
  </ul>  
</div>

CSS

.card {width: 180px; height: 180px; padding: 10px; margin: 20px; background: white; border: 1px #ededed solid;}
.card h2 {font-size: 14px; padding: 0; margin-bottom: 10px;}
.card ul {width: 100%; list-style-type: none; padding: 0; margin: 0; font-size: 12px;}
.card ul li {height: 18px;text-indent: 6px;}
.card ul li:hover {cursor: pointer;}
.card ul li:hover:after {content: '클릭'; font-size: 10px; color: #ddd; margin-left: 10px;}

JavaScript

var typeOne,
typeTwo = '김경민',
typeThree = 18,
typeFour = null,
typeFive = function(){
	alert('Clicked Function');
};

alertType = function(idx){
	if(idx == 1){
  	alert(typeof typeOne);
  } else if(idx == 2){
  	alert(typeof typeTwo);
  } else if(idx == 3){
  	alert(typeof typeThree);
  } else if(idx == 4){
  	alert(typeof typeFour);
  } else if(idx == 5){
  	alert(typeof typeFive);
  }
}