275 lines
100 KiB
HTML
275 lines
100 KiB
HTML
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Utility - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
|
||
let matchingTags = [];
|
||
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||
if(data.includes(true)){
|
||
x.style.display = '';
|
||
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
||
}
|
||
else x.style.display = 'none';
|
||
});
|
||
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
|
||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||
})
|
||
}
|
||
function scrollToTop(){
|
||
const c = document.querySelector('main').scrollTop;
|
||
if (c > 0) {
|
||
window.requestAnimationFrame(scrollToTop);
|
||
document.querySelector('main').scrollTo(0, c - c / 4);
|
||
}
|
||
};
|
||
function scrollTo(element, to, id, duration) {
|
||
if (duration <= 0) return;
|
||
var difference = to - element.scrollTop;
|
||
var perTick = difference / duration * 40;
|
||
|
||
setTimeout(function() {
|
||
element.scrollTop = element.scrollTop + perTick;
|
||
if (element.scrollTop === to) {
|
||
window.location.href = "#"+id;
|
||
return;
|
||
}
|
||
scrollTo(element, to, id, duration - 40);
|
||
}, 40);
|
||
};
|
||
function loader() {
|
||
registerClickListener();
|
||
if(window.innerWidth >= '768')
|
||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Utility')[0].offsetTop - 130;
|
||
else
|
||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Utility')[0].offsetTop - 65;
|
||
}
|
||
function registerClickListener() {
|
||
document.addEventListener('click', function (event) {
|
||
if( document.getElementById('doc-drawer-checkbox').checked ) {
|
||
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
|
||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||
}
|
||
}
|
||
if ( event.target.classList.contains('collapse') ) {
|
||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||
}
|
||
else if (event.target.classList.contains('clipboard-copy')) {
|
||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||
const textArea = document.createElement("textarea");
|
||
textArea.value = text.trim();
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
document.execCommand("Copy");
|
||
document.body.removeChild(textArea);
|
||
let tst = document.createElement('div');
|
||
tst.classList = 'toast';
|
||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||
document.body.appendChild(tst);
|
||
setTimeout(function() {
|
||
tst.style.opacity = 0;
|
||
setTimeout(function() {
|
||
document.body.removeChild(tst);
|
||
},300);
|
||
},1700);
|
||
}
|
||
else if (event.target.classList.contains('scroll-to-top')){
|
||
scrollToTop();
|
||
}
|
||
else if (event.target.classList.contains('sublink-1')){
|
||
if(event.target.getAttribute("href").includes('./')) return;
|
||
event.preventDefault();
|
||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||
}
|
||
}, false);
|
||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header style="height:3.5rem;box-sizing:border-box;overflow:hidden"><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height:3.5rem;padding:.375rem;box-sizing:border-box" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1><label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label></header><div class="row" style="height:calc(100vh - 3.5rem);overflow:hidden"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav class="col-md-4 col-lg-3" style="border-top:0"><div class="input-group vertical"><input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search..."></div><h3>Adapter</h3><a class="sublink-1" tags="adapter,function" href="./adapter#ary">ary</a> <a class="sublink-1" tags="adapter,function" href="./adapter#call">call</a> <a class="sublink-1" tags="adapter,function,array" href="./adapter#collectinto">collectInto</a> <a class="sublink-1" tags="adapter,function" href="./adapter#flip">flip</a> <a class="sublink-1" tags="adapter,function" href="./adapter#over">over</a> <a class="sublink-1" tags="adapter,function" href="./adapter#overargs">overArgs</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a> <a class="sublink-1" tags="adapter,function" href="./adapter#pipefunctions">pipeFunctions</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#promisify">promisify</a> <a class="sublink-1" tags="adapter,function" href="./adapter#rearg">rearg</a> <a class="sublink-1" tags="adapter" href="./adapter#spreadover">spreadOver</a> <a class="sublink-1" tags="adapter,function" href="./adapter#unary">unary</a><h3>Array</h3><a class="sublink-1" tags="array,function" href="./array#all">all</a> <a class="sublink-1" tags="array,function" href="./array#any">any</a> <a class="sublink-1" tags="array" href="./array#bifurcate">bifurcate</a> <a class="sublink-1" tags="array,function" href="./array#bifurcateby">bifurcateBy</a> <a class="sublink-1" tags="array" href="./array#chunk">chunk</a> <a class="sublink-1" tags="array" href="./array#compact">compact</a> <a class="sublink-1" tags="array,object" href="./array#countby">countBy</a> <a class="sublink-1" tags="array" href="./array#countoccurrences">countOccurrences</a> <a class="sublink-1" tags="array,recursion" href="./array#deepflatten">deepFlatten</a> <a class="sublink-1" tags="array,math" href="./array#difference">difference</a> <a class="sublink-1" tags="array,function" href="./array#differenceby">differenceBy</a> <a class="sublink-1" tags="array,function" href="./array#differencewith">differenceWith</a> <a class="sublink-1" tags="array" href="./array#drop">drop</a> <a class="sublink-1" tags="array" href="./array#dropright">dropRight</a> <a class="sublink-1" tags="array,function" href="./array#droprightwhile">dropRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#dropwhile">dropWhile</a> <a class="sublink-1" tags="array" href="./array#everynth">everyNth</a> <a class="sublink-1" tags="array" href="./array#filternonunique">filterNonUnique</a> <a class="sublink-1" tags="array" href="./array#findlast">findLast</a> <a class="sublink-1" tags="array,function" href="./array#findlastindex">findLastIndex</a> <a class="sublink-1" tags="array" href="./array#flatten">flatten</a> <a class="sublink-1" tags="array,function" href="./array#foreachright">forEachRight</a> <a class="sublink-1" tags="array,object" href="./array#groupby">groupBy</a> <a class="sublink-1" tags="array" href="./array#head">head</a> <a class="sublink-1" tags="array" href="./array#indexofall">indexOfAll</a> <a class="sublink-1" tags="array" href="./array#initial">initial</a> <a class="sublink-1" tags="array" href="./array#initialize2darray">initialize2DArray</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrange">initializeArrayWithRange</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrangeright">initializeArrayWithRangeRight</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithvalues">initializeArrayWithValues</a> <a class="sublink-1" tags="array,recursion" href="./array#initializendarray">initializeNDArray</a> <a class="sublink-1" tags="array,math" href="./array#intersection">intersection</a> <a class="sublink-1" tags="array,function" href="./array#intersectionby">intersectionBy</a> <a class="sublink-1" tags="array,function" href="./array#intersectionwith">intersectionWith</a> <a class="sublink-1" tags="array" href="./array#issorted">isSorted</a> <a class="sublink-1" tags="array" href="./array#join">join</a> <a class="sublink-1" tags="array" href="./array#last">last</a> <a class="sublink-1" tags="array,string,utility" href="./array#longestitem">longestItem</a> <a class="sublink-1" tags="array,object,advanced" href="./array#mapobject">mapObject</a> <a class="sublink-1" tags="array,math" href="./array#maxn">maxN</a> <a class="sublink-1" tags="array,math" href="./array#minn">minN</a> <a class="sublink-1" tags="array,function" href="./array#none">none</a> <a class="sublink-1" tags="array" href="./array#nthelement">nthElement</a> <a class="sublink-1" tags="array" href="./array#offset">offset</a> <a class="sublink-1" tags="array,object,function" href="./array#partition">partition</a> <a class="sublink-1" tags="array,recursion" href="./array#permutations">permutations</a> <a class="sublink-1" tags="array" href="./array#pull">pull</a> <a class="sublink-1" tags="array" href="./array#pullatindex">pullAtIndex</a> <a class="sublink-1" tags="array" href="./array#pullatvalue">pullAtValue</a> <a class="sublink-1" tags="array,function,advanced" href="./array#pullby">pullBy</a> <a class="sublink-1" tags="array" href="./array#reducedfilter">reducedFilter</a> <a class="sublink-1" tags="array,function" href="./array#reducesuccessive">reduceSuccessive</a> <a class="sublink-1" tags="array,function" href="./array#reducewhich">reduceWhich</a> <a class="sublink-1" tags="array" href="./array#reject">reject</a> <a class="sublink-1" tags="array" href="./array#remove">remove</a> <a class="sublink-1" tags="array,random" href="./array#sample">sample</a> <a class="sublink-1" tags="array,random" href="./array#samplesize">sampleSize</a> <a class="sublink-1" tags="array,random" href="./array#shuffle">shuffle</a> <a class="sublink-1" tags="array,math" href="./array#similarity">similarity</a> <a class="sublink-1" tags="array,math" href="./array#sortedindex">sortedIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedindexby">sortedIndexBy</a> <a class="sublink-1" tags="array,math" href="./array#sortedlastindex">sortedLastIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedlastindexby">sortedLastIndexBy</a> <a class="sublink-1" tags="array,sort,advanced" href="./array#stablesort">stableSort</a> <a class="sublink-1" tags="array,math" href="./array#symmetricdifference">symmetricDifference</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferenceby">symmetricDifferenceBy</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferencewith">symmetricDifferenceWith</a> <a class="sublink-1" tags="array" href="./array#tail">tail</a> <a class="sublink-1" tags="array" href="./array#take">take</a> <a class="sublink-1" tags="array" href="./array#takeright">takeRight</a> <a class="sublink-1" tags="array,function" href="./array#takerightwhile">takeRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#takewhile">takeWhile</a> <a class="sublink-1" tags="array,math" href="./array#union">union</a> <a class="sublink-1" tags="array,function" href="./array#unionby">unionBy</a> <a class="sublink-1" tags="array,function" href="./array#unionwith">unionWith</a> <a class="sublink-1" tags="array" href="./array#uniqueelements">uniqueElements</a> <a class="sublink-1" tags="array" href="./array#unzip">unzip</a> <a class="sublink-1" tags="array,function,advanced" href="./array#unzipwith">unzipWith</a> <a class="sublink-1" tags="array" href="./array#without">without</a> <a class="sublink-1" tags="array,math" href="./array#xprod">xProd</a> <a class="sublink-1" tags="array" href="./array#zip">zip</a> <a class="sublink-1" tags="array,object" href="./array#zipobject">zipObject</a> <a class="sublink-1" tags="array,function,advanced" href="./array#zipwith">zipWith</a><h3>Browser</h3><a class="sublink-1" tags="browser,array" href="./browser#arraytohtmllist">arrayToHtmlList</a> <a class="sublink-1" tags="browser" href="./browser#bottomvisible">bottomVisible</a> <a class="sublink-1" tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a> <a class="sublink-1" tags="browser,utility" href="./browser#createelement">createElement</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a> <a class="sublink-1" tags="browser,url" href="./browser#currenturl">currentURL</a> <a class="sublink-1" tags="browser" href="./browser#detectdevicetype">detectDeviceType</a> <a class="sublink-1" tags="browser" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a> <a class="sublink-1" tags="browser" href="./browser#getscrollposition">getScrollPosition</a> <a class="sublink-1" tags="browser,css" href="./browser#getstyle">getStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#hasclass">hasClass</a> <a class="sublink-1" tags="browser,utility,advanced,promise" href="./browser#hashbrowser">hashBrowser</a> <a class="sublink-1" tags="browser,css" href="./browser#hide">hide</a> <a class="sublink-1" tags="browser,url" href="./browser#httpsredirect">httpsRedirect</a> <a class="sublink-1" tags="browser" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a> <a class="sublink-1" tags="browser,event" href="./browser#off">off</a> <a class="sublink-1" tags="browser,event" href="./browser#on">on</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a> <a class="sublink-1" tags="browser,utility" href="./browser#prefix">prefix</a> <a class="sublink-1" tags="browser,utility" href="./browser#recordanimationframes">recordAnimationFrames</a> <a class="sublink-1" tags="browser,url" href="./browser#redirect">redirect</a> <a class="sublink-1" tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a> <a class="sublink-1" tags="browser" href="./browser#scrolltotop">scrollToTop</a> <a class="sublink-1" tags="browser" href="./browser#setstyle">setStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#show">show</a> <a class="sublink-1" tags="browser,css" href="./browser#smoothscroll">smoothScroll</a> <a class="sublink-1" tags="browser" href="./browser#toggleclass">toggleClass</a> <a class="sublink-1" tags="browser,utility,random" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a><h3>Date</h3><a class="sublink-1" tags="date,math,string,utility" href="./date#formatduration">formatDuration</a> <a class="sublink-1" tags="date" href="./date#getcolontimefromdate">getColonTimeFromDate</a> <a class="sublink-1" tags="date" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a> <a class="sublink-1" tags="date" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a> <a class="sublink-1" tags="date" href="./date#tomorrow">tomorrow</a><h3>Function</h3><a class="sublink-1" tags="function" href="./function#attempt">attempt</a> <a class="sublink-1" tags="function,object" href="./function#bind">bind</a> <a class="sublink-1" tags="function,object" href="./function#bindkey">bindKey</a> <a class="sublink-1" tags="function" href="./function#chainasync">chainAsync</a> <a class="sublink-1" tags="function" href="./function#compose">compose</a> <a class="sublink-1" tags="function" href="./function#composeright">composeRight</a> <a class="sublink-1" tags="function" href="./function#converge">converge</a> <a class="sublink-1" tags="function,recursion" href="./function#curry">curry</a> <a class="sublink-1" tags="function" href="./function#debounce">debounce</a> <a class="sublink-1" tags="function" href="./function#defer">defer</a> <a class="sublink-1" tags="function" href="./function#delay">delay</a> <a class="sublink-1" tags="function,utility" href="./function#functionname">functionName</a> <a class="sublink-1" tags="function" href="./function#hz">hz</a> <a class="sublink-1" tags="function" href="./function#memoize">memoize</a> <a class="sublink-1" tags="function" href="./function#negate">negate</a> <a class="sublink-1" tags="function" href="./function#once">once</a> <a class="sublink-1" tags="function" href="./function#partial">partial</a> <a class="sublink-1" tags="function" href="./function#partialright">partialRight</a> <a class="sublink-1" tags="function,promise" href="./function#runpromisesinseries">runPromisesInSeries</a> <a class="sublink-1" tags="function,promise" href="./function#sleep">sleep</a> <a class="sublink-1" tags="function" href="./function#throttle">throttle</a> <a class="sublink-1" tags="function" href="./function#times">times</a> <a class="sublink-1" tags="function" href="./function#uncurry">uncurry</a> <a class="sublink-1" tags="function,array" href="./function#unfold">unfold</a> <a class="sublink-1" tags="function" href="./function#when">when</a><h3>Math</h3><a class="sublink-1" tags="math" href="./math#approximatelyequal">approximatelyEqual</a> <a class="sublink-1" tags="math,array" href="./math#average">average</a> <a class="sublink-1" tags="math,array,function" href="./math#averageby">averageBy</a> <a class="sublink-1" tags="math" href="./math#binomialcoefficient">binomialCoefficient</a> <a class="sublink-1" tags="math" href="./math#clampnumber">clampNumber</a> <a class="sublink-1" tags="math" href="./math#degreestorads">degreesToRads</a> <a class="sublink-1" tags="math,array" href="./math#digitize">digitize</a> <a class="sublink-1" tags="math" href="./math#distance">distance</a> <a class="sublink-1" tags="math,array,advanced" href="./math#elo">elo</a> <a class="sublink-1" tags="math,recursion" href="./math#factorial">factorial</a> <a class="sublink-1" tags="math,array" href="./math#fibonacci">fibonacci</a> <a class="sublink-1" tags="math,recursion" href="./math#gcd">gcd</a> <a class="sublink-1" tags="math" href="./math#geometricprogression">geometricProgression</a> <a class="sublink-1" tags="math" href="./math#hammingdistance">hammingDistance</a> <a class="sublink-1" tags="math" href="./math#inrange">inRange</a> <a class="sublink-1" tags="math" href="./math#isdivisible">isDivisible</a> <a class="sublink-1" tags="math" href="./math#iseven">isEven</a> <a class="sublink-1" tags="math" href="./math#isprime">isPrime</a> <a class="sublink-1" tags="math,recursion" href="./math#lcm">lcm</a> <a class="sublink-1" tags="math,utility" href="./math#luhncheck">luhnCheck</a> <a class="sublink-1" tags="math,array,function" href="./math#maxby">maxBy</a> <a class="sublink-1" tags="math,array" href="./math#median">median</a> <a class="sublink-1" tags="math,array,function" href="./math#minby">minBy</a> <a class="sublink-1" tags="math" href="./math#percentile">percentile</a> <a class="sublink-1" tags="math" href="./math#powerset">powerset</a> <a class="sublink-1" tags="math,array" href="./math#primes">primes</a> <a class="sublink-1" tags="math" href="./math#radstodegrees">radsToDegrees</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintarrayinrange">randomIntArrayInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintegerinrange">randomIntegerInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomnumberinrange">randomNumberInRange</a> <a class="sublink-1" tags="math" href="./math#round">round</a> <a class="sublink-1" tags="math,utility" href="./math#sdbm">sdbm</a> <a class="sublink-1" tags="math,array" href="./math#standarddeviation">standardDeviation</a> <a class="sublink-1" tags="math,array" href="./math#sum">sum</a> <a class="sublink-1" tags="math,array,function" href="./math#sumby">sumBy</a> <a class="sublink-1" tags="math" href="./math#sumpower">sumPower</a> <a class="sublink-1" tags="math" href="./math#tosafeinteger">toSafeInteger</a><h3>Node</h3><a class="sublink-1" tags="node,string,utility" href="./node#atob">atob</a> <a class="sublink-1" tags="node,string,utility" href="./node#btoa">btoa</a> <a class="sublink-1" tags="node,utility,string" href="./node#colorize">colorize</a> <a class="sublink-1" tags="node" href="./node#hasflags">hasFlags</a> <a class="sublink-1" tags="node,utility,promise" href="./node#hashnode">hashNode</a> <a class="sublink-1" tags="node" href="./node#istravisci">isTravisCI</a> <a class="sublink-1" tags="node,json" href="./node#jsontofile">JSONToFile</a> <a class="sublink-1" tags="node,array,string" href="./node#readfilelines">readFileLines</a> <a class="sublink-1" tags="node,string" href="./node#untildify">untildify</a> <a class="sublink-1" tags="node,utility,random" href="./node#uuidgeneratornode">UUIDGeneratorNode</a><h3>Object</h3><a class="sublink-1" tags="object,function" href="./object#bindall">bindAll</a> <a class="sublink-1" tags="object,recursion" href="./object#deepclone">deepClone</a> <a class="sublink-1" tags="object" href="./object#defaults">defaults</a> <a class="sublink-1" tags="object,array,type,advanced" href="./object#equals">equals</a> <a class="sublink-1" tags="object,function" href="./object#findkey">findKey</a> <a class="sublink-1" tags="object,function" href="./object#findlastkey">findLastKey</a> <a class="sublink-1" tags="object,recursion" href="./object#flattenobject">flattenObject</a> <a class="sublink-1" tags="object" href="./object#forown">forOwn</a> <a class="sublink-1" tags="object" href="./object#forownright">forOwnRight</a> <a class="sublink-1" tags="object,function" href="./object#functions">functions</a> <a class="sublink-1" tags="object" href="./object#get">get</a> <a class="sublink-1" tags="object,function" href="./object#invertkeyvalues">invertKeyValues</a> <a class="sublink-1" tags="object" href="./object#lowercasekeys">lowercaseKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapkeys">mapKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapvalues">mapValues</a> <a class="sublink-1" tags="object,type" href="./object#matches">matches</a> <a class="sublink-1" tags="object,type,function" href="./object#matcheswith">matchesWith</a> <a class="sublink-1" tags="object,array" href="./object#merge">merge</a> <a class="sublink-1" tags="object" href="./object#nest">nest</a> <a class="sublink-1" tags="object,array" href="./object#objectfrompairs">objectFromPairs</a> <a class="sublink-1" tags="object,array" href="./object#objecttopairs">objectToPairs</a> <a class="sublink-1" tags="object,array" href="./object#omit">omit</a> <a class="sublink-1" tags="object,array,function" href="./object#omitby">omitBy</a> <a class="sublink-1" tags="object,array" href="./object#orderby">orderBy</a> <a class="sublink-1" tags="object,array" href="./object#pick">pick</a> <a class="sublink-1" tags="object,array,function" href="./object#pickby">pickBy</a> <a class="sublink-1" tags="object" href="./object#renamekeys">renameKeys</a> <a class="sublink-1" tags="object" href="./object#shallowclone">shallowClone</a> <a class="sublink-1" tags="object,array,string" href="./object#size">size</a> <a class="sublink-1" tags="object,array" href="./object#transform">transform</a> <a class="sublink-1" tags="object,logic,array" href="./object#truthcheckcollection">truthCheckCollection</a> <a class="sublink-1" tags="object,advanced" href="./object#unflattenobject">unflattenObject</a><h3>String</h3><a class="sublink-1" tags="string" href="./string#bytesize">byteSize</a> <a class="sublink-1" tags="string,array" href="./string#capitalize">capitalize</a> <a class="sublink-1" tags="string,regexp" href="./string#capitalizeeveryword">capitalizeEveryWord</a> <a class="sublink-1" tags="string,array" href="./string#decapitalize">decapitalize</a> <a class="sublink-1" tags="string,browser,regexp" href="./string#escapehtml">escapeHTML</a> <a class="sublink-1" tags="string,regexp" href="./string#escaperegexp">escapeRegExp</a> <a class="sublink-1" tags="string" href="./string#fromcamelcase">fromCamelCase</a> <a class="sublink-1" tags="string,utility,browser,url" href="./string#isabsoluteurl">isAbsoluteURL</a> <a class="sublink-1" tags="string,regexp" href="./string#isanagram">isAnagram</a> <a class="sublink-1" tags="string,utility" href="./string#islowercase">isLowerCase</a> <a class="sublink-1" tags="string,utility" href="./string#isuppercase">isUpperCase</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#mask">mask</a> <a class="sublink-1" tags="string" href="./string#pad">pad</a> <a class="sublink-1" tags="string" href="./string#palindrome">palindrome</a> <a class="sublink-1" tags="string" href="./string#pluralize">pluralize</a> <a class="sublink-1" tags="string,regexp" href="./string#removenonascii">removeNonASCII</a> <a class="sublink-1" tags="string,array" href="./string#reversestring">reverseString</a> <a class="sublink-1" tags="string" href="./string#sortcharactersinstring">sortCharactersInString</a> <a class="sublink-1" tags="string" href="./string#splitlines">splitLines</a> <a class="sublink-1" tags="string,recursion" href="./string#stringpermutations">stringPermutations</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#striphtmltags">stripHTMLTags</a> <a class="sublink-1" tags="string,regexp" href="./string#tocamelcase">toCamelCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tokebabcase">toKebabCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tosnakecase">toSnakeCase</a> <a class="sublink-1" tags="string" href="./string#truncatestring">truncateString</a> <a class="sublink-1" tags="string,browser" href="./string#unescapehtml">unescapeHTML</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#urljoin">URLJoin</a> <a class="sublink-1" tags="string,regexp" href="./string#words">words</a><h3>Type</h3><a class="sublink-1" tags="type" href="./type#gettype">getType</a> <a class="sublink-1" tags="type,array,regexp" href="./type#is">is</a> <a class="sublink-1" tags="type,array" href="./type#isarraylike">isArrayLike</a> <a class="sublink-1" tags="type" href="./type#isboolean">isBoolean</a> <a class="sublink-1" tags="type,array,object,string" href="./type#isempty">isEmpty</a> <a class="sublink-1" tags="type,function" href="./type#isfunction">isFunction</a> <a class="sublink-1" tags="type" href="./type#isnil">isNil</a> <a class="sublink-1" tags="type" href="./type#isnull">isNull</a> <a class="sublink-1" tags="type,math" href="./type#isnumber">isNumber</a> <a class="sublink-1" tags="type,object" href="./type#isobject">isObject</a> <a class="sublink-1" tags="type,object" href="./type#isobjectlike">isObjectLike</a> <a class="sublink-1" tags="type,object" href="./type#isplainobject">isPlainObject</a> <a class="sublink-1" tags="type,function,array,string" href="./type#isprimitive">isPrimitive</a> <a class="sublink-1" tags="type,function,promise" href="./type#ispromiselike">isPromiseLike</a> <a class="sublink-1" tags="type,string" href="./type#isstring">isString</a> <a class="sublink-1" tags="type" href="./type#issymbol">isSymbol</a> <a class="sublink-1" tags="type" href="./type#isundefined">isUndefined</a> <a class="sublink-1" tags="type,json" href="./type#isvalidjson">isValidJSON</a><h3>Utility</h3><a class="sublink-1" tags="utility,array,type" href="#castarray">castArray</a> <a class="sublink-1" tags="utility,regexp" href="#cloneregexp">cloneRegExp</a> <a class="sublink-1" tags="utility" href="#coalesce">coalesce</a> <a class="sublink-1" tags="utility" href="#coalescefactory">coalesceFactory</a> <a class="sublink-1" tags="utility,string" href="#extendhex">extendHex</a> <a class="sublink-1" tags="utility,browser,string,url" href="#geturlparameters">getURLParameters</a> <a class="sublink-1" tags="utility,string,math,advanced" href="#hextorgb">hexToRGB</a> <a class="sublink-1" tags="utility,url,browser" href="#httpget">httpGet</a> <a class="sublink-1" tags="utility,url,browser" href="#httppost">httpPost</a> <a class="sublink-1" tags="utility,browser" href="#isbrowser">isBrowser</a> <a class="sublink-1" tags="utility,function" href="#mostperformant">mostPerformant</a> <a class="sublink-1" tags="utility,function" href="#ntharg">nthArg</a> <a class="sublink-1" tags="utility,string" href="#parsecookie">parseCookie</a> <a class="sublink-1" tags="utility,string,math" href="#prettybytes">prettyBytes</a> <a class="sublink-1" tags="utility,random" href="#randomhexcolorcode">randomHexColorCode</a> <a class="sublink-1" tags="utility" href="#rgbtohex">RGBToHex</a> <a class="sublink-1" tags="utility,string" href="#serializecookie">serializeCookie</a> <a class="sublink-1" tags="utility" href="#timetaken">timeTaken</a> <a class="sublink-1" tags="utility" href="#tocurrency">toCurrency</a> <a class="sublink-1" tags="utility,math" href="#todecimalmark">toDecimalMark</a> <a class="sublink-1" tags="utility,math" href="#toordinalsuffix">toOrdinalSuffix</a> <a class="sublink-1" tags="utility,math" href="#validatenumber">validateNumber</a> <a class="sublink-1" tags="utility,regexp" href="#yesno">yesNo</a></nav><main class="col-sm-12 col-md-8 col-lg-9" style="height:100%;overflow-y:auto;background:#eceef2;padding:0"><a id="top"> </a><h2 style="text-align:center">Utility</h2><div class="card fluid"><h3 id="castarray" class="section double-padded">castArray</h3><div class="section double-padded"><p>Casts the provided value as an array if it's not one.</p><p>Use <code>Array.isArray()</code> to determine if <code>val</code> is an array and return it as-is or encapsulated in an array accordingly.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">castArray</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> val <span class="token punctuation">: [</span>val<span class="token punctuation">]);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">castArray</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">);</span> <span class="token comment">// ['foo']</span>
|
||
<span class="token function">castArray</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">]);</span> <span class="token comment">// [1]</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="cloneregexp" class="section double-padded">cloneRegExp</h3><div class="section double-padded"><p>Clones a regular expression.</p><p>Use <code>new RegExp()</code>, <code>RegExp.source</code> and <code>RegExp.flags</code> to clone the given regular expression.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">cloneRegExp</span> <span class="token operator">=</span> regExp <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>regExp<span class="token punctuation">.</span>source<span class="token punctuation">,</span> regExp<span class="token punctuation">.</span>flags<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> regExp <span class="token operator">=</span> <span class="token regex">/lorem ipsum/gi</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> regExp2 <span class="token operator">=</span> <span class="token function">cloneRegExp</span><span class="token punctuation">(</span>regExp<span class="token punctuation">);</span> <span class="token comment">// /lorem ipsum/gi</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="coalesce" class="section double-padded">coalesce</h3><div class="section double-padded"><p>Returns the first non-null/undefined argument.</p><p>Use <code>Array.find()</code> to return the first non <code>null</code>/<code>undefined</code> argument.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">coalesce</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> args<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>_ <span class="token operator">=> !</span><span class="token punctuation">[</span>undefined<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">].</span><span class="token function">includes</span><span class="token punctuation">(</span>_<span class="token punctuation">));</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">coalesce</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> undefined<span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token string">'Waldo'</span><span class="token punctuation">);</span> <span class="token comment">// ""</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="coalescefactory" class="section double-padded">coalesceFactory</h3><div class="section double-padded"><p>Returns a customized coalesce function that returns the first argument that returns <code>true</code> from the provided argument validation function.</p><p>Use <code>Array.find()</code> to return the first argument that returns <code>true</code> from the provided argument validation function.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">coalesceFactory</span> <span class="token operator">=</span> valid <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> args<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>valid<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> customCoalesce <span class="token operator">=</span> <span class="token function">coalesceFactory</span><span class="token punctuation">(</span>_ <span class="token operator">=> !</span><span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> undefined<span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">].</span><span class="token function">includes</span><span class="token punctuation">(</span>_<span class="token punctuation">));</span>
|
||
<span class="token function">customCoalesce</span><span class="token punctuation">(</span>undefined<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'Waldo'</span><span class="token punctuation">);</span> <span class="token comment">// "Waldo"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="extendhex" class="section double-padded">extendHex</h3><div class="section double-padded"><p>Extends a 3-digit color code to a 6-digit color code.</p><p>Use <code>Array.map()</code>, <code>String.split()</code> and <code>Array.join()</code> to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form. <code>Array.slice()</code> is used to remove <code>#</code> from string start since it's added once.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">extendHex</span> <span class="token operator">=</span> shortHex <span class="token operator">=></span>
|
||
<span class="token string">'#'</span> <span class="token operator">+</span>
|
||
shortHex
|
||
<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>shortHex<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">'#'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">)
|
||
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)
|
||
.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x <span class="token operator">+</span> x<span class="token punctuation">)
|
||
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">extendHex</span><span class="token punctuation">(</span><span class="token string">'#03f'</span><span class="token punctuation">);</span> <span class="token comment">// '#0033ff'</span>
|
||
<span class="token function">extendHex</span><span class="token punctuation">(</span><span class="token string">'05a'</span><span class="token punctuation">);</span> <span class="token comment">// '#0055aa'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="geturlparameters" class="section double-padded">getURLParameters</h3><div class="section double-padded"><p>Returns an object containing the parameters of the current URL.</p><p>Use <code>String.match()</code> with an appropriate regular expression to get all key-value pairs, <code>Array.reduce()</code> to map and combine them into a single object. Pass <code>location.search</code> as the argument to apply to the current <code>url</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getURLParameters</span> <span class="token operator">=</span> url <span class="token operator">=></span>
|
||
<span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/([^?=&]+)(=([^&]*))/g</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span><span class="token function">reduce</span><span class="token punctuation">(
|
||
(</span>a<span class="token punctuation">,</span> v<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>a<span class="token punctuation">[</span>v<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> v<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">))]</span> <span class="token operator">=</span> v<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>v<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)),</span> a<span class="token punctuation">),
|
||
{}
|
||
);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">getURLParameters</span><span class="token punctuation">(</span><span class="token string">'http://url.com/page?name=Adam&surname=Smith'</span><span class="token punctuation">);</span> <span class="token comment">// {name: 'Adam', surname: 'Smith'}</span>
|
||
<span class="token function">getURLParameters</span><span class="token punctuation">(</span><span class="token string">'google.com'</span><span class="token punctuation">);</span> <span class="token comment">// {}</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hextorgb" class="section double-padded">hexToRGB<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Converts a color code to a <code>rgb()</code> or <code>rgba()</code> string if alpha value is provided.</p><p>Use bitwise right-shift operator and mask bits with <code>&</code> (and) operator to convert a hexadecimal color code (with or without prefixed with <code>#</code>) to a string with the RGB values. If it's 3-digit color code, first convert to 6-digit version. If an alpha value is provided alongside 6-digit hex, give <code>rgba()</code> string in return.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hexToRGB</span> <span class="token operator">=</span> hex <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> alpha <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
h <span class="token operator">=</span> hex<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>hex<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">'#'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>h<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> h <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>h<span class="token punctuation">].</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x <span class="token operator">+</span> x<span class="token punctuation">).</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">else if</span> <span class="token punctuation">(</span>h<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">8</span><span class="token punctuation">)</span> alpha <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
h <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>h<span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token string">'rgb'</span> <span class="token operator">+</span>
|
||
<span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token string">'a'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
<span class="token string">'('</span> <span class="token operator">+</span>
|
||
<span class="token punctuation">(</span>h <span class="token operator">>>></span> <span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token number">24</span> <span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">))</span> <span class="token operator">+</span>
|
||
<span class="token string">', '</span> <span class="token operator">+</span>
|
||
<span class="token punctuation">((</span>h <span class="token operator">&</span> <span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token number">0x00ff0000</span> <span class="token punctuation">:</span> <span class="token number">0x00ff00</span><span class="token punctuation">))</span> <span class="token operator">>>></span> <span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token number">16</span> <span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">))</span> <span class="token operator">+</span>
|
||
<span class="token string">', '</span> <span class="token operator">+</span>
|
||
<span class="token punctuation">((</span>h <span class="token operator">&</span> <span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token number">0x0000ff00</span> <span class="token punctuation">:</span> <span class="token number">0x0000ff</span><span class="token punctuation">))</span> <span class="token operator">>>></span> <span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token number">8</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">))</span> <span class="token operator">+</span>
|
||
<span class="token punctuation">(</span>alpha <span class="token operator">?</span> <span class="token template-string"><span class="token string">`, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>h <span class="token operator">&</span> <span class="token number">0x000000ff</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
<span class="token string">')'</span>
|
||
<span class="token punctuation">);
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hexToRGB</span><span class="token punctuation">(</span><span class="token string">'#27ae60ff'</span><span class="token punctuation">);</span> <span class="token comment">// 'rgba(39, 174, 96, 255)'</span>
|
||
<span class="token function">hexToRGB</span><span class="token punctuation">(</span><span class="token string">'27ae60'</span><span class="token punctuation">);</span> <span class="token comment">// 'rgb(39, 174, 96)'</span>
|
||
<span class="token function">hexToRGB</span><span class="token punctuation">(</span><span class="token string">'#fff'</span><span class="token punctuation">);</span> <span class="token comment">// 'rgb(255, 255, 255)'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="httpget" class="section double-padded">httpGet</h3><div class="section double-padded"><p>Makes a <code>GET</code> request to the passed URL.</p><p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest"><code>XMLHttpRequest</code></a> web api to make a <code>get</code> request to the given <code>url</code>. Handle the <code>onload</code> event, by calling the given <code>callback</code> the <code>responseText</code>. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the third argument, <code>err</code>, to log errors to the console's <code>error</code> stream by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpGet</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">();</span>
|
||
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>responseText<span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">err</span><span class="token punctuation">(</span>request<span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">();
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">httpGet</span><span class="token punctuation">(</span>
|
||
<span class="token string">'https://jsonplaceholder.typicode.com/posts/1'</span><span class="token punctuation">,</span>
|
||
console<span class="token punctuation">.</span>log
|
||
<span class="token punctuation">);</span> <span class="token comment">/*
|
||
Logs: {
|
||
"userId": 1,
|
||
"id": 1,
|
||
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
|
||
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
|
||
}
|
||
*/</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="httppost" class="section double-padded">httpPost</h3><div class="section double-padded"><p>Makes a <code>POST</code> request to the passed URL.</p><p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest"><code>XMLHttpRequest</code></a> web api to make a <code>post</code> request to the given <code>url</code>. Set the value of an <code>HTTP</code> request header with <code>setRequestHeader</code> method. Handle the <code>onload</code> event, by calling the given <code>callback</code> the <code>responseText</code>. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the third argument, <code>data</code>, to send no data to the provided <code>url</code>. Omit the fourth argument, <code>err</code>, to log errors to the console's <code>error</code> stream by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpPost</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">();</span>
|
||
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'POST'</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">'Content-type'</span><span class="token punctuation">,</span> <span class="token string">'application/json; charset=utf-8'</span><span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>responseText<span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">err</span><span class="token punctuation">(</span>request<span class="token punctuation">);</span>
|
||
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>data<span class="token punctuation">);
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> newPost <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
userId<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
id<span class="token punctuation">:</span> <span class="token number">1337</span><span class="token punctuation">,</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
|
||
body<span class="token punctuation">:</span> <span class="token string">'bar bar bar'</span>
|
||
<span class="token punctuation">};</span>
|
||
<span class="token keyword">const</span> data <span class="token operator">=</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>newPost<span class="token punctuation">);</span>
|
||
<span class="token function">httpPost</span><span class="token punctuation">(</span>
|
||
<span class="token string">'https://jsonplaceholder.typicode.com/posts'</span><span class="token punctuation">,</span>
|
||
data<span class="token punctuation">,</span>
|
||
console<span class="token punctuation">.</span>log
|
||
<span class="token punctuation">);</span> <span class="token comment">/*
|
||
Logs: {
|
||
"userId": 1,
|
||
"id": 1337,
|
||
"title": "Foo",
|
||
"body": "bar bar bar"
|
||
}
|
||
*/</span>
|
||
<span class="token function">httpPost</span><span class="token punctuation">(</span>
|
||
<span class="token string">'https://jsonplaceholder.typicode.com/posts'</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">//does not send a body</span>
|
||
console<span class="token punctuation">.</span>log
|
||
<span class="token punctuation">);</span> <span class="token comment">/*
|
||
Logs: {
|
||
"id": 101
|
||
}
|
||
*/</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="isbrowser" class="section double-padded">isBrowser</h3><div class="section double-padded"><p>Determines if the current runtime environment is a browser so that front-end modules can run on the server (Node) without throwing errors.</p><p>Use <code>Array.includes()</code> on the <code>typeof</code> values of both <code>window</code> and <code>document</code> (globals usually only available in a browser environment unless they were explicitly defined), which will return <code>true</code> if one of them is <code>undefined</code>. <code>typeof</code> allows globals to be checked for existence without throwing a <code>ReferenceError</code>. If both of them are not <code>undefined</code>, then the current environment is assumed to be a browser.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isBrowser</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=> !</span><span class="token punctuation">[</span><span class="token keyword">typeof</span> window<span class="token punctuation">,</span> <span class="token keyword">typeof</span> document<span class="token punctuation">].</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'undefined'</span><span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isBrowser</span><span class="token punctuation">();</span> <span class="token comment">// true (browser)</span>
|
||
<span class="token function">isBrowser</span><span class="token punctuation">();</span> <span class="token comment">// false (Node)</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="mostperformant" class="section double-padded">mostPerformant</h3><div class="section double-padded"><p>Returns the index of the function in an array of functions which executed the fastest.</p><p>Use <code>Array.map()</code> to generate an array where each value is the total time taken to execute the function after <code>iterations</code> times. Use the difference in <code>performance.now()</code> values before and after to get the total time in milliseconds to a high degree of accuracy. Use <code>Math.min()</code> to find the minimum execution time, and return the index of that shortest time which corresponds to the index of the most performant function. Omit the second argument, <code>iterations</code>, to use a default of 10,000 iterations. The more iterations, the more reliable the result but the longer it will take.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">mostPerformant</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fns<span class="token punctuation">,</span> iterations <span class="token operator">=</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> times <span class="token operator">=</span> fns<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>fn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> before <span class="token operator">=</span> performance<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> iterations<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token function">fn</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">return</span> performance<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> before<span class="token punctuation">;
|
||
});</span>
|
||
<span class="token keyword">return</span> times<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token operator">...</span>times<span class="token punctuation">));
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">mostPerformant</span><span class="token punctuation">([
|
||
()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Loops through the entire array before returning `false`</span>
|
||
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token string">'10'</span><span class="token punctuation">].</span><span class="token function">every</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token keyword">typeof</span> el <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">);
|
||
},
|
||
()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Only needs to reach index `1` before returning false</span>
|
||
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">].</span><span class="token function">every</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token keyword">typeof</span> el <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">);
|
||
}
|
||
]);</span> <span class="token comment">// 1</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="ntharg" class="section double-padded">nthArg</h3><div class="section double-padded"><p>Creates a function that gets the argument at index <code>n</code>. If <code>n</code> is negative, the nth argument from the end is returned.</p><p>Use <code>Array.slice()</code> to get the desired argument at index <code>n</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">nthArg</span> <span class="token operator">=</span> n <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> args<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">)[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> third <span class="token operator">=</span> <span class="token function">nthArg</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">);</span>
|
||
<span class="token function">third</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
||
<span class="token function">third</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// undefined</span>
|
||
<span class="token keyword">const</span> last <span class="token operator">=</span> <span class="token function">nthArg</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">);</span>
|
||
<span class="token function">last</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// 5</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="parsecookie" class="section double-padded">parseCookie</h3><div class="section double-padded"><p>Parse an HTTP Cookie header string and return an object of all cookie name-value pairs.</p><p>Use <code>String.split(';')</code> to separate key-value pairs from each other. Use <code>Array.map()</code> and <code>String.split('=')</code> to separate keys from values in each pair. Use <code>Array.reduce()</code> and <code>decodeURIComponent()</code> to create an object with all key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">parseCookie</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
||
str
|
||
<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">';'</span><span class="token punctuation">)
|
||
.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> v<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">))
|
||
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> v<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
acc<span class="token punctuation">[</span><span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>v<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">].</span><span class="token function">trim</span><span class="token punctuation">())]</span> <span class="token operator">=</span> <span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>v<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">].</span><span class="token function">trim</span><span class="token punctuation">());</span>
|
||
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
||
}, {});</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">parseCookie</span><span class="token punctuation">(</span><span class="token string">'foo=bar; equation=E%3Dmc%5E2'</span><span class="token punctuation">);</span> <span class="token comment">// { foo: 'bar', equation: 'E=mc^2' }</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="prettybytes" class="section double-padded">prettyBytes</h3><div class="section double-padded"><p>Converts a number in bytes to a human-readable string.</p><p>Use an array dictionary of units to be accessed based on the exponent. Use <code>Number.toPrecision()</code> to truncate the number to a certain number of digits. Return the prettified string by building it up, taking into account the supplied options and whether it is negative or not. Omit the second argument, <code>precision</code>, to use a default precision of <code>3</code> digits. Omit the third argument, <code>addSpace</code>, to add space between the number and unit by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">prettyBytes</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> precision <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">,</span> addSpace <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> UNITS <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'KB'</span><span class="token punctuation">,</span> <span class="token string">'MB'</span><span class="token punctuation">,</span> <span class="token string">'GB'</span><span class="token punctuation">,</span> <span class="token string">'TB'</span><span class="token punctuation">,</span> <span class="token string">'PB'</span><span class="token punctuation">,</span> <span class="token string">'EB'</span><span class="token punctuation">,</span> <span class="token string">'ZB'</span><span class="token punctuation">,</span> <span class="token string">'YB'</span><span class="token punctuation">];</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> num <span class="token operator">+</span> <span class="token punctuation">(</span>addSpace <span class="token operator">?</span> <span class="token string">' '</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> UNITS<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
||
<span class="token keyword">const</span> exponent <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">log10</span><span class="token punctuation">(</span>num <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">? -</span>num <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">3</span><span class="token punctuation">),</span> UNITS<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> n <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(((</span>num <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">? -</span>num <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">**</span> exponent<span class="token punctuation">).</span><span class="token function">toPrecision</span><span class="token punctuation">(</span>precision<span class="token punctuation">));</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>num <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'-'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> n <span class="token operator">+</span> <span class="token punctuation">(</span>addSpace <span class="token operator">?</span> <span class="token string">' '</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> UNITS<span class="token punctuation">[</span>exponent<span class="token punctuation">];
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">prettyBytes</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">);</span> <span class="token comment">// "1 KB"</span>
|
||
<span class="token function">prettyBytes</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">27145424323.5821</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// "-27.145 GB"</span>
|
||
<span class="token function">prettyBytes</span><span class="token punctuation">(</span><span class="token number">123456789</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">);</span> <span class="token comment">// "123MB"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="randomhexcolorcode" class="section double-padded">randomHexColorCode</h3><div class="section double-padded"><p>Generates a random hexadecimal color code.</p><p>Use <code>Math.random</code> to generate a random 24-bit(6x4bits) hexadecimal number. Use bit shifting and then convert it to an hexadecimal String using <code>toString(16)</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">randomHexColorCode</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> n <span class="token operator">=</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> <span class="token number">0xfffff</span> <span class="token operator">*</span> <span class="token number">1000000</span><span class="token punctuation">).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">return</span> <span class="token string">'#'</span> <span class="token operator">+</span> n<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">);
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">randomHexColorCode</span><span class="token punctuation">();</span> <span class="token comment">// "#e34155"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="rgbtohex" class="section double-padded">RGBToHex</h3><div class="section double-padded"><p>Converts the values of RGB components to a color code.</p><p>Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<code><<</code>) and <code>toString(16)</code>, then <code>String.padStart(6,'0')</code> to get a 6-digit hexadecimal value.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">RGBToHex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>r <span class="token operator"><<</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span>g <span class="token operator"><<</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">).</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">RGBToHex</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 'ffa501'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="serializecookie" class="section double-padded">serializeCookie</h3><div class="section double-padded"><p>Serialize a cookie name-value pair into a Set-Cookie header string.</p><p>Use template literals and <code>encodeURIComponent()</code> to create the appropriate string.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">serializeCookie</span> <span class="token operator">=</span> <span class="token punctuation">(</span>name<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">serializeCookie</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">);</span> <span class="token comment">// 'foo=bar'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="timetaken" class="section double-padded">timeTaken</h3><div class="section double-padded"><p>Measures the time taken by a function to execute.</p><p>Use <code>console.time()</code> and <code>console.timeEnd()</code> to measure the difference between the start and end times to determine how long the callback took to execute.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">timeTaken</span> <span class="token operator">=</span> callback <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">time</span><span class="token punctuation">(</span><span class="token string">'timeTaken'</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> r <span class="token operator">=</span> <span class="token function">callback</span><span class="token punctuation">();</span>
|
||
console<span class="token punctuation">.</span><span class="token function">timeEnd</span><span class="token punctuation">(</span><span class="token string">'timeTaken'</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">return</span> r<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">timeTaken</span><span class="token punctuation">(()</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">));</span> <span class="token comment">// 1024, (logged): timeTaken: 0.02099609375ms</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="tocurrency" class="section double-padded">toCurrency</h3><div class="section double-padded"><p>Take a number and return specified currency formatting.</p><p>Use <code>Intl.NumberFormat</code> to enable country / currency sensitive formatting.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toCurrency</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> curr<span class="token punctuation">,</span> LanguageFormat <span class="token operator">=</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||
Intl<span class="token punctuation">.</span><span class="token function">NumberFormat</span><span class="token punctuation">(</span>LanguageFormat<span class="token punctuation">, {</span> style<span class="token punctuation">:</span> <span class="token string">'currency'</span><span class="token punctuation">,</span> currency<span class="token punctuation">:</span> curr <span class="token punctuation">}).</span><span class="token function">format</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'EUR'</span><span class="token punctuation">);</span> <span class="token comment">// €123,456.79 | currency: Euro | currencyLangFormat: Local</span>
|
||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'en-us'</span><span class="token punctuation">);</span> <span class="token comment">// $123,456.79 | currency: US Dollar | currencyLangFormat: English (United States)</span>
|
||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'fa'</span><span class="token punctuation">);</span> <span class="token comment">// ۱۲۳٬۴۵۶٫۷۹ $ | currency: US Dollar | currencyLangFormat: Farsi</span>
|
||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">);</span> <span class="token comment">// ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local</span>
|
||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">,</span> <span class="token string">'fi'</span><span class="token punctuation">);</span> <span class="token comment">// 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="todecimalmark" class="section double-padded">toDecimalMark</h3><div class="section double-padded"><p>Use <code>toLocaleString()</code> to convert a float-point arithmetic to the <a href="https://en.wikipedia.org/wiki/Decimal_mark">Decimal mark</a> form. It makes a comma separated string from a number.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toDecimalMark</span> <span class="token operator">=</span> num <span class="token operator">=></span> num<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toDecimalMark</span><span class="token punctuation">(</span><span class="token number">12305030388.9087</span><span class="token punctuation">);</span> <span class="token comment">// "12,305,030,388.909"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="toordinalsuffix" class="section double-padded">toOrdinalSuffix</h3><div class="section double-padded"><p>Adds an ordinal suffix to a number.</p><p>Use the modulo operator (<code>%</code>) to find values of single and tens digits. Find which ordinal pattern digits match. If digit is found in teens pattern, use teens ordinal.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toOrdinalSuffix</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> int <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>num<span class="token punctuation">),</span>
|
||
digits <span class="token operator">=</span> <span class="token punctuation">[</span>int <span class="token operator">%</span> <span class="token number">10</span><span class="token punctuation">,</span> int <span class="token operator">%</span> <span class="token number">100</span><span class="token punctuation">],</span>
|
||
ordinals <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'st'</span><span class="token punctuation">,</span> <span class="token string">'nd'</span><span class="token punctuation">,</span> <span class="token string">'rd'</span><span class="token punctuation">,</span> <span class="token string">'th'</span><span class="token punctuation">],</span>
|
||
oPattern <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span>
|
||
tPattern <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">];</span>
|
||
<span class="token keyword">return</span> oPattern<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>digits<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">])</span> <span class="token operator">&& !</span>tPattern<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>digits<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">])</span>
|
||
<span class="token operator">?</span> int <span class="token operator">+</span> ordinals<span class="token punctuation">[</span>digits<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]
|
||
:</span> int <span class="token operator">+</span> ordinals<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">];
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toOrdinalSuffix</span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">);</span> <span class="token comment">// "123rd"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="validatenumber" class="section double-padded">validateNumber</h3><div class="section double-padded"><p>Returns <code>true</code> if the given value is a number, <code>false</code> otherwise.</p><p>Use <code>!isNaN()</code> in combination with <code>parseFloat()</code> to check if the argument is a number. Use <code>isFinite()</code> to check if the number is finite. Use <code>Number()</code> to check if the coercion holds.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">validateNumber</span> <span class="token operator">=</span> n <span class="token operator">=> !</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>n<span class="token punctuation">))</span> <span class="token operator">&&</span> <span class="token function">isFinite</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">Number</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">==</span> n<span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">validateNumber</span><span class="token punctuation">(</span><span class="token string">'10'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="yesno" class="section double-padded">yesNo</h3><div class="section double-padded"><p>Returns <code>true</code> if the string is <code>y</code>/<code>yes</code> or <code>false</code> if the string is <code>n</code>/<code>no</code>.</p><p>Use <code>RegExp.test()</code> to check if the string evaluates to <code>y/yes</code> or <code>n/no</code>. Omit the second argument, <code>def</code> to set the default answer as <code>no</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">yesNo</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">,</span> def <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||
<span class="token regex">/^(y|yes)$/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token punctuation">:</span> <span class="token regex">/^(n|no)$/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">false</span> <span class="token punctuation">:</span> def<span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">yesNo</span><span class="token punctuation">(</span><span class="token string">'Y'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||
<span class="token function">yesNo</span><span class="token punctuation">(</span><span class="token string">'yes'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||
<span class="token function">yesNo</span><span class="token punctuation">(</span><span class="token string">'No'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
||
<span class="token function">yesNo</span><span class="token punctuation">(</span><span class="token string">'Foo'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><button class="scroll-to-top">↑</button><footer><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html> |