272 lines
95 KiB
HTML
272 lines
95 KiB
HTML
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Function - 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="favicon.png"><link rel="icon" type="image/png" href="favicon.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();
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Function')[0].offsetTop - 60;
|
|
}
|
|
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" 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="favicon.png" style="height:3.5rem" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1><label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label></header><div class="row" style="height:calc(100vh - 3.5rem);overflow:hidden"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav class="col-md-4 col-lg-3" style="border-top:0"><div class="input-group vertical"><input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search..."></div><h3>Adapter</h3><a class="sublink-1" tags="adapter,function" href="./adapter#ary">ary</a> <a class="sublink-1" tags="adapter,function" href="./adapter#call">call</a> <a class="sublink-1" tags="adapter,function,array" href="./adapter#collectinto">collectInto</a> <a class="sublink-1" tags="adapter,function" href="./adapter#flip">flip</a> <a class="sublink-1" tags="adapter,function" href="./adapter#over">over</a> <a class="sublink-1" tags="adapter,function" href="./adapter#overargs">overArgs</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a> <a class="sublink-1" tags="adapter,function" href="./adapter#pipefunctions">pipeFunctions</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#promisify">promisify</a> <a class="sublink-1" tags="adapter,function" href="./adapter#rearg">rearg</a> <a class="sublink-1" tags="adapter" href="./adapter#spreadover">spreadOver</a> <a class="sublink-1" tags="adapter,function" href="./adapter#unary">unary</a><h3>Array</h3><a class="sublink-1" tags="array,function" href="./array#all">all</a> <a class="sublink-1" tags="array,function" href="./array#any">any</a> <a class="sublink-1" tags="array" href="./array#bifurcate">bifurcate</a> <a class="sublink-1" tags="array,function" href="./array#bifurcateby">bifurcateBy</a> <a class="sublink-1" tags="array" href="./array#chunk">chunk</a> <a class="sublink-1" tags="array" href="./array#compact">compact</a> <a class="sublink-1" tags="array,object" href="./array#countby">countBy</a> <a class="sublink-1" tags="array" href="./array#countoccurrences">countOccurrences</a> <a class="sublink-1" tags="array,recursion" href="./array#deepflatten">deepFlatten</a> <a class="sublink-1" tags="array,math" href="./array#difference">difference</a> <a class="sublink-1" tags="array,function" href="./array#differenceby">differenceBy</a> <a class="sublink-1" tags="array,function" href="./array#differencewith">differenceWith</a> <a class="sublink-1" tags="array" href="./array#drop">drop</a> <a class="sublink-1" tags="array" href="./array#dropright">dropRight</a> <a class="sublink-1" tags="array,function" href="./array#droprightwhile">dropRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#dropwhile">dropWhile</a> <a class="sublink-1" tags="array" href="./array#everynth">everyNth</a> <a class="sublink-1" tags="array" href="./array#filternonunique">filterNonUnique</a> <a class="sublink-1" tags="array" href="./array#findlast">findLast</a> <a class="sublink-1" tags="array,function" href="./array#findlastindex">findLastIndex</a> <a class="sublink-1" tags="array" href="./array#flatten">flatten</a> <a class="sublink-1" tags="array,function" href="./array#foreachright">forEachRight</a> <a class="sublink-1" tags="array,object" href="./array#groupby">groupBy</a> <a class="sublink-1" tags="array" href="./array#head">head</a> <a class="sublink-1" tags="array" href="./array#indexofall">indexOfAll</a> <a class="sublink-1" tags="array" href="./array#initial">initial</a> <a class="sublink-1" tags="array" href="./array#initialize2darray">initialize2DArray</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrange">initializeArrayWithRange</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrangeright">initializeArrayWithRangeRight</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithvalues">initializeArrayWithValues</a> <a class="sublink-1" tags="array,math" href="./array#intersection">intersection</a> <a class="sublink-1" tags="array,function" href="./array#intersectionby">intersectionBy</a> <a class="sublink-1" tags="array,function" href="./array#intersectionwith">intersectionWith</a> <a class="sublink-1" tags="array" href="./array#issorted">isSorted</a> <a class="sublink-1" tags="array" href="./array#join">join</a> <a class="sublink-1" tags="array" href="./array#last">last</a> <a class="sublink-1" tags="array,string,utility" href="./array#longestitem">longestItem</a> <a class="sublink-1" tags="array,object,advanced" href="./array#mapobject">mapObject</a> <a class="sublink-1" tags="array,math" href="./array#maxn">maxN</a> <a class="sublink-1" tags="array,math" href="./array#minn">minN</a> <a class="sublink-1" tags="array,function" href="./array#none">none</a> <a class="sublink-1" tags="array" href="./array#nthelement">nthElement</a> <a class="sublink-1" tags="array,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#remove">remove</a> <a class="sublink-1" tags="array,random" href="./array#sample">sample</a> <a class="sublink-1" tags="array,random" href="./array#samplesize">sampleSize</a> <a class="sublink-1" tags="array,random" href="./array#shuffle">shuffle</a> <a class="sublink-1" tags="array,math" href="./array#similarity">similarity</a> <a class="sublink-1" tags="array,math" href="./array#sortedindex">sortedIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedindexby">sortedIndexBy</a> <a class="sublink-1" tags="array,math" href="./array#sortedlastindex">sortedLastIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedlastindexby">sortedLastIndexBy</a> <a class="sublink-1" tags="array,sort,advanced" href="./array#stablesort">stableSort</a> <a class="sublink-1" tags="array,math" href="./array#symmetricdifference">symmetricDifference</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferenceby">symmetricDifferenceBy</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferencewith">symmetricDifferenceWith</a> <a class="sublink-1" tags="array" href="./array#tail">tail</a> <a class="sublink-1" tags="array" href="./array#take">take</a> <a class="sublink-1" tags="array" href="./array#takeright">takeRight</a> <a class="sublink-1" tags="array,function" href="./array#takerightwhile">takeRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#takewhile">takeWhile</a> <a class="sublink-1" tags="array,math" href="./array#union">union</a> <a class="sublink-1" tags="array,function" href="./array#unionby">unionBy</a> <a class="sublink-1" tags="array,function" href="./array#unionwith">unionWith</a> <a class="sublink-1" tags="array" href="./array#uniqueelements">uniqueElements</a> <a class="sublink-1" tags="array" href="./array#unzip">unzip</a> <a class="sublink-1" tags="array,function,advanced" href="./array#unzipwith">unzipWith</a> <a class="sublink-1" tags="array" href="./array#without">without</a> <a class="sublink-1" tags="array,math" href="./array#xprod">xProd</a> <a class="sublink-1" tags="array" href="./array#zip">zip</a> <a class="sublink-1" tags="array,object" href="./array#zipobject">zipObject</a> <a class="sublink-1" tags="array,function,advanced" href="./array#zipwith">zipWith</a><h3>Browser</h3><a class="sublink-1" tags="browser,array" href="./browser#arraytohtmllist">arrayToHtmlList</a> <a class="sublink-1" tags="browser" href="./browser#bottomvisible">bottomVisible</a> <a class="sublink-1" tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a> <a class="sublink-1" tags="browser,utility" href="./browser#createelement">createElement</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a> <a class="sublink-1" tags="browser,url" href="./browser#currenturl">currentURL</a> <a class="sublink-1" tags="browser" href="./browser#detectdevicetype">detectDeviceType</a> <a class="sublink-1" tags="browser" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a> <a class="sublink-1" tags="browser" href="./browser#getscrollposition">getScrollPosition</a> <a class="sublink-1" tags="browser,css" href="./browser#getstyle">getStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#hasclass">hasClass</a> <a class="sublink-1" tags="browser,utility,advanced,promise" href="./browser#hashbrowser">hashBrowser</a> <a class="sublink-1" tags="browser,css" href="./browser#hide">hide</a> <a class="sublink-1" tags="browser,url" href="./browser#httpsredirect">httpsRedirect</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a> <a class="sublink-1" tags="browser,event" href="./browser#off">off</a> <a class="sublink-1" tags="browser,event" href="./browser#on">on</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a> <a class="sublink-1" tags="browser,utility" href="./browser#prefix">prefix</a> <a class="sublink-1" tags="browser,utility" href="./browser#recordanimationframes">recordAnimationFrames</a> <a class="sublink-1" tags="browser,url" href="./browser#redirect">redirect</a> <a class="sublink-1" tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a> <a class="sublink-1" tags="browser" href="./browser#scrolltotop">scrollToTop</a> <a class="sublink-1" tags="browser" href="./browser#setstyle">setStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#show">show</a> <a class="sublink-1" tags="browser,css" href="./browser#smoothscroll">smoothScroll</a> <a class="sublink-1" tags="browser" href="./browser#toggleclass">toggleClass</a> <a class="sublink-1" tags="browser,utility,random" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a><h3>Date</h3><a class="sublink-1" tags="date,math,string,utility" href="./date#formatduration">formatDuration</a> <a class="sublink-1" tags="date" href="./date#getcolontimefromdate">getColonTimeFromDate</a> <a class="sublink-1" tags="date" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a> <a class="sublink-1" tags="date" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a> <a class="sublink-1" tags="date" href="./date#tomorrow">tomorrow</a><h3>Function</h3><a class="sublink-1" tags="function" href="#attempt">attempt</a> <a class="sublink-1" tags="function,object" href="#bind">bind</a> <a class="sublink-1" tags="function,object" href="#bindkey">bindKey</a> <a class="sublink-1" tags="function" href="#chainasync">chainAsync</a> <a class="sublink-1" tags="function" href="#compose">compose</a> <a class="sublink-1" tags="function" href="#composeright">composeRight</a> <a class="sublink-1" tags="function" href="#converge">converge</a> <a class="sublink-1" tags="function,recursion" href="#curry">curry</a> <a class="sublink-1" tags="function" href="#debounce">debounce</a> <a class="sublink-1" tags="function" href="#defer">defer</a> <a class="sublink-1" tags="function" href="#delay">delay</a> <a class="sublink-1" tags="function,utility" href="#functionname">functionName</a> <a class="sublink-1" tags="function" href="#memoize">memoize</a> <a class="sublink-1" tags="function" href="#negate">negate</a> <a class="sublink-1" tags="function" href="#once">once</a> <a class="sublink-1" tags="function" href="#partial">partial</a> <a class="sublink-1" tags="function" href="#partialright">partialRight</a> <a class="sublink-1" tags="function,promise" href="#runpromisesinseries">runPromisesInSeries</a> <a class="sublink-1" tags="function,promise" href="#sleep">sleep</a> <a class="sublink-1" tags="function" href="#throttle">throttle</a> <a class="sublink-1" tags="function" href="#times">times</a> <a class="sublink-1" tags="function" href="#uncurry">uncurry</a> <a class="sublink-1" tags="function,array" href="#unfold">unfold</a><h3>Math</h3><a class="sublink-1" tags="math" href="./math#approximatelyequal">approximatelyEqual</a> <a class="sublink-1" tags="math,array" href="./math#average">average</a> <a class="sublink-1" tags="math,array,function" href="./math#averageby">averageBy</a> <a class="sublink-1" tags="math" href="./math#binomialcoefficient">binomialCoefficient</a> <a class="sublink-1" tags="math" href="./math#clampnumber">clampNumber</a> <a class="sublink-1" tags="math" href="./math#degreestorads">degreesToRads</a> <a class="sublink-1" tags="math,array" href="./math#digitize">digitize</a> <a class="sublink-1" tags="math" href="./math#distance">distance</a> <a class="sublink-1" tags="math,array,advanced" href="./math#elo">elo</a> <a class="sublink-1" tags="math,recursion" href="./math#factorial">factorial</a> <a class="sublink-1" tags="math,array" href="./math#fibonacci">fibonacci</a> <a class="sublink-1" tags="math,recursion" href="./math#gcd">gcd</a> <a class="sublink-1" tags="math" href="./math#geometricprogression">geometricProgression</a> <a class="sublink-1" tags="math" href="./math#hammingdistance">hammingDistance</a> <a class="sublink-1" tags="math" href="./math#inrange">inRange</a> <a class="sublink-1" tags="math" href="./math#isdivisible">isDivisible</a> <a class="sublink-1" tags="math" href="./math#iseven">isEven</a> <a class="sublink-1" tags="math" href="./math#isprime">isPrime</a> <a class="sublink-1" tags="math,recursion" href="./math#lcm">lcm</a> <a class="sublink-1" tags="math,utility" href="./math#luhncheck">luhnCheck</a> <a class="sublink-1" tags="math,array,function" href="./math#maxby">maxBy</a> <a class="sublink-1" tags="math,array" href="./math#median">median</a> <a class="sublink-1" tags="math,array,function" href="./math#minby">minBy</a> <a class="sublink-1" tags="math" href="./math#percentile">percentile</a> <a class="sublink-1" tags="math" href="./math#powerset">powerset</a> <a class="sublink-1" tags="math,array" href="./math#primes">primes</a> <a class="sublink-1" tags="math" href="./math#radstodegrees">radsToDegrees</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintarrayinrange">randomIntArrayInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintegerinrange">randomIntegerInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomnumberinrange">randomNumberInRange</a> <a class="sublink-1" tags="math" href="./math#round">round</a> <a class="sublink-1" tags="math,utility" href="./math#sdbm">sdbm</a> <a class="sublink-1" tags="math,array" href="./math#standarddeviation">standardDeviation</a> <a class="sublink-1" tags="math,array" href="./math#sum">sum</a> <a class="sublink-1" tags="math,array,function" href="./math#sumby">sumBy</a> <a class="sublink-1" tags="math" href="./math#sumpower">sumPower</a> <a class="sublink-1" tags="math" href="./math#tosafeinteger">toSafeInteger</a><h3>Node</h3><a class="sublink-1" tags="node,string,utility" href="./node#atob">atob</a> <a class="sublink-1" tags="node,string,utility" href="./node#btoa">btoa</a> <a class="sublink-1" tags="node,utility,string" href="./node#colorize">colorize</a> <a class="sublink-1" tags="node" href="./node#hasflags">hasFlags</a> <a class="sublink-1" tags="node,utility,promise" href="./node#hashnode">hashNode</a> <a class="sublink-1" tags="node" href="./node#istravisci">isTravisCI</a> <a class="sublink-1" tags="node,json" href="./node#jsontofile">JSONToFile</a> <a class="sublink-1" tags="node,array,string" href="./node#readfilelines">readFileLines</a> <a class="sublink-1" tags="node,string" href="./node#untildify">untildify</a> <a class="sublink-1" tags="node,utility,random" href="./node#uuidgeneratornode">UUIDGeneratorNode</a><h3>Object</h3><a class="sublink-1" tags="object,function" href="./object#bindall">bindAll</a> <a class="sublink-1" tags="object,recursion" href="./object#deepclone">deepClone</a> <a class="sublink-1" tags="object" href="./object#defaults">defaults</a> <a class="sublink-1" tags="object,array,type,advanced" href="./object#equals">equals</a> <a class="sublink-1" tags="object,function" href="./object#findkey">findKey</a> <a class="sublink-1" tags="object,function" href="./object#findlastkey">findLastKey</a> <a class="sublink-1" tags="object,recursion" href="./object#flattenobject">flattenObject</a> <a class="sublink-1" tags="object" href="./object#forown">forOwn</a> <a class="sublink-1" tags="object" href="./object#forownright">forOwnRight</a> <a class="sublink-1" tags="object,function" href="./object#functions">functions</a> <a class="sublink-1" tags="object" href="./object#get">get</a> <a class="sublink-1" tags="object,function" href="./object#invertkeyvalues">invertKeyValues</a> <a class="sublink-1" tags="object" href="./object#lowercasekeys">lowercaseKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapkeys">mapKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapvalues">mapValues</a> <a class="sublink-1" tags="object,type" href="./object#matches">matches</a> <a class="sublink-1" tags="object,type,function" href="./object#matcheswith">matchesWith</a> <a class="sublink-1" tags="object,array" href="./object#merge">merge</a> <a class="sublink-1" tags="object" href="./object#nest">nest</a> <a class="sublink-1" tags="object,array" href="./object#objectfrompairs">objectFromPairs</a> <a class="sublink-1" tags="object,array" href="./object#objecttopairs">objectToPairs</a> <a class="sublink-1" tags="object,array" href="./object#omit">omit</a> <a class="sublink-1" tags="object,array,function" href="./object#omitby">omitBy</a> <a class="sublink-1" tags="object,array" href="./object#orderby">orderBy</a> <a class="sublink-1" tags="object,array" href="./object#pick">pick</a> <a class="sublink-1" tags="object,array,function" href="./object#pickby">pickBy</a> <a class="sublink-1" tags="object" href="./object#shallowclone">shallowClone</a> <a class="sublink-1" tags="object,array,string" href="./object#size">size</a> <a class="sublink-1" tags="object,array" href="./object#transform">transform</a> <a class="sublink-1" tags="object,logic,array" href="./object#truthcheckcollection">truthCheckCollection</a> <a class="sublink-1" tags="object,advanced" href="./object#unflattenobject">unflattenObject</a><h3>String</h3><a class="sublink-1" tags="string" href="./string#bytesize">byteSize</a> <a class="sublink-1" tags="string,array" href="./string#capitalize">capitalize</a> <a class="sublink-1" tags="string,regexp" href="./string#capitalizeeveryword">capitalizeEveryWord</a> <a class="sublink-1" tags="string,array" href="./string#decapitalize">decapitalize</a> <a class="sublink-1" tags="string,browser,regexp" href="./string#escapehtml">escapeHTML</a> <a class="sublink-1" tags="string,regexp" href="./string#escaperegexp">escapeRegExp</a> <a class="sublink-1" tags="string" href="./string#fromcamelcase">fromCamelCase</a> <a class="sublink-1" tags="string,utility,browser,url" href="./string#isabsoluteurl">isAbsoluteURL</a> <a class="sublink-1" tags="string,regexp" href="./string#isanagram">isAnagram</a> <a class="sublink-1" tags="string,utility" href="./string#islowercase">isLowerCase</a> <a class="sublink-1" tags="string,utility" href="./string#isuppercase">isUpperCase</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#mask">mask</a> <a class="sublink-1" tags="string" href="./string#pad">pad</a> <a class="sublink-1" tags="string" href="./string#palindrome">palindrome</a> <a class="sublink-1" tags="string" href="./string#pluralize">pluralize</a> <a class="sublink-1" tags="string,regexp" href="./string#removenonascii">removeNonASCII</a> <a class="sublink-1" tags="string,array" href="./string#reversestring">reverseString</a> <a class="sublink-1" tags="string" href="./string#sortcharactersinstring">sortCharactersInString</a> <a class="sublink-1" tags="string" href="./string#splitlines">splitLines</a> <a class="sublink-1" tags="string,recursion" href="./string#stringpermutations">stringPermutations</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#striphtmltags">stripHTMLTags</a> <a class="sublink-1" tags="string,regexp" href="./string#tocamelcase">toCamelCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tokebabcase">toKebabCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tosnakecase">toSnakeCase</a> <a class="sublink-1" tags="string" href="./string#truncatestring">truncateString</a> <a class="sublink-1" tags="string,browser" href="./string#unescapehtml">unescapeHTML</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#urljoin">URLJoin</a> <a class="sublink-1" tags="string,regexp" href="./string#words">words</a><h3>Type</h3><a class="sublink-1" tags="type" href="./type#gettype">getType</a> <a class="sublink-1" tags="type,array,regexp" href="./type#is">is</a> <a class="sublink-1" tags="type,array" href="./type#isarraylike">isArrayLike</a> <a class="sublink-1" tags="type" href="./type#isboolean">isBoolean</a> <a class="sublink-1" tags="type,array,object,string" href="./type#isempty">isEmpty</a> <a class="sublink-1" tags="type,function" href="./type#isfunction">isFunction</a> <a class="sublink-1" tags="type" href="./type#isnil">isNil</a> <a class="sublink-1" tags="type" href="./type#isnull">isNull</a> <a class="sublink-1" tags="type,math" href="./type#isnumber">isNumber</a> <a class="sublink-1" tags="type,object" href="./type#isobject">isObject</a> <a class="sublink-1" tags="type,object" href="./type#isobjectlike">isObjectLike</a> <a class="sublink-1" tags="type,object" href="./type#isplainobject">isPlainObject</a> <a class="sublink-1" tags="type,function,array,string" href="./type#isprimitive">isPrimitive</a> <a class="sublink-1" tags="type,function,promise" href="./type#ispromiselike">isPromiseLike</a> <a class="sublink-1" tags="type,string" href="./type#isstring">isString</a> <a class="sublink-1" tags="type" href="./type#issymbol">isSymbol</a> <a class="sublink-1" tags="type" href="./type#isundefined">isUndefined</a> <a class="sublink-1" tags="type,json" href="./type#isvalidjson">isValidJSON</a><h3>Utility</h3><a class="sublink-1" tags="utility,array,type" href="./utility#castarray">castArray</a> <a class="sublink-1" tags="utility,regexp" href="./utility#cloneregexp">cloneRegExp</a> <a class="sublink-1" tags="utility" href="./utility#coalesce">coalesce</a> <a class="sublink-1" tags="utility" href="./utility#coalescefactory">coalesceFactory</a> <a class="sublink-1" tags="utility,string" href="./utility#extendhex">extendHex</a> <a class="sublink-1" tags="utility,browser,string,url" href="./utility#geturlparameters">getURLParameters</a> <a class="sublink-1" tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httpget">httpGet</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httppost">httpPost</a> <a class="sublink-1" tags="utility,browser" href="./utility#isbrowser">isBrowser</a> <a class="sublink-1" tags="utility,function" href="./utility#mostperformant">mostPerformant</a> <a class="sublink-1" tags="utility,function" href="./utility#ntharg">nthArg</a> <a class="sublink-1" tags="utility,string" href="./utility#parsecookie">parseCookie</a> <a class="sublink-1" tags="utility,string,math" href="./utility#prettybytes">prettyBytes</a> <a class="sublink-1" tags="utility,random" href="./utility#randomhexcolorcode">randomHexColorCode</a> <a class="sublink-1" tags="utility" href="./utility#rgbtohex">RGBToHex</a> <a class="sublink-1" tags="utility,string" href="./utility#serializecookie">serializeCookie</a> <a class="sublink-1" tags="utility" href="./utility#timetaken">timeTaken</a> <a class="sublink-1" tags="utility" href="./utility#tocurrency">toCurrency</a> <a class="sublink-1" tags="utility,math" href="./utility#todecimalmark">toDecimalMark</a> <a class="sublink-1" tags="utility,math" href="./utility#toordinalsuffix">toOrdinalSuffix</a> <a class="sublink-1" tags="utility,math" href="./utility#validatenumber">validateNumber</a> <a class="sublink-1" tags="utility,regexp" href="./utility#yesno">yesNo</a></nav><main class="col-sm-12 col-md-8 col-lg-9" style="height:100%;overflow-y:auto;background:#eceef2;padding:0"><a id="top"> </a><h2 style="text-align:center">Function</h2><div class="card fluid"><h3 id="attempt" class="section double-padded">attempt</h3><div class="section double-padded"><p>Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.</p><p>Use a <code>try... catch</code> block to return either the result of the function or an appropriate error.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">attempt</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">);
|
|
}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">) {</span>
|
|
<span class="token keyword">return</span> e <span class="token keyword">instanceof</span> <span class="token class-name">Error</span> <span class="token operator">?</span> e <span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>e<span class="token punctuation">);
|
|
}
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">var</span> elements <span class="token operator">=</span> <span class="token function">attempt</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>selector<span class="token punctuation">) {</span>
|
|
<span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>selector<span class="token punctuation">);
|
|
},</span> <span class="token string">'>_>'</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>elements <span class="token keyword">instanceof</span> <span class="token class-name">Error</span><span class="token punctuation">)</span> elements <span class="token operator">=</span> <span class="token punctuation">[];</span> <span class="token comment">// elements = []</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="bind" class="section double-padded">bind</h3><div class="section double-padded"><p>Creates a function that invokes <code>fn</code> with a given context, optionally adding any additional supplied parameters to the beginning of the arguments.</p><p>Return a <code>function</code> that uses <code>Function.apply()</code> to apply the given <code>context</code> to <code>fn</code>. Use <code>Array.concat()</code> to prepend any additional supplied parameters to the arguments.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bind</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> context<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token keyword">function</span><span class="token punctuation">() {</span>
|
|
<span class="token keyword">return</span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>greeting<span class="token punctuation">,</span> punctuation<span class="token punctuation">) {</span>
|
|
<span class="token keyword">return</span> greeting <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">+</span> punctuation<span class="token punctuation">;
|
|
}</span>
|
|
<span class="token keyword">const</span> freddy <span class="token operator">=</span> <span class="token punctuation">{</span> user<span class="token punctuation">:</span> <span class="token string">'fred'</span> <span class="token punctuation">};</span>
|
|
<span class="token keyword">const</span> freddyBound <span class="token operator">=</span> <span class="token function">bind</span><span class="token punctuation">(</span>greet<span class="token punctuation">,</span> freddy<span class="token punctuation">);</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">freddyBound</span><span class="token punctuation">(</span><span class="token string">'hi'</span><span class="token punctuation">,</span> <span class="token string">'!'</span><span class="token punctuation">));</span> <span class="token comment">// 'hi fred!'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="bindkey" class="section double-padded">bindKey</h3><div class="section double-padded"><p>Creates a function that invokes the method at a given key of an object, optionally adding any additional supplied parameters to the beginning of the arguments.</p><p>Return a <code>function</code> that uses <code>Function.apply()</code> to bind <code>context[fn]</code> to <code>context</code>. Use <code>Array.concat()</code> to prepend any additional supplied parameters to the arguments.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bindKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token keyword">function</span><span class="token punctuation">() {</span>
|
|
<span class="token keyword">return</span> context<span class="token punctuation">[</span>fn<span class="token punctuation">].</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> freddy <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
user<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span>
|
|
greet<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>greeting<span class="token punctuation">,</span> punctuation<span class="token punctuation">) {</span>
|
|
<span class="token keyword">return</span> greeting <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">+</span> punctuation<span class="token punctuation">;
|
|
}
|
|
};</span>
|
|
<span class="token keyword">const</span> freddyBound <span class="token operator">=</span> <span class="token function">bindKey</span><span class="token punctuation">(</span>freddy<span class="token punctuation">,</span> <span class="token string">'greet'</span><span class="token punctuation">);</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">freddyBound</span><span class="token punctuation">(</span><span class="token string">'hi'</span><span class="token punctuation">,</span> <span class="token string">'!'</span><span class="token punctuation">));</span> <span class="token comment">// 'hi fred!'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="chainasync" class="section double-padded">chainAsync</h3><div class="section double-padded"><p>Chains asynchronous functions.</p><p>Loop through an array of functions containing asynchronous events, calling <code>next</code> when each asynchronous event has completed.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">chainAsync</span> <span class="token operator">=</span> fns <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> curr <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">next</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> fns<span class="token punctuation">[</span>curr<span class="token operator">++</span><span class="token punctuation">](</span>next<span class="token punctuation">);</span>
|
|
<span class="token function">next</span><span class="token punctuation">();
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">chainAsync</span><span class="token punctuation">([</span>
|
|
next <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'0 seconds'</span><span class="token punctuation">);</span>
|
|
<span class="token function">setTimeout</span><span class="token punctuation">(</span>next<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">);
|
|
},</span>
|
|
next <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'1 second'</span><span class="token punctuation">);
|
|
}
|
|
]);</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="compose" class="section double-padded">compose</h3><div class="section double-padded"><p>Performs right-to-left function composition.</p><p>Use <code>Array.reduce()</code> to perform right-to-left function composition. The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">compose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>fns<span class="token punctuation">)</span> <span class="token operator">=></span> fns<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>f<span class="token punctuation">,</span> g<span class="token punctuation">)</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> <span class="token function">f</span><span class="token punctuation">(</span><span class="token function">g</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">add5</span> <span class="token operator">=</span> x <span class="token operator">=></span> x <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">*</span> y<span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> multiplyAndAdd5 <span class="token operator">=</span> <span class="token function">compose</span><span class="token punctuation">(</span>add5<span class="token punctuation">,</span> multiply<span class="token punctuation">);</span>
|
|
<span class="token function">multiplyAndAdd5</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 15</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="composeright" class="section double-padded">composeRight</h3><div class="section double-padded"><p>Performs left-to-right function composition.</p><p>Use <code>Array.reduce()</code> to perform left-to-right function composition. The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">composeRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>fns<span class="token punctuation">)</span> <span class="token operator">=></span> fns<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>f<span class="token punctuation">,</span> g<span class="token punctuation">)</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> <span class="token function">g</span><span class="token punctuation">(</span><span class="token function">f</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">square</span> <span class="token operator">=</span> x <span class="token operator">=></span> x <span class="token operator">*</span> x<span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> addAndSquare <span class="token operator">=</span> <span class="token function">composeRight</span><span class="token punctuation">(</span>add<span class="token punctuation">,</span> square<span class="token punctuation">);</span>
|
|
<span class="token function">addAndSquare</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">// 9</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="converge" class="section double-padded">converge</h3><div class="section double-padded"><p>Accepts a converging function and a list of branching functions and returns a function that applies each branching function to the arguments and the results of the branching functions are passed as arguments to the converging function.</p><p>Use <code>Array.map()</code> and <code>Function.apply()</code> to apply each function to the given arguments. Use the spread operator (<code>...</code>) to call <code>coverger</code> with the results of all other functions.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">converge</span> <span class="token operator">=</span> <span class="token punctuation">(</span>converger<span class="token punctuation">,</span> fns<span class="token punctuation">)</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> <span class="token function">converger</span><span class="token punctuation">(</span><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> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> args<span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> average <span class="token operator">=</span> <span class="token function">converge</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">/</span> b<span class="token punctuation">, [</span>
|
|
arr <span class="token operator">=></span> arr<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> a <span class="token operator">+</span> v<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">),</span>
|
|
arr <span class="token operator">=></span> arr<span class="token punctuation">.</span>length
|
|
<span class="token punctuation">]);</span>
|
|
<span class="token function">average</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 comment">// 4</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="curry" class="section double-padded">curry</h3><div class="section double-padded"><p>Curries a function.</p><p>Use recursion. If the number of provided arguments (<code>args</code>) is sufficient, call the passed function <code>fn</code>. Otherwise, return a curried function <code>fn</code> that expects the rest of the arguments. If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. <code>Math.min()</code>), you can optionally pass the number of arguments to the second parameter <code>arity</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">curry</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> arity <span class="token operator">=</span> fn<span class="token punctuation">.</span>length<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arity <span class="token operator"><=</span> args<span class="token punctuation">.</span>length <span class="token operator">?</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">) :</span> curry<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> fn<span class="token punctuation">,</span> arity<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">curry</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>pow<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</span>
|
|
<span class="token function">curry</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>min<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)(</span><span class="token number">10</span><span class="token punctuation">)(</span><span class="token number">50</span><span class="token punctuation">)(</span><span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="debounce" class="section double-padded">debounce</h3><div class="section double-padded"><p>Creates a debounced function that delays invoking the provided function until at least <code>ms</code> milliseconds have elapsed since the last time it was invoked.</p><p>Each time the debounced function is invoked, clear the current pending timeout with <code>clearTimeout()</code> and use <code>setTimeout()</code> to create a new timeout that delays invoking the function until at least <code>ms</code> milliseconds has elapsed. Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary arguments. Omit the second argument, <code>ms</code>, to set the timeout at a default of 0 ms.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">debounce</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> ms <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> timeoutId<span class="token punctuation">;</span>
|
|
<span class="token keyword">return function</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">) {</span>
|
|
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeoutId<span class="token punctuation">);</span>
|
|
timeoutId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(()</span> <span class="token operator">=></span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> args<span class="token punctuation">),</span> ms<span class="token punctuation">);
|
|
};
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
|
<span class="token string">'resize'</span><span class="token punctuation">,</span>
|
|
<span class="token function">debounce</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">);</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">);
|
|
},</span> <span class="token number">250</span><span class="token punctuation">)
|
|
);</span> <span class="token comment">// Will log the window dimensions at most every 250ms</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="defer" class="section double-padded">defer</h3><div class="section double-padded"><p>Defers invoking a function until the current call stack has cleared.</p><p>Use <code>setTimeout()</code> with a timeout of 1ms to add a new event to the browser event queue and allow the rendering engine to complete its work. Use the spread (<code>...</code>) operator to supply the function with an arbitrary number of arguments.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">defer</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token comment">// Example A:</span>
|
|
<span class="token function">defer</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">),</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">);</span> <span class="token comment">// logs 'b' then 'a'</span>
|
|
|
|
<span class="token comment">// Example B:</span>
|
|
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#someElement'</span><span class="token punctuation">).</span>innerHTML <span class="token operator">=</span> <span class="token string">'Hello'</span><span class="token punctuation">;</span>
|
|
<span class="token function">longRunningFunction</span><span class="token punctuation">();</span> <span class="token comment">//Browser will not update the HTML until this has finished</span>
|
|
<span class="token function">defer</span><span class="token punctuation">(</span>longRunningFunction<span class="token punctuation">);</span> <span class="token comment">// Browser will update the HTML then run the function</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="delay" class="section double-padded">delay</h3><div class="section double-padded"><p>Invokes the provided function after <code>wait</code> milliseconds.</p><p>Use <code>setTimeout()</code> to delay execution of <code>fn</code>. Use the spread (<code>...</code>) operator to supply the function with an arbitrary number of arguments.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">delay</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">delay</span><span class="token punctuation">(</span>
|
|
<span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">) {</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">);
|
|
},</span>
|
|
<span class="token number">1000</span><span class="token punctuation">,</span>
|
|
<span class="token string">'later'</span>
|
|
<span class="token punctuation">);</span> <span class="token comment">// Logs 'later' after one second.</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="functionname" class="section double-padded">functionName</h3><div class="section double-padded"><p>Logs the name of a function.</p><p>Use <code>console.debug()</code> and the <code>name</code> property of the passed method to log the method's name to the <code>debug</code> channel of the console.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">functionName</span> <span class="token operator">=</span> fn <span class="token operator">=></span> <span class="token punctuation">(</span>console<span class="token punctuation">.</span><span class="token function">debug</span><span class="token punctuation">(</span>fn<span class="token punctuation">.</span>name<span class="token punctuation">),</span> fn<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">functionName</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>max<span class="token punctuation">);</span> <span class="token comment">// max (logged in debug channel of console)</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="memoize" class="section double-padded">memoize</h3><div class="section double-padded"><p>Returns the memoized (cached) function.</p><p>Create an empty cache by instantiating a new <code>Map</code> object. Return a function which takes a single argument to be supplied to the memoized function by first checking if the function's output for that specific input value is already cached, or store and return it if not. The <code>function</code> keyword must be used in order to allow the memoized function to have its <code>this</code> context changed if necessary. Allow access to the <code>cache</code> by setting it as a property on the returned function.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">memoize</span> <span class="token operator">=</span> fn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> cache <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">();</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">cached</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>val<span class="token punctuation">) {</span>
|
|
<span class="token keyword">return</span> cache<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> cache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>val<span class="token punctuation">) :</span> cache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> fn<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> val<span class="token punctuation">))</span> <span class="token operator">&&</span> cache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>val<span class="token punctuation">);
|
|
};</span>
|
|
cached<span class="token punctuation">.</span>cache <span class="token operator">=</span> cache<span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> cached<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token comment">// See the `anagrams` snippet.</span>
|
|
<span class="token keyword">const</span> anagramsCached <span class="token operator">=</span> <span class="token function">memoize</span><span class="token punctuation">(</span>anagrams<span class="token punctuation">);</span>
|
|
<span class="token function">anagramsCached</span><span class="token punctuation">(</span><span class="token string">'javascript'</span><span class="token punctuation">);</span> <span class="token comment">// takes a long time</span>
|
|
<span class="token function">anagramsCached</span><span class="token punctuation">(</span><span class="token string">'javascript'</span><span class="token punctuation">);</span> <span class="token comment">// returns virtually instantly since it's now cached</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anagramsCached<span class="token punctuation">.</span>cache<span class="token punctuation">);</span> <span class="token comment">// The cached anagrams map</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="negate" class="section double-padded">negate</h3><div class="section double-padded"><p>Negates a predicate function.</p><p>Take a predicate function and apply the not operator (<code>!</code>) to it with its arguments.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">negate</span> <span class="token operator">=</span> func <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><span class="token function">func</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><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 function">filter</span><span class="token punctuation">(</span><span class="token function">negate</span><span class="token punctuation">(</span>n <span class="token operator">=></span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">));</span> <span class="token comment">// [ 1, 3, 5 ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="once" class="section double-padded">once</h3><div class="section double-padded"><p>Ensures a function is called only once.</p><p>Utilizing a closure, use a flag, <code>called</code>, and set it to <code>true</code> once the function is called for the first time, preventing it from being called again. In order to allow the function to have its <code>this</code> context changed (such as in an event listener), the <code>function</code> keyword must be used, and the supplied function must have the context applied. Allow the function to be supplied with an arbitrary number of arguments using the rest/spread (<code>...</code>) operator.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">once</span> <span class="token operator">=</span> fn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> called <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return function</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">) {</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>called<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
|
called <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> args<span class="token punctuation">);
|
|
};
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">startApp</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">) {</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> event<span class="token punctuation">);</span> <span class="token comment">// document.body, MouseEvent</span>
|
|
<span class="token punctuation">};</span>
|
|
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token function">once</span><span class="token punctuation">(</span>startApp<span class="token punctuation">));</span> <span class="token comment">// only runs `startApp` once upon click</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="partial" class="section double-padded">partial</h3><div class="section double-padded"><p>Creates a function that invokes <code>fn</code> with <code>partials</code> prepended to the arguments it receives.</p><p>Use the spread operator (<code>...</code>) to prepend <code>partials</code> to the list of arguments of <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">partial</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token operator">...</span>partials<span class="token punctuation">)</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> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>partials<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">greet</span> <span class="token operator">=</span> <span class="token punctuation">(</span>greeting<span class="token punctuation">,</span> name<span class="token punctuation">)</span> <span class="token operator">=></span> greeting <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'!'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> greetHello <span class="token operator">=</span> <span class="token function">partial</span><span class="token punctuation">(</span>greet<span class="token punctuation">,</span> <span class="token string">'Hello'</span><span class="token punctuation">);</span>
|
|
<span class="token function">greetHello</span><span class="token punctuation">(</span><span class="token string">'John'</span><span class="token punctuation">);</span> <span class="token comment">// 'Hello John!'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="partialright" class="section double-padded">partialRight</h3><div class="section double-padded"><p>Creates a function that invokes <code>fn</code> with <code>partials</code> appended to the arguments it receives.</p><p>Use the spread operator (<code>...</code>) to append <code>partials</code> to the list of arguments of <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">partialRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token operator">...</span>partials<span class="token punctuation">)</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> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">,</span> <span class="token operator">...</span>partials<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">greet</span> <span class="token operator">=</span> <span class="token punctuation">(</span>greeting<span class="token punctuation">,</span> name<span class="token punctuation">)</span> <span class="token operator">=></span> greeting <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'!'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> greetJohn <span class="token operator">=</span> <span class="token function">partialRight</span><span class="token punctuation">(</span>greet<span class="token punctuation">,</span> <span class="token string">'John'</span><span class="token punctuation">);</span>
|
|
<span class="token function">greetJohn</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">);</span> <span class="token comment">// 'Hello John!'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="runpromisesinseries" class="section double-padded">runPromisesInSeries</h3><div class="section double-padded"><p>Runs an array of promises in series.</p><p>Use <code>Array.reduce()</code> to create a promise chain, where each promise returns the next promise when resolved.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">runPromisesInSeries</span> <span class="token operator">=</span> ps <span class="token operator">=></span> ps<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>p<span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token operator">=></span> p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>next<span class="token punctuation">),</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">());</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">delay</span> <span class="token operator">=</span> d <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>r <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>r<span class="token punctuation">,</span> d<span class="token punctuation">));</span>
|
|
<span class="token function">runPromisesInSeries</span><span class="token punctuation">([()</span> <span class="token operator">=></span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">), ()</span> <span class="token operator">=></span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)]);</span> <span class="token comment">// Executes each promise sequentially, taking a total of 3 seconds to complete</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sleep" class="section double-padded">sleep</h3><div class="section double-padded"><p>Delays the execution of an asynchronous function.</p><p>Delay executing part of an <code>async</code> function, by putting it to sleep, returning a <code>Promise</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sleep</span> <span class="token operator">=</span> ms <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>resolve <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> ms<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">async function</span> <span class="token function">sleepyWork</span><span class="token punctuation">() {</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"I'm going to sleep for 1 second."</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">await</span> <span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">);</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I woke up after 1 second.'</span><span class="token punctuation">);
|
|
}</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="throttle" class="section double-padded">throttle</h3><div class="section double-padded"><p>Creates a throttled function that only invokes the provided function at most once per every <code>wait</code> milliseconds</p><p>Use <code>setTimeout()</code> and <code>clearTimeout()</code> to throttle the given method, <code>fn</code>. Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary <code>arguments</code>. Use <code>Date.now()</code> to keep track of the last time the throttled function was invoked. Omit the second argument, <code>wait</code>, to set the timeout at a default of 0 ms.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">throttle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> inThrottle<span class="token punctuation">,</span> lastFn<span class="token punctuation">,</span> lastTime<span class="token punctuation">;</span>
|
|
<span class="token keyword">return function</span><span class="token punctuation">() {</span>
|
|
<span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
|
|
args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>inThrottle<span class="token punctuation">) {</span>
|
|
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
|
|
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();</span>
|
|
inThrottle <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;
|
|
}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
|
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>lastFn<span class="token punctuation">);</span>
|
|
lastFn <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">() {</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime <span class="token operator">>=</span> wait<span class="token punctuation">) {</span>
|
|
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
|
|
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();
|
|
}
|
|
},</span> wait <span class="token operator">-</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime<span class="token punctuation">));
|
|
}
|
|
};
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
|
<span class="token string">'resize'</span><span class="token punctuation">,</span>
|
|
<span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">) {</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">);</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">);
|
|
},</span> <span class="token number">250</span><span class="token punctuation">)
|
|
);</span> <span class="token comment">// Will log the window dimensions at most every 250ms</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="times" class="section double-padded">times</h3><div class="section double-padded"><p>Iterates over a callback <code>n</code> times</p><p>Use <code>Function.call()</code> to call <code>fn</code> <code>n</code> times or until it returns <code>false</code>. Omit the last argument, <code>context</code>, to use an <code>undefined</code> object (or the global object in non-strict mode).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">times</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> context <span class="token operator">=</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></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>
|
|
<span class="token keyword">while</span> <span class="token punctuation">(</span>fn<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token boolean">false</span> <span class="token operator">&& ++</span>i <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 keyword">var</span> output <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
|
<span class="token function">times</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> i <span class="token operator">=></span> <span class="token punctuation">(</span>output <span class="token operator">+=</span> i<span class="token punctuation">));</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>output<span class="token punctuation">);</span> <span class="token comment">// 01234</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="uncurry" class="section double-padded">uncurry</h3><div class="section double-padded"><p>Uncurries a function up to depth <code>n</code>.</p><p>Return a variadic function. Use <code>Array.reduce()</code> on the provided arguments to call each subsequent curry level of the function. If the <code>length</code> of the provided arguments is less than <code>n</code> throw an error. Otherwise, call <code>fn</code> with the proper amount of arguments, using <code>Array.slice(0, n)</code>. Omit the second argument, <code>n</code>, to uncurry up to depth <code>1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">uncurry</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</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> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">next</span> <span class="token operator">=</span> acc <span class="token operator">=></span> args <span class="token operator">=></span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">x</span><span class="token punctuation">(</span>y<span class="token punctuation">),</span> acc<span class="token punctuation">);</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator">></span> args<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token keyword">throw new</span> <span class="token class-name">RangeError</span><span class="token punctuation">(</span><span class="token string">'Arguments too few!'</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span>fn<span class="token punctuation">)(</span>args<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> n<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> x <span class="token operator">=></span> y <span class="token operator">=></span> z <span class="token operator">=></span> x <span class="token operator">+</span> y <span class="token operator">+</span> z<span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> uncurriedAdd <span class="token operator">=</span> <span class="token function">uncurry</span><span class="token punctuation">(</span>add<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span>
|
|
<span class="token function">uncurriedAdd</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">// 6</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unfold" class="section double-padded">unfold</h3><div class="section double-padded"><p>Builds an array, using an iterator function and an initial seed value.</p><p>Use a <code>while</code> loop and <code>Array.push()</code> to call the function repeatedly until it returns <code>false</code>. The iterator function accepts one argument (<code>seed</code>) and must always return an array with two elements ([<code>value</code>, <code>nextSeed</code>]) or <code>false</code> to terminate.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unfold</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> seed<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[],</span>
|
|
val <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> seed<span class="token punctuation">];</span>
|
|
<span class="token keyword">while</span> <span class="token punctuation">((</span>val <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>val<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">])))</span> result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>val<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]);</span>
|
|
<span class="token keyword">return</span> result<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> n <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">></span> <span class="token number">50</span> <span class="token operator">?</span> <span class="token boolean">false</span> <span class="token punctuation">: [</span><span class="token operator">-</span>n<span class="token punctuation">,</span> n <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">]);</span>
|
|
<span class="token function">unfold</span><span class="token punctuation">(</span>f<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// [-10, -20, -30, -40, -50]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><button class="scroll-to-top">↑</button><footer><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html> |