Skip to content

Instantly share code, notes, and snippets.

@LissetteIbnz

LissetteIbnz/spike

Created December 14, 2020 23:06
Show Gist options
  • Save LissetteIbnz/a326fb4422db10297b41e9288dafdb0a to your computer and use it in GitHub Desktop.
Save LissetteIbnz/a326fb4422db10297b41e9288dafdb0a to your computer and use it in GitHub Desktop.
Download ZIP
Alternative switch and mapped object
Raw
spike
<body>
<script>
const printResult = (item) => console.log(`Selected option '${item}'.`);
const mappedObject = {
option1: printResult,
option2: printResult,
option3: printResult,
option4: printResult,
option5: printResult,
option6: printResult,
option7: printResult,
option8: printResult,
option9: printResult,
option10: printResult,
option11: printResult,
option12: printResult,
option13: printResult,
option14: printResult,
option15: printResult,
option16: printResult,
option17: printResult,
option18: printResult,
option19: printResult,
option20: printResult,
option21: printResult,
option22: printResult,
option23: printResult,
option24: printResult,
option25: printResult,
option26: printResult,
option27: printResult,
option28: printResult,
option29: printResult,
option30: printResult,
option31: printResult,
option32: printResult,
option33: printResult,
option34: printResult,
option35: printResult,
option36: printResult,
option37: printResult,
option38: printResult,
option39: printResult,
option40: printResult,
option41: printResult,
option42: printResult,
option43: printResult,
option44: printResult,
option45: printResult,
option46: printResult,
option47: printResult,
option48: printResult,
option49: printResult,
option50: printResult,
option51: printResult,
option52: printResult,
option53: printResult,
option54: printResult,
option55: printResult,
option56: printResult,
option57: printResult,
option58: printResult,
option59: printResult,
option60: printResult,
option61: printResult,
option62: printResult,
option63: printResult,
option64: printResult,
option65: printResult,
option66: printResult,
option67: printResult,
option68: printResult,
option69: printResult,
option70: printResult,
option71: printResult,
option72: printResult,
option73: printResult,
option74: printResult,
option75: printResult,
option76: printResult,
option77: printResult,
option78: printResult,
option79: printResult,
option80: printResult,
option81: printResult,
option82: printResult,
option83: printResult,
option84: printResult,
option85: printResult,
option86: printResult,
option87: printResult,
option88: printResult,
option89: printResult,
option90: printResult,
option91: printResult,
option92: printResult,
option93: printResult,
option94: printResult,
option95: printResult,
option96: printResult,
option97: printResult,
option98: printResult,
option99: printResult,
option100: printResult,
default: printResult,
};
const switchFunction = (item) => {
switch (item) {
case 'option1':
printResult(item);
break;
case 'option2':
printResult(item);
break;
case 'option3':
printResult(item);
break;
case 'option4':
printResult(item);
break;
case 'option5':
printResult(item);
break;
case 'option6':
printResult(item);
break;
case 'option7':
printResult(item);
break;
case 'option8':
printResult(item);
break;
case 'option9':
printResult(item);
break;
case 'option10':
printResult(item);
break;
case 'option11':
printResult(item);
break;
case 'option12':
printResult(item);
break;
case 'option13':
printResult(item);
break;
case 'option14':
printResult(item);
break;
case 'option15':
printResult(item);
break;
case 'option16':
printResult(item);
break;
case 'option17':
printResult(item);
break;
case 'option18':
printResult(item);
break;
case 'option19':
printResult(item);
break;
case 'option20':
printResult(item);
break;
case 'option21':
printResult(item);
break;
case 'option22':
printResult(item);
break;
case 'option23':
printResult(item);
break;
case 'option24':
printResult(item);
break;
case 'option25':
printResult(item);
break;
case 'option26':
printResult(item);
break;
case 'option27':
printResult(item);
break;
case 'option28':
printResult(item);
break;
case 'option29':
printResult(item);
break;
case 'option30':
printResult(item);
break;
case 'option31':
printResult(item);
break;
case 'option32':
printResult(item);
break;
case 'option33':
printResult(item);
break;
case 'option34':
printResult(item);
break;
case 'option35':
printResult(item);
break;
case 'option36':
printResult(item);
break;
case 'option37':
printResult(item);
break;
case 'option38':
printResult(item);
break;
case 'option39':
printResult(item);
break;
case 'option40':
printResult(item);
break;
case 'option41':
printResult(item);
break;
case 'option42':
printResult(item);
break;
case 'option43':
printResult(item);
break;
case 'option44':
printResult(item);
break;
case 'option45':
printResult(item);
break;
case 'option46':
printResult(item);
break;
case 'option47':
printResult(item);
break;
case 'option48':
printResult(item);
break;
case 'option49':
printResult(item);
break;
case 'option50':
printResult(item);
break;
case 'option51':
printResult(item);
break;
case 'option52':
printResult(item);
break;
case 'option53':
printResult(item);
break;
case 'option54':
printResult(item);
break;
case 'option55':
printResult(item);
break;
case 'option56':
printResult(item);
break;
case 'option57':
printResult(item);
break;
case 'option58':
printResult(item);
break;
case 'option59':
printResult(item);
break;
case 'option60':
printResult(item);
break;
case 'option61':
printResult(item);
break;
case 'option62':
printResult(item);
break;
case 'option63':
printResult(item);
break;
case 'option64':
printResult(item);
break;
case 'option65':
printResult(item);
break;
case 'option66':
printResult(item);
break;
case 'option67':
printResult(item);
break;
case 'option68':
printResult(item);
break;
case 'option69':
printResult(item);
break;
case 'option70':
printResult(item);
break;
case 'option71':
printResult(item);
break;
case 'option72':
printResult(item);
break;
case 'option73':
printResult(item);
break;
case 'option74':
printResult(item);
break;
case 'option75':
printResult(item);
break;
case 'option76':
printResult(item);
break;
case 'option77':
printResult(item);
break;
case 'option78':
printResult(item);
break;
case 'option79':
printResult(item);
break;
case 'option80':
printResult(item);
break;
case 'option81':
printResult(item);
break;
case 'option82':
printResult(item);
break;
case 'option83':
printResult(item);
break;
case 'option84':
printResult(item);
break;
case 'option85':
printResult(item);
break;
case 'option86':
printResult(item);
break;
case 'option87':
printResult(item);
break;
case 'option88':
printResult(item);
break;
case 'option89':
printResult(item);
break;
case 'option90':
printResult(item);
break;
case 'option91':
printResult(item);
break;
case 'option92':
printResult(item);
break;
case 'option93':
printResult(item);
break;
case 'option94':
printResult(item);
break;
case 'option95':
printResult(item);
break;
case 'option96':
printResult(item);
break;
case 'option97':
printResult(item);
break;
case 'option98':
printResult(item);
break;
case 'option99':
printResult(item);
break;
case 'option100':
printResult(item);
break;
default:
printResult('default');
break;
}
};
const mappedFunction = (item) => {
mappedObject[item] ? mappedObject[item](item) : mappedObject.default('default');
};
const mapObject = new Map([
["option1", printResult],
["option2", printResult],
["option3", printResult],
["option4", printResult],
["option5", printResult],
["option6", printResult],
["option7", printResult],
["option8", printResult],
["option9", printResult],
["option10", printResult],
["option11", printResult],
["option12", printResult],
["option13", printResult],
["option14", printResult],
["option15", printResult],
["option16", printResult],
["option17", printResult],
["option18", printResult],
["option19", printResult],
["option20", printResult],
["option21", printResult],
["option22", printResult],
["option23", printResult],
["option24", printResult],
["option25", printResult],
["option26", printResult],
["option27", printResult],
["option28", printResult],
["option29", printResult],
["option30", printResult],
["option31", printResult],
["option32", printResult],
["option33", printResult],
["option34", printResult],
["option35", printResult],
["option36", printResult],
["option37", printResult],
["option38", printResult],
["option39", printResult],
["option40", printResult],
["option41", printResult],
["option42", printResult],
["option43", printResult],
["option44", printResult],
["option45", printResult],
["option46", printResult],
["option47", printResult],
["option48", printResult],
["option49", printResult],
["option50", printResult],
["option51", printResult],
["option52", printResult],
["option53", printResult],
["option54", printResult],
["option55", printResult],
["option56", printResult],
["option57", printResult],
["option58", printResult],
["option59", printResult],
["option60", printResult],
["option61", printResult],
["option62", printResult],
["option63", printResult],
["option64", printResult],
["option65", printResult],
["option66", printResult],
["option67", printResult],
["option68", printResult],
["option69", printResult],
["option70", printResult],
["option71", printResult],
["option72", printResult],
["option73", printResult],
["option74", printResult],
["option75", printResult],
["option76", printResult],
["option77", printResult],
["option78", printResult],
["option79", printResult],
["option80", printResult],
["option81", printResult],
["option82", printResult],
["option83", printResult],
["option84", printResult],
["option85", printResult],
["option86", printResult],
["option87", printResult],
["option88", printResult],
["option89", printResult],
["option90", printResult],
["option91", printResult],
["option92", printResult],
["option93", printResult],
["option94", printResult],
["option95", printResult],
["option96", printResult],
["option97", printResult],
["option98", printResult],
["option99", printResult],
["option100", printResult],
]);
const setFunction = item => {
return mapObject.get(item);
}
const chronoSwitchFunction = (item) => {
const startAt = performance.now();
switchFunction(item);
const endAt = performance.now();
const result = `[SWITCH] - For item '${item}' it toke ${endAt - startAt} ms.`;
console.log(result);
document.getElementById('switchResults').innerHTML = result;
}
const chronoMappedFunction = (item) => {
const startAt = performance.now();
mappedFunction(item);
const endAt = performance.now();
const result = `[MAPPED] - For item '${item}' it toke ${endAt - startAt} ms.`;
console.log(result);
document.getElementById('mappedResults').innerHTML = result;
}
const chronoSetFunction = (item) => {
const startAt = performance.now();
setFunction(item);
const endAt = performance.now();
const result = `[SET] - For item '${item}' it toke ${endAt - startAt} ms.`;
console.log(result);
document.getElementById('setResults').innerHTML = result;
}
const startRace = () => {
const item = document.getElementById('optionField').value;
chronoSwitchFunction(item)
chronoMappedFunction(item)
chronoSetFunction(item)
}
</script>
<div><span>Inser your option here:</span><input type="text" name="optionField" id="optionField"></div>
<div><input type="button" value="Run Script Race" onclick="startRace()"></div>
<div>
<h2>Results for engine: <span id="navigatorField"></span></h2>
</div>
<div>
<ul>
<li id="switchResults"></li>
<li id="mappedResults"></li>
<li id="setResults"></li>
</ul>
</div>
<script>
document.getElementById('navigatorField').innerHTML = navigator.userAgent;
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment