JSFiddle - React, Tailwind, and code Playground

by Jay Lim

HTML

<ul id="results"></ul>

CSS

#results {width: auto; padding: 10px; margin: 10px; border: 1px #eee solid; background: #fff;}
#results li {list-style-position: inside; list-style-type: none; padding: 0; margin: 0;}
.pass {color: green;}
.fail {color: red;}

JavaScript

function assert(value, desc){
 var li = document.createElement('li');
 li.className = value ? 'pass' : 'fail';
 li.appendChild(document.createTextNode(desc));
 document.getElementById('results').appendChild(li);
}

function addMethod(object, name, fn){
 var old = object[name];
 object[name] = function(){
  if(fn.length == arguments.length){
   return fn.apply(this, arguments);
  } else if (typeof old == 'function') {
   return old.apply(this, arguments);
  }
 };
}

var testObj = {};

addMethod(testObj, 'sameName', function(){
 console.log('인자가 없다.');
 return 0;
});
addMethod(testObj, 'sameName', function(a){
 console.log('인자 하나를 전달 받았다.');
 return 1;
});
addMethod(testObj, 'sameName', function(a, b){
 console.log('인자 두개를 전달 받았다.');
 return 2;
});

assert(testObj.sameName() == 0, '인자가 없는 메서드 검증');
assert(testObj.sameName(undefined) == 1, '인자가 하나인 메서드 검증');
assert(testObj.sameName(undefined, undefined) == 2, '인자가 둘인 메서드 검증');