andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a470916823eab7572e15e80187bcdcf56e6c9740
30-seconds-of-code/docs/utility.html
30secondsofcode 855b6d70d5 Travis build: 78
2018-07-14 08:01:07 +00:00

275 lines
102 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">&nbsp;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,string,utility" href="./array#arraytocsv">arrayToCSV</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,string,object,advanced" href="./array#jsontocsv">JSONtoCSV</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" href="./array#tohash">toHash</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,advanced" href="./browser#counter">counter</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#elementcontains">elementContains</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#insertafter">insertAfter</a> <a class="sublink-1" tags="browser" href="./browser#insertbefore">insertBefore</a> <a class="sublink-1" tags="browser" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a> <a class="sublink-1" tags="browser,array" href="./browser#nodelisttoarray">nodeListToArray</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,event" href="./browser#triggerevent">triggerEvent</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,recursion" href="./object#dig">dig</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,utility" href="./string#csvtoarray">CSVToArray</a> <a class="sublink-1" tags="string,array,object,advanced" href="./string#csvtojson">CSVToJSON</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,array,function,utility" href="./string#mapstring">mapString</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">&nbsp;</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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">/([^?=&amp;]+)(=([^&amp;]*))/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&amp;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">&#128203;&nbsp;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>&amp;</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">&amp;</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">&amp;</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">&amp;</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">&#128203;&nbsp;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">&#128203;&nbsp;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> <span class="token constant">JSON</span><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">&#128203;&nbsp;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">&#128203;&nbsp;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">&lt;</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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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> <span class="token constant">UNITS</span> <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">&lt;</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> <span class="token constant">UNITS</span><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">&lt;</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> <span class="token constant">UNITS</span><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">&lt;</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">&lt;</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> <span class="token constant">UNITS</span><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">&#128203;&nbsp;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">&#128203;&nbsp;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>&lt;&lt;</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">&lt;&lt;</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">&lt;&lt;</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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">&#128203;&nbsp;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">&amp;&amp; !</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">&#128203;&nbsp;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">&amp;&amp;</span> <span class="token function">isFinite</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</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">&#128203;&nbsp;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">&#128203;&nbsp;Copy to clipboard</button></div></div><button class="scroll-to-top">&uarr;</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>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<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>
Reference in New Issue View Git Blame Copy Permalink