andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a1e71a839d8b35b10cb78acf464e906b5add0874
30-seconds-of-code/docs/object.html
30secondsofcode a1e71a839d Travis build: 51
2018-07-06 17:27:05 +00:00

347 lines
132 KiB
HTML
Raw Blame History

<!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>Object - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
let matchingTags = [];
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if(data.includes(true)){
x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
})
}
function scrollToTop(){
const c = document.querySelector('main').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('main').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#"+id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
registerClickListener();
if(window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Object')[0].offsetTop - 130;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Object')[0].offsetTop - 65;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if( document.getElementById('doc-drawer-checkbox').checked ) {
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
document.getElementById('doc-drawer-checkbox').checked = false;
}
}
if ( event.target.classList.contains('collapse') ) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('clipboard-copy')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function() {
tst.style.opacity = 0;
setTimeout(function() {
document.body.removeChild(tst);
},300);
},1700);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.classList.contains('sublink-1')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
document.getElementById('doc-drawer-checkbox').checked = false;
}
}, false);
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header style="height:3.5rem;box-sizing:border-box;overflow:hidden"><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height:3.5rem;padding:.375rem;box-sizing:border-box" alt="logo"/><span id="title">&nbsp;30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1><label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label></header><div class="row" style="height:calc(100vh - 3.5rem);overflow:hidden"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav class="col-md-4 col-lg-3" style="border-top:0"><div class="input-group vertical"><input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search..."></div><h3>Adapter</h3><a class="sublink-1" tags="adapter,function" href="./adapter#ary">ary</a> <a class="sublink-1" tags="adapter,function" href="./adapter#call">call</a> <a class="sublink-1" tags="adapter,function,array" href="./adapter#collectinto">collectInto</a> <a class="sublink-1" tags="adapter,function" href="./adapter#flip">flip</a> <a class="sublink-1" tags="adapter,function" href="./adapter#over">over</a> <a class="sublink-1" tags="adapter,function" href="./adapter#overargs">overArgs</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a> <a class="sublink-1" tags="adapter,function" href="./adapter#pipefunctions">pipeFunctions</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#promisify">promisify</a> <a class="sublink-1" tags="adapter,function" href="./adapter#rearg">rearg</a> <a class="sublink-1" tags="adapter" href="./adapter#spreadover">spreadOver</a> <a class="sublink-1" tags="adapter,function" href="./adapter#unary">unary</a><h3>Array</h3><a class="sublink-1" tags="array,function" href="./array#all">all</a> <a class="sublink-1" tags="array,function" href="./array#any">any</a> <a class="sublink-1" tags="array,string,utility" href="./array#arraytocsv">arrayToCSV</a> <a class="sublink-1" tags="array" href="./array#bifurcate">bifurcate</a> <a class="sublink-1" tags="array,function" href="./array#bifurcateby">bifurcateBy</a> <a class="sublink-1" tags="array" href="./array#chunk">chunk</a> <a class="sublink-1" tags="array" href="./array#compact">compact</a> <a class="sublink-1" tags="array,object" href="./array#countby">countBy</a> <a class="sublink-1" tags="array" href="./array#countoccurrences">countOccurrences</a> <a class="sublink-1" tags="array,recursion" href="./array#deepflatten">deepFlatten</a> <a class="sublink-1" tags="array,math" href="./array#difference">difference</a> <a class="sublink-1" tags="array,function" href="./array#differenceby">differenceBy</a> <a class="sublink-1" tags="array,function" href="./array#differencewith">differenceWith</a> <a class="sublink-1" tags="array" href="./array#drop">drop</a> <a class="sublink-1" tags="array" href="./array#dropright">dropRight</a> <a class="sublink-1" tags="array,function" href="./array#droprightwhile">dropRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#dropwhile">dropWhile</a> <a class="sublink-1" tags="array" href="./array#everynth">everyNth</a> <a class="sublink-1" tags="array" href="./array#filternonunique">filterNonUnique</a> <a class="sublink-1" tags="array" href="./array#findlast">findLast</a> <a class="sublink-1" tags="array,function" href="./array#findlastindex">findLastIndex</a> <a class="sublink-1" tags="array" href="./array#flatten">flatten</a> <a class="sublink-1" tags="array,function" href="./array#foreachright">forEachRight</a> <a class="sublink-1" tags="array,object" href="./array#groupby">groupBy</a> <a class="sublink-1" tags="array" href="./array#head">head</a> <a class="sublink-1" tags="array" href="./array#indexofall">indexOfAll</a> <a class="sublink-1" tags="array" href="./array#initial">initial</a> <a class="sublink-1" tags="array" href="./array#initialize2darray">initialize2DArray</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrange">initializeArrayWithRange</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrangeright">initializeArrayWithRangeRight</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithvalues">initializeArrayWithValues</a> <a class="sublink-1" tags="array,recursion" href="./array#initializendarray">initializeNDArray</a> <a class="sublink-1" tags="array,math" href="./array#intersection">intersection</a> <a class="sublink-1" tags="array,function" href="./array#intersectionby">intersectionBy</a> <a class="sublink-1" tags="array,function" href="./array#intersectionwith">intersectionWith</a> <a class="sublink-1" tags="array" href="./array#issorted">isSorted</a> <a class="sublink-1" tags="array" href="./array#join">join</a> <a class="sublink-1" tags="array,string,object,advanced" href="./array#jsontocsv">JSONtoCSV</a> <a class="sublink-1" tags="array" href="./array#last">last</a> <a class="sublink-1" tags="array,string,utility" href="./array#longestitem">longestItem</a> <a class="sublink-1" tags="array,object,advanced" href="./array#mapobject">mapObject</a> <a class="sublink-1" tags="array,math" href="./array#maxn">maxN</a> <a class="sublink-1" tags="array,math" href="./array#minn">minN</a> <a class="sublink-1" tags="array,function" href="./array#none">none</a> <a class="sublink-1" tags="array" href="./array#nthelement">nthElement</a> <a class="sublink-1" tags="array" href="./array#offset">offset</a> <a class="sublink-1" tags="array,object,function" href="./array#partition">partition</a> <a class="sublink-1" tags="array,recursion" href="./array#permutations">permutations</a> <a class="sublink-1" tags="array" href="./array#pull">pull</a> <a class="sublink-1" tags="array" href="./array#pullatindex">pullAtIndex</a> <a class="sublink-1" tags="array" href="./array#pullatvalue">pullAtValue</a> <a class="sublink-1" tags="array,function,advanced" href="./array#pullby">pullBy</a> <a class="sublink-1" tags="array" href="./array#reducedfilter">reducedFilter</a> <a class="sublink-1" tags="array,function" href="./array#reducesuccessive">reduceSuccessive</a> <a class="sublink-1" tags="array,function" href="./array#reducewhich">reduceWhich</a> <a class="sublink-1" tags="array" href="./array#reject">reject</a> <a class="sublink-1" tags="array" href="./array#remove">remove</a> <a class="sublink-1" tags="array,random" href="./array#sample">sample</a> <a class="sublink-1" tags="array,random" href="./array#samplesize">sampleSize</a> <a class="sublink-1" tags="array,random" href="./array#shuffle">shuffle</a> <a class="sublink-1" tags="array,math" href="./array#similarity">similarity</a> <a class="sublink-1" tags="array,math" href="./array#sortedindex">sortedIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedindexby">sortedIndexBy</a> <a class="sublink-1" tags="array,math" href="./array#sortedlastindex">sortedLastIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedlastindexby">sortedLastIndexBy</a> <a class="sublink-1" tags="array,sort,advanced" href="./array#stablesort">stableSort</a> <a class="sublink-1" tags="array,math" href="./array#symmetricdifference">symmetricDifference</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferenceby">symmetricDifferenceBy</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferencewith">symmetricDifferenceWith</a> <a class="sublink-1" tags="array" href="./array#tail">tail</a> <a class="sublink-1" tags="array" href="./array#take">take</a> <a class="sublink-1" tags="array" href="./array#takeright">takeRight</a> <a class="sublink-1" tags="array,function" href="./array#takerightwhile">takeRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#takewhile">takeWhile</a> <a class="sublink-1" tags="array" href="./array#tohash">toHash</a> <a class="sublink-1" tags="array,math" href="./array#union">union</a> <a class="sublink-1" tags="array,function" href="./array#unionby">unionBy</a> <a class="sublink-1" tags="array,function" href="./array#unionwith">unionWith</a> <a class="sublink-1" tags="array" href="./array#uniqueelements">uniqueElements</a> <a class="sublink-1" tags="array" href="./array#unzip">unzip</a> <a class="sublink-1" tags="array,function,advanced" href="./array#unzipwith">unzipWith</a> <a class="sublink-1" tags="array" href="./array#without">without</a> <a class="sublink-1" tags="array,math" href="./array#xprod">xProd</a> <a class="sublink-1" tags="array" href="./array#zip">zip</a> <a class="sublink-1" tags="array,object" href="./array#zipobject">zipObject</a> <a class="sublink-1" tags="array,function,advanced" href="./array#zipwith">zipWith</a><h3>Browser</h3><a class="sublink-1" tags="browser,array" href="./browser#arraytohtmllist">arrayToHtmlList</a> <a class="sublink-1" tags="browser" href="./browser#bottomvisible">bottomVisible</a> <a class="sublink-1" tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a> <a class="sublink-1" tags="browser,advanced" href="./browser#counter">counter</a> <a class="sublink-1" tags="browser,utility" href="./browser#createelement">createElement</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a> <a class="sublink-1" tags="browser,url" href="./browser#currenturl">currentURL</a> <a class="sublink-1" tags="browser" href="./browser#detectdevicetype">detectDeviceType</a> <a class="sublink-1" tags="browser" href="./browser#elementcontains">elementContains</a> <a class="sublink-1" tags="browser" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a> <a class="sublink-1" tags="browser" href="./browser#getscrollposition">getScrollPosition</a> <a class="sublink-1" tags="browser,css" href="./browser#getstyle">getStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#hasclass">hasClass</a> <a class="sublink-1" tags="browser,utility,advanced,promise" href="./browser#hashbrowser">hashBrowser</a> <a class="sublink-1" tags="browser,css" href="./browser#hide">hide</a> <a class="sublink-1" tags="browser,url" href="./browser#httpsredirect">httpsRedirect</a> <a class="sublink-1" tags="browser" href="./browser#insertafter">insertAfter</a> <a class="sublink-1" tags="browser" href="./browser#insertbefore">insertBefore</a> <a class="sublink-1" tags="browser" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a> <a class="sublink-1" tags="browser,array" href="./browser#nodelisttoarray">nodeListToArray</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a> <a class="sublink-1" tags="browser,event" href="./browser#off">off</a> <a class="sublink-1" tags="browser,event" href="./browser#on">on</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a> <a class="sublink-1" tags="browser,utility" href="./browser#prefix">prefix</a> <a class="sublink-1" tags="browser,utility" href="./browser#recordanimationframes">recordAnimationFrames</a> <a class="sublink-1" tags="browser,url" href="./browser#redirect">redirect</a> <a class="sublink-1" tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a> <a class="sublink-1" tags="browser" href="./browser#scrolltotop">scrollToTop</a> <a class="sublink-1" tags="browser" href="./browser#setstyle">setStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#show">show</a> <a class="sublink-1" tags="browser,css" href="./browser#smoothscroll">smoothScroll</a> <a class="sublink-1" tags="browser" href="./browser#toggleclass">toggleClass</a> <a class="sublink-1" tags="browser,event" href="./browser#triggerevent">triggerEvent</a> <a class="sublink-1" tags="browser,utility,random" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a><h3>Date</h3><a class="sublink-1" tags="date,math,string,utility" href="./date#formatduration">formatDuration</a> <a class="sublink-1" tags="date" href="./date#getcolontimefromdate">getColonTimeFromDate</a> <a class="sublink-1" tags="date" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a> <a class="sublink-1" tags="date" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a> <a class="sublink-1" tags="date" href="./date#tomorrow">tomorrow</a><h3>Function</h3><a class="sublink-1" tags="function" href="./function#attempt">attempt</a> <a class="sublink-1" tags="function,object" href="./function#bind">bind</a> <a class="sublink-1" tags="function,object" href="./function#bindkey">bindKey</a> <a class="sublink-1" tags="function" href="./function#chainasync">chainAsync</a> <a class="sublink-1" tags="function" href="./function#compose">compose</a> <a class="sublink-1" tags="function" href="./function#composeright">composeRight</a> <a class="sublink-1" tags="function" href="./function#converge">converge</a> <a class="sublink-1" tags="function,recursion" href="./function#curry">curry</a> <a class="sublink-1" tags="function" href="./function#debounce">debounce</a> <a class="sublink-1" tags="function" href="./function#defer">defer</a> <a class="sublink-1" tags="function" href="./function#delay">delay</a> <a class="sublink-1" tags="function,utility" href="./function#functionname">functionName</a> <a class="sublink-1" tags="function" href="./function#hz">hz</a> <a class="sublink-1" tags="function" href="./function#memoize">memoize</a> <a class="sublink-1" tags="function" href="./function#negate">negate</a> <a class="sublink-1" tags="function" href="./function#once">once</a> <a class="sublink-1" tags="function" href="./function#partial">partial</a> <a class="sublink-1" tags="function" href="./function#partialright">partialRight</a> <a class="sublink-1" tags="function,promise" href="./function#runpromisesinseries">runPromisesInSeries</a> <a class="sublink-1" tags="function,promise" href="./function#sleep">sleep</a> <a class="sublink-1" tags="function" href="./function#throttle">throttle</a> <a class="sublink-1" tags="function" href="./function#times">times</a> <a class="sublink-1" tags="function" href="./function#uncurry">uncurry</a> <a class="sublink-1" tags="function,array" href="./function#unfold">unfold</a> <a class="sublink-1" tags="function" href="./function#when">when</a><h3>Math</h3><a class="sublink-1" tags="math" href="./math#approximatelyequal">approximatelyEqual</a> <a class="sublink-1" tags="math,array" href="./math#average">average</a> <a class="sublink-1" tags="math,array,function" href="./math#averageby">averageBy</a> <a class="sublink-1" tags="math" href="./math#binomialcoefficient">binomialCoefficient</a> <a class="sublink-1" tags="math" href="./math#clampnumber">clampNumber</a> <a class="sublink-1" tags="math" href="./math#degreestorads">degreesToRads</a> <a class="sublink-1" tags="math,array" href="./math#digitize">digitize</a> <a class="sublink-1" tags="math" href="./math#distance">distance</a> <a class="sublink-1" tags="math,array,advanced" href="./math#elo">elo</a> <a class="sublink-1" tags="math,recursion" href="./math#factorial">factorial</a> <a class="sublink-1" tags="math,array" href="./math#fibonacci">fibonacci</a> <a class="sublink-1" tags="math,recursion" href="./math#gcd">gcd</a> <a class="sublink-1" tags="math" href="./math#geometricprogression">geometricProgression</a> <a class="sublink-1" tags="math" href="./math#hammingdistance">hammingDistance</a> <a class="sublink-1" tags="math" href="./math#inrange">inRange</a> <a class="sublink-1" tags="math" href="./math#isdivisible">isDivisible</a> <a class="sublink-1" tags="math" href="./math#iseven">isEven</a> <a class="sublink-1" tags="math" href="./math#isprime">isPrime</a> <a class="sublink-1" tags="math,recursion" href="./math#lcm">lcm</a> <a class="sublink-1" tags="math,utility" href="./math#luhncheck">luhnCheck</a> <a class="sublink-1" tags="math,array,function" href="./math#maxby">maxBy</a> <a class="sublink-1" tags="math,array" href="./math#median">median</a> <a class="sublink-1" tags="math,array,function" href="./math#minby">minBy</a> <a class="sublink-1" tags="math" href="./math#percentile">percentile</a> <a class="sublink-1" tags="math" href="./math#powerset">powerset</a> <a class="sublink-1" tags="math,array" href="./math#primes">primes</a> <a class="sublink-1" tags="math" href="./math#radstodegrees">radsToDegrees</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintarrayinrange">randomIntArrayInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintegerinrange">randomIntegerInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomnumberinrange">randomNumberInRange</a> <a class="sublink-1" tags="math" href="./math#round">round</a> <a class="sublink-1" tags="math,utility" href="./math#sdbm">sdbm</a> <a class="sublink-1" tags="math,array" href="./math#standarddeviation">standardDeviation</a> <a class="sublink-1" tags="math,array" href="./math#sum">sum</a> <a class="sublink-1" tags="math,array,function" href="./math#sumby">sumBy</a> <a class="sublink-1" tags="math" href="./math#sumpower">sumPower</a> <a class="sublink-1" tags="math" href="./math#tosafeinteger">toSafeInteger</a><h3>Node</h3><a class="sublink-1" tags="node,string,utility" href="./node#atob">atob</a> <a class="sublink-1" tags="node,string,utility" href="./node#btoa">btoa</a> <a class="sublink-1" tags="node,utility,string" href="./node#colorize">colorize</a> <a class="sublink-1" tags="node" href="./node#hasflags">hasFlags</a> <a class="sublink-1" tags="node,utility,promise" href="./node#hashnode">hashNode</a> <a class="sublink-1" tags="node" href="./node#istravisci">isTravisCI</a> <a class="sublink-1" tags="node,json" href="./node#jsontofile">JSONToFile</a> <a class="sublink-1" tags="node,array,string" href="./node#readfilelines">readFileLines</a> <a class="sublink-1" tags="node,string" href="./node#untildify">untildify</a> <a class="sublink-1" tags="node,utility,random" href="./node#uuidgeneratornode">UUIDGeneratorNode</a><h3>Object</h3><a class="sublink-1" tags="object,function" href="#bindall">bindAll</a> <a class="sublink-1" tags="object,recursion" href="#deepclone">deepClone</a> <a class="sublink-1" tags="object" href="#defaults">defaults</a> <a class="sublink-1" tags="object,array,type,advanced" href="#equals">equals</a> <a class="sublink-1" tags="object,function" href="#findkey">findKey</a> <a class="sublink-1" tags="object,function" href="#findlastkey">findLastKey</a> <a class="sublink-1" tags="object,recursion" href="#flattenobject">flattenObject</a> <a class="sublink-1" tags="object" href="#forown">forOwn</a> <a class="sublink-1" tags="object" href="#forownright">forOwnRight</a> <a class="sublink-1" tags="object,function" href="#functions">functions</a> <a class="sublink-1" tags="object" href="#get">get</a> <a class="sublink-1" tags="object,function" href="#invertkeyvalues">invertKeyValues</a> <a class="sublink-1" tags="object" href="#lowercasekeys">lowercaseKeys</a> <a class="sublink-1" tags="object,function" href="#mapkeys">mapKeys</a> <a class="sublink-1" tags="object,function" href="#mapvalues">mapValues</a> <a class="sublink-1" tags="object,type" href="#matches">matches</a> <a class="sublink-1" tags="object,type,function" href="#matcheswith">matchesWith</a> <a class="sublink-1" tags="object,array" href="#merge">merge</a> <a class="sublink-1" tags="object" href="#nest">nest</a> <a class="sublink-1" tags="object,array" href="#objectfrompairs">objectFromPairs</a> <a class="sublink-1" tags="object,array" href="#objecttopairs">objectToPairs</a> <a class="sublink-1" tags="object,array" href="#omit">omit</a> <a class="sublink-1" tags="object,array,function" href="#omitby">omitBy</a> <a class="sublink-1" tags="object,array" href="#orderby">orderBy</a> <a class="sublink-1" tags="object,array" href="#pick">pick</a> <a class="sublink-1" tags="object,array,function" href="#pickby">pickBy</a> <a class="sublink-1" tags="object" href="#renamekeys">renameKeys</a> <a class="sublink-1" tags="object" href="#shallowclone">shallowClone</a> <a class="sublink-1" tags="object,array,string" href="#size">size</a> <a class="sublink-1" tags="object,array" href="#transform">transform</a> <a class="sublink-1" tags="object,logic,array" href="#truthcheckcollection">truthCheckCollection</a> <a class="sublink-1" tags="object,advanced" href="#unflattenobject">unflattenObject</a><h3>String</h3><a class="sublink-1" tags="string" href="./string#bytesize">byteSize</a> <a class="sublink-1" tags="string,array" href="./string#capitalize">capitalize</a> <a class="sublink-1" tags="string,regexp" href="./string#capitalizeeveryword">capitalizeEveryWord</a> <a class="sublink-1" tags="string,array,utility" href="./string#csvtoarray">CSVToArray</a> <a class="sublink-1" tags="string,array,object,advanced" href="./string#csvtojson">CSVToJSON</a> <a class="sublink-1" tags="string,array" href="./string#decapitalize">decapitalize</a> <a class="sublink-1" tags="string,browser,regexp" href="./string#escapehtml">escapeHTML</a> <a class="sublink-1" tags="string,regexp" href="./string#escaperegexp">escapeRegExp</a> <a class="sublink-1" tags="string" href="./string#fromcamelcase">fromCamelCase</a> <a class="sublink-1" tags="string,utility,browser,url" href="./string#isabsoluteurl">isAbsoluteURL</a> <a class="sublink-1" tags="string,regexp" href="./string#isanagram">isAnagram</a> <a class="sublink-1" tags="string,utility" href="./string#islowercase">isLowerCase</a> <a class="sublink-1" tags="string,utility" href="./string#isuppercase">isUpperCase</a> <a class="sublink-1" tags="string,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">&nbsp;</a><h2 style="text-align:center">Object</h2><div class="card fluid"><h3 id="bindall" class="section double-padded">bindAll</h3><div class="section double-padded"><p>Binds methods of an object to the object itself, overwriting the existing method.</p><p>Use <code>Array.forEach()</code> to return a <code>function</code> that uses <code>Function.apply()</code> to apply the given context (<code>obj</code>) to <code>fn</code> for each function specified.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bindAll</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<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">forEach</span><span class="token punctuation">(</span>
fn <span class="token operator">=></span> <span class="token punctuation">(
(</span>f <span class="token operator">=</span> obj<span class="token punctuation">[</span>fn<span class="token punctuation">]),
(</span>obj<span class="token punctuation">[</span>fn<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> f<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">);
})
)
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">var</span> view <span class="token operator">=</span> <span class="token punctuation">{</span>
label<span class="token punctuation">:</span> <span class="token string">'docs'</span><span class="token punctuation">,</span>
click<span class="token punctuation">:</span> <span class="token keyword">function</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">'clicked '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>label<span class="token punctuation">);
}
};</span>
<span class="token function">bindAll</span><span class="token punctuation">(</span>view<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">);</span>
<span class="token function">jQuery</span><span class="token punctuation">(</span>element<span class="token punctuation">).</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> view<span class="token punctuation">.</span>click<span class="token punctuation">);</span> <span class="token comment">// Logs 'clicked docs' when clicked.</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="deepclone" class="section double-padded">deepClone</h3><div class="section double-padded"><p>Creates a deep clone of an object.</p><p>Use recursion. Use <code>Object.assign()</code> and an empty object (<code>{}</code>) to create a shallow clone of the original. Use <code>Object.keys()</code> and <code>Array.forEach()</code> to determine which key-value pairs need to be deep cloned.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">deepClone</span> <span class="token operator">=</span> obj <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> clone <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">({},</span> obj<span class="token punctuation">);</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>clone<span class="token punctuation">).</span><span class="token function">forEach</span><span class="token punctuation">(</span>
key <span class="token operator">=></span> <span class="token punctuation">(</span>clone<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">?</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]) :</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">])
);</span>
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">(</span>clone<span class="token punctuation">.</span>length <span class="token operator">=</span> obj<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span>clone<span class="token punctuation">) :</span> clone<span class="token punctuation">;
};</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> obj<span class="token punctuation">: {</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">} };</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>a<span class="token punctuation">);</span> <span class="token comment">// a !== b, a.obj !== b.obj</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="defaults" class="section double-padded">defaults</h3><div class="section double-padded"><p>Assigns default values for all properties in an object that are <code>undefined</code>.</p><p>Use <code>Object.assign()</code> to create a new empty object and copy the original one to maintain key order, use <code>Array.reverse()</code> and the spread operator <code>...</code> to combine the default values from left to right, finally use <code>obj</code> again to overwrite properties that originally had a value.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">defaults</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token operator">...</span>defs<span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">({},</span> obj<span class="token punctuation">,</span> <span class="token operator">...</span>defs<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(),</span> obj<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">defaults</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}, {</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}, {</span> b<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}, {</span> a<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">});</span> <span class="token comment">// { a: 1, b: 2 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="equals" class="section double-padded">equals<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Performs a deep comparison between two values to determine if they are equivalent.</p><p>Check if the two values are identical, if they are both <code>Date</code> objects with the same time, using <code>Date.getTime()</code> or if they are both non-object values with an equivalent value (strict comparison). Check if only one value is <code>null</code> or <code>undefined</code> or if their prototypes differ. If none of the above conditions are met, use <code>Object.keys()</code> to check if both values have the same number of keys, then use <code>Array.every()</code> to check if every key in the first value exists in the second one and if they are equivalent by calling this method recursively.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">equals</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> b<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token keyword">instanceof</span> <span class="token class-name">Date</span> <span class="token operator">&amp;&amp;</span> b <span class="token keyword">instanceof</span> <span class="token class-name">Date</span><span class="token punctuation">)</span> <span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">()</span> <span class="token operator">===</span> b<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">();</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>a <span class="token operator">|| !</span>b <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> a <span class="token operator">!==</span> <span class="token string">'object'</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> b <span class="token operator">!==</span> <span class="token string">'object'</span><span class="token punctuation">))</span> <span class="token keyword">return</span> a <span class="token operator">===</span> b<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">||</span> a <span class="token operator">===</span> undefined <span class="token operator">||</span> b <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">||</span> b <span class="token operator">===</span> undefined<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a<span class="token punctuation">.</span>prototype <span class="token operator">!==</span> b<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>a<span class="token punctuation">);</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>keys<span class="token punctuation">.</span>length <span class="token operator">!==</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>b<span class="token punctuation">).</span>length<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> keys<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>k <span class="token operator">=></span> <span class="token function">equals</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>k<span class="token punctuation">],</span> b<span class="token punctuation">[</span>k<span class="token punctuation">]));
};</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">equals</span><span class="token punctuation">({</span> a<span class="token punctuation">: [</span><span class="token number">2</span><span class="token punctuation">, {</span> e<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}],</span> b<span class="token punctuation">: [</span><span class="token number">4</span><span class="token punctuation">],</span> c<span class="token punctuation">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}, {</span> a<span class="token punctuation">: [</span><span class="token number">2</span><span class="token punctuation">, {</span> e<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}],</span> b<span class="token punctuation">: [</span><span class="token number">4</span><span class="token punctuation">],</span> c<span class="token punctuation">:</span> <span class="token string">'foo'</span> <span class="token punctuation">});</span> <span class="token comment">// true</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="findkey" class="section double-padded">findKey</h3><div class="section double-padded"><p>Returns the first key that satisfies the provided testing function. Otherwise <code>undefined</code> is returned.</p><p>Use <code>Object.keys(obj)</code> to get all the properties of the object, <code>Array.find()</code> to test the provided function for each key-value pair. The callback receives three arguments - the value, the key and the object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">findKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">find</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> key<span class="token punctuation">,</span> obj<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">findKey</span><span class="token punctuation">(
{</span>
barney<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">36</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">},</span>
fred<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">},</span>
pebbles<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}
},</span>
o <span class="token operator">=></span> o<span class="token punctuation">[</span><span class="token string">'active'</span><span class="token punctuation">]
);</span> <span class="token comment">// 'barney'</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="findlastkey" class="section double-padded">findLastKey</h3><div class="section double-padded"><p>Returns the last key that satisfies the provided testing function. Otherwise <code>undefined</code> is returned.</p><p>Use <code>Object.keys(obj)</code> to get all the properties of the object, <code>Array.reverse()</code> to reverse their order and <code>Array.find()</code> to test the provided function for each key-value pair. The callback receives three arguments - the value, the key and the object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">findLastKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
.</span><span class="token function">reverse</span><span class="token punctuation">()
.</span><span class="token function">find</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> key<span class="token punctuation">,</span> obj<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">findLastKey</span><span class="token punctuation">(
{</span>
barney<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">36</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">},</span>
fred<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">},</span>
pebbles<span class="token punctuation">: {</span> age<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}
},</span>
o <span class="token operator">=></span> o<span class="token punctuation">[</span><span class="token string">'active'</span><span class="token punctuation">]
);</span> <span class="token comment">// 'pebbles'</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="flattenobject" class="section double-padded">flattenObject</h3><div class="section double-padded"><p>Flatten an object with the paths for keys.</p><p>Use recursion. Use <code>Object.keys(obj)</code> combined with <code>Array.reduce()</code> to convert every leaf node to a flattened path node. If the value of a key is an object, the function calls itself with the appropriate <code>prefix</code> to create the path using <code>Object.assign()</code>. Otherwise, it adds the appropriate prefixed key-value pair to the accumulator object. You should always omit the second argument, <code>prefix</code>, unless you want every key to have a prefix.</p><pre class="language-js"><span class="token keyword">const</span> flattenObject <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> prefix <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> pre <span class="token operator">=</span> prefix<span class="token punctuation">.</span>length <span class="token operator">?</span> prefix <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span> <span class="token function">flattenObject</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> pre <span class="token operator">+</span> k<span class="token punctuation">));</span>
<span class="token keyword">else</span> acc<span class="token punctuation">[</span>pre <span class="token operator">+</span> k<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">];</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">flattenObject</span><span class="token punctuation">({</span> a<span class="token punctuation">: {</span> b<span class="token punctuation">: {</span> c<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">} },</span> d<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">});</span> <span class="token comment">// { 'a.b.c': 1, d: 1 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="forown" class="section double-padded">forOwn</h3><div class="section double-padded"><p>Iterates over all own properties of an object, running a callback for each one.</p><p>Use <code>Object.keys(obj)</code> to get all the properties of the object, <code>Array.forEach()</code> to run the provided function for each key-value pair. The callback receives three arguments - the value, the key and the object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">forOwn</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> key<span class="token punctuation">,</span> obj<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">forOwn</span><span class="token punctuation">({</span> foo<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> a<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},</span> v <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span> <span class="token comment">// 'bar', 1</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="forownright" class="section double-padded">forOwnRight</h3><div class="section double-padded"><p>Iterates over all own properties of an object in reverse, running a callback for each one.</p><p>Use <code>Object.keys(obj)</code> to get all the properties of the object, <code>Array.reverse()</code> to reverse their order and <code>Array.forEach()</code> to run the provided function for each key-value pair. The callback receives three arguments - the value, the key and the object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">forOwnRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
.</span><span class="token function">reverse</span><span class="token punctuation">()
.</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> key<span class="token punctuation">,</span> obj<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">forOwnRight</span><span class="token punctuation">({</span> foo<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> a<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},</span> v <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span> <span class="token comment">// 1, 'bar'</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="functions" class="section double-padded">functions</h3><div class="section double-padded"><p>Returns an array of function property names from own (and optionally inherited) enumerable properties of an object.</p><p>Use <code>Object.keys(obj)</code> to iterate over the object's own properties. If <code>inherited</code> is <code>true</code>, use <code>Object.get.PrototypeOf(obj)</code> to also get the object's inherited properties. Use <code>Array.filter()</code> to keep only those properties that are functions. Omit the second argument, <code>inherited</code>, to not include inherited properties by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">functions</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> inherited <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span>
<span class="token punctuation">(</span>inherited
<span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">...</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">),</span> <span class="token operator">...</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>obj<span class="token punctuation">))]
:</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
).</span><span class="token function">filter</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token keyword">typeof</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'function'</span><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">Foo</span><span class="token punctuation">() {</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">a</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">b</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token number">2</span><span class="token punctuation">;
}</span>
Foo<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">c</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token function">functions</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">());</span> <span class="token comment">// ['a', 'b']</span>
<span class="token function">functions</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">(),</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// ['a', 'b', 'c']</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="get" class="section double-padded">get</h3><div class="section double-padded"><p>Retrieve a set of properties indicated by the given selectors from an object.</p><p>Use <code>Array.map()</code> for each selector, <code>String.replace()</code> to replace square brackets with dots, <code>String.split('.')</code> to split each selector, <code>Array.filter()</code> to remove empty values and <code>Array.reduce()</code> to get the value indicated by it.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">from</span><span class="token punctuation">,</span> <span class="token operator">...</span>selectors<span class="token punctuation">)</span> <span class="token operator">=></span>
<span class="token punctuation">[</span><span class="token operator">...</span>selectors<span class="token punctuation">].</span><span class="token function">map</span><span class="token punctuation">(</span>s <span class="token operator">=></span>
s
<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\[([^\[\]]*)\]/g</span><span class="token punctuation">,</span> <span class="token string">'.$1.'</span><span class="token punctuation">)
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)
.</span><span class="token function">filter</span><span class="token punctuation">(</span>t <span class="token operator">=></span> t <span class="token operator">!==</span> <span class="token string">''</span><span class="token punctuation">)
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>prev<span class="token punctuation">,</span> cur<span class="token punctuation">)</span> <span class="token operator">=></span> prev <span class="token operator">&amp;&amp;</span> prev<span class="token punctuation">[</span>cur<span class="token punctuation">],</span> <span class="token keyword">from</span><span class="token punctuation">)
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> selector<span class="token punctuation">: {</span> to<span class="token punctuation">: {</span> val<span class="token punctuation">:</span> <span class="token string">'val to select'</span> <span class="token punctuation">} },</span> target<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> a<span class="token punctuation">:</span> <span class="token string">'test'</span> <span class="token punctuation">}] };</span>
<span class="token keyword">get</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'selector.to.val'</span><span class="token punctuation">,</span> <span class="token string">'target[0]'</span><span class="token punctuation">,</span> <span class="token string">'target[2].a'</span><span class="token punctuation">);</span> <span class="token comment">// ['val to select', 1, 'test']</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="invertkeyvalues" class="section double-padded">invertKeyValues</h3><div class="section double-padded"><p>Inverts the key-value pairs of an object, without mutating it. The corresponding inverted value of each inverted key is an array of keys responsible for generating the inverted value. If a function is supplied, it is applied to each inverted key.</p><p>Use <code>Object.keys()</code> and <code>Array.reduce()</code> to invert the key-value pairs of an object and apply the function provided (if any). Omit the second argument, <code>fn</code>, to get the inverted keys without applying a function to them.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">invertKeyValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> fn <span class="token operator">?</span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]) :</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">];</span>
acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">=</span> acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[];</span>
acc<span class="token punctuation">[</span>val<span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">);</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">invertKeyValues</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">});</span> <span class="token comment">// { 1: [ 'a', 'c' ], 2: [ 'b' ] }</span>
<span class="token function">invertKeyValues</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},</span> value <span class="token operator">=></span> <span class="token string">'group'</span> <span class="token operator">+</span> value<span class="token punctuation">);</span> <span class="token comment">// { group1: [ 'a', 'c' ], group2: [ 'b' ] }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="lowercasekeys" class="section double-padded">lowercaseKeys</h3><div class="section double-padded"><p>Creates a new object from the specified object, where all the keys are in lowercase.</p><p>Use <code>Object.keys()</code> and <code>Array.reduce()</code> to create a new object from the specified object. Convert each key in the original object to lowercase, using <code>String.toLowerCase()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">lowercaseKeys</span> <span class="token operator">=</span> obj <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
acc<span class="token punctuation">[</span>key<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">()]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">];</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> myObj <span class="token operator">=</span> <span class="token punctuation">{</span> Name<span class="token punctuation">:</span> <span class="token string">'Adam'</span><span class="token punctuation">,</span> sUrnAME<span class="token punctuation">:</span> <span class="token string">'Smith'</span> <span class="token punctuation">};</span>
<span class="token keyword">const</span> myObjLower <span class="token operator">=</span> <span class="token function">lowercaseKeys</span><span class="token punctuation">(</span>myObj<span class="token punctuation">);</span> <span class="token comment">// {name: 'Adam', surname: 'Smith'};</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="mapkeys" class="section double-padded">mapKeys</h3><div class="section double-padded"><p>Creates an object with keys generated by running the provided function for each key and the same values as the provided object.</p><p>Use <code>Object.keys(obj)</code> to iterate over the object's keys. Use <code>Array.reduce()</code> to create a new object with the same values and mapped keys using <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">mapKeys</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
acc<span class="token punctuation">[</span><span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">,</span> obj<span class="token punctuation">)]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">];</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">mapKeys</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}, (</span>val<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> key <span class="token operator">+</span> val<span class="token punctuation">);</span> <span class="token comment">// { a1: 1, b2: 2 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="mapvalues" class="section double-padded">mapValues</h3><div class="section double-padded"><p>Creates an object with the same keys as the provided object and values generated by running the provided function for each value.</p><p>Use <code>Object.keys(obj)</code> to iterate over the object's keys. Use <code>Array.reduce()</code> to create a new object with the same keys and mapped values using <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">mapValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
acc<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">,</span> obj<span class="token punctuation">);</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">{</span>
fred<span class="token punctuation">: {</span> user<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">},</span>
pebbles<span class="token punctuation">: {</span> user<span class="token punctuation">:</span> <span class="token string">'pebbles'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}
};</span>
<span class="token function">mapValues</span><span class="token punctuation">(</span>users<span class="token punctuation">,</span> u <span class="token operator">=></span> u<span class="token punctuation">.</span>age<span class="token punctuation">);</span> <span class="token comment">// { fred: 40, pebbles: 1 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="matches" class="section double-padded">matches</h3><div class="section double-padded"><p>Compares two objects to determine if the first one contains equivalent property values to the second one.</p><p>Use <code>Object.keys(source)</code> to get all the keys of the second object, then <code>Array.every()</code>, <code>Object.hasOwnProperty()</code> and strict comparison to determine if all keys exist in the first object and have the same values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">matches</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> source<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>source<span class="token punctuation">).</span><span class="token function">every</span><span class="token punctuation">(</span>key <span class="token operator">=></span> obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> source<span class="token punctuation">[</span>key<span class="token punctuation">]);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">matches</span><span class="token punctuation">({</span> age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> hair<span class="token punctuation">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> beard<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}, {</span> hair<span class="token punctuation">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> beard<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">});</span> <span class="token comment">// true</span>
<span class="token function">matches</span><span class="token punctuation">({</span> hair<span class="token punctuation">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> beard<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}, {</span> age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> hair<span class="token punctuation">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> beard<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">});</span> <span class="token comment">// false</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="matcheswith" class="section double-padded">matchesWith</h3><div class="section double-padded"><p>Compares two objects to determine if the first one contains equivalent property values to the second one, based on a provided function.</p><p>Use <code>Object.keys(source)</code> to get all the keys of the second object, then <code>Array.every()</code>, <code>Object.hasOwnProperty()</code> and the provided function to determine if all keys exist in the first object and have equivalent values. If no function is provided, the values will be compared using the equality operator.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">matchesWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> source<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>source<span class="token punctuation">).</span><span class="token function">every</span><span class="token punctuation">(</span>
key <span class="token operator">=></span>
obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> fn
<span class="token operator">?</span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> source<span class="token punctuation">[</span>key<span class="token punctuation">],</span> key<span class="token punctuation">,</span> obj<span class="token punctuation">,</span> source<span class="token punctuation">)
:</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">==</span> source<span class="token punctuation">[</span>key<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">isGreeting</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token regex">/^h(?:i|ello)$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>val<span class="token punctuation">);</span>
<span class="token function">matchesWith</span><span class="token punctuation">(
{</span> greeting<span class="token punctuation">:</span> <span class="token string">'hello'</span> <span class="token punctuation">},
{</span> greeting<span class="token punctuation">:</span> <span class="token string">'hi'</span> <span class="token punctuation">},
(</span>oV<span class="token punctuation">,</span> sV<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">isGreeting</span><span class="token punctuation">(</span>oV<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token function">isGreeting</span><span class="token punctuation">(</span>sV<span class="token punctuation">)
);</span> <span class="token comment">// true</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="merge" class="section double-padded">merge</h3><div class="section double-padded"><p>Creates a new object from the combination of two or more objects.</p><p>Use <code>Array.reduce()</code> combined with <code>Object.keys(obj)</code> to iterate over all objects and keys. Use <code>hasOwnProperty()</code> and <code>Array.concat()</code> to append values for keys existing in multiple objects.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">merge</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>objs<span class="token punctuation">)</span> <span class="token operator">=></span>
<span class="token punctuation">[</span><span class="token operator">...</span>objs<span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">(
(</span>acc<span class="token punctuation">,</span> obj<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
acc<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> acc<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>k<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">[].</span><span class="token function">concat</span><span class="token punctuation">(</span>acc<span class="token punctuation">[</span>k<span class="token punctuation">]).</span><span class="token function">concat</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">]) :</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">];</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {}),
{}
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> object <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token punctuation">: [{</span> x<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}, {</span> y<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}],</span>
b<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">};</span>
<span class="token keyword">const</span> other <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token punctuation">: {</span> z<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">},</span>
b<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>
c<span class="token punctuation">:</span> <span class="token string">'foo'</span>
<span class="token punctuation">};</span>
<span class="token function">merge</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> other<span class="token punctuation">);</span> <span class="token comment">// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="nest" class="section double-padded">nest</h3><div class="section double-padded"><p>Given a flat array of objects linked to one another, it will nest them recursively. Useful for nesting comments, such as the ones on reddit.com.</p><p>Use recursion. Use <code>Array.filter()</code> to filter the items where the <code>id</code> matches the <code>link</code>, then <code>Array.map()</code> to map each one to a new object that has a <code>children</code> property which recursively nests the items based on which ones are children of the current item. Omit the second argument, <code>id</code>, to default to <code>null</code> which indicates the object is not linked to another one (i.e. it is a top level object). Omit the third argument, <code>link</code>, to use <code>'parent_id'</code> as the default property which links the object to another one by its <code>id</code>.</p><pre class="language-js"><span class="token keyword">const</span> nest <span class="token operator">=</span> <span class="token punctuation">(</span>items<span class="token punctuation">,</span> id <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> link <span class="token operator">=</span> <span class="token string">'parent_id'</span><span class="token punctuation">)</span> <span class="token operator">=></span>
items
<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item<span class="token punctuation">[</span>link<span class="token punctuation">]</span> <span class="token operator">===</span> id<span class="token punctuation">)
.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=></span> <span class="token punctuation">({</span> <span class="token operator">...</span>item<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token function">nest</span><span class="token punctuation">(</span>items<span class="token punctuation">,</span> item<span class="token punctuation">.</span>id<span class="token punctuation">) }));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token comment">// One top level comment</span>
<span class="token keyword">const</span> comments <span class="token operator">=</span> <span class="token punctuation">[
{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> parent_id<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">},
{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> parent_id<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},
{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> parent_id<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},
{</span> id<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> parent_id<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">},
{</span> id<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> parent_id<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}
];</span>
<span class="token keyword">const</span> nestedComments <span class="token operator">=</span> <span class="token function">nest</span><span class="token punctuation">(</span>comments<span class="token punctuation">);</span> <span class="token comment">// [{ id: 1, parent_id: null, children: [...] }]</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="objectfrompairs" class="section double-padded">objectFromPairs</h3><div class="section double-padded"><p>Creates an object from the given key-value pairs.</p><p>Use <code>Array.reduce()</code> to create and combine key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">objectFromPairs</span> <span class="token operator">=</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> <span class="token punctuation">((</span>a<span class="token punctuation">[</span>v<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]]</span> <span class="token operator">=</span> v<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]),</span> a<span class="token punctuation">), {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">objectFromPairs</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">], [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]]);</span> <span class="token comment">// {a: 1, b: 2}</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="objecttopairs" class="section double-padded">objectToPairs</h3><div class="section double-padded"><p>Creates an array of key-value pair arrays from an object.</p><p>Use <code>Object.keys()</code> and <code>Array.map()</code> to iterate over the object's keys and produce an array with key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">objectToPairs</span> <span class="token operator">=</span> obj <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">map</span><span class="token punctuation">(</span>k <span class="token operator">=></span> <span class="token punctuation">[</span>k<span class="token punctuation">,</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">]]);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">objectToPairs</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">});</span> <span class="token comment">// [['a',1],['b',2]]</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="omit" class="section double-padded">omit</h3><div class="section double-padded"><p>Omits the key-value pairs corresponding to the given keys from an object.</p><p>Use <code>Object.keys(obj)</code>, <code>Array.filter()</code> and <code>Array.includes()</code> to remove the provided keys. Use <code>Array.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">omit</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
.</span><span class="token function">filter</span><span class="token punctuation">(</span>k <span class="token operator">=> !</span>arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>k<span class="token punctuation">))
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]),</span> acc<span class="token punctuation">), {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">omit</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}, [</span><span class="token string">'b'</span><span class="token punctuation">]);</span> <span class="token comment">// { 'a': 1, 'c': 3 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="omitby" class="section double-padded">omitBy</h3><div class="section double-padded"><p>Creates an object composed of the properties the given function returns falsey for. The function is invoked with two arguments: (value, key).</p><p>Use <code>Object.keys(obj)</code> and <code>Array.filter()</code>to remove the keys for which <code>fn</code> returns a truthy value. Use <code>Array.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">omitBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
.</span><span class="token function">filter</span><span class="token punctuation">(</span>k <span class="token operator">=> !</span><span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">))
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]),</span> acc<span class="token punctuation">), {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">omitBy</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">},</span> x <span class="token operator">=></span> <span class="token keyword">typeof</span> x <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">);</span> <span class="token comment">// { b: '2' }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="orderby" class="section double-padded">orderBy</h3><div class="section double-padded"><p>Returns a sorted array of objects ordered by properties and orders.</p><p>Uses <code>Array.sort()</code>, <code>Array.reduce()</code> on the <code>props</code> array with a default value of <code>0</code>, use array destructuring to swap the properties position depending on the order passed. If no <code>orders</code> array is passed it sort by <code>'asc'</code> by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">orderBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> props<span class="token punctuation">,</span> orders<span class="token punctuation">)</span> <span class="token operator">=></span>
<span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span>
props<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>acc <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 punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">]</span> <span class="token operator">=</span> orders <span class="token operator">&amp;&amp;</span> orders<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'desc'</span> <span class="token operator">?</span> <span class="token punctuation">[</span>b<span class="token punctuation">[</span>prop<span class="token punctuation">],</span> a<span class="token punctuation">[</span>prop<span class="token punctuation">]] : [</span>a<span class="token punctuation">[</span>prop<span class="token punctuation">],</span> b<span class="token punctuation">[</span>prop<span class="token punctuation">]];</span>
acc <span class="token operator">=</span> p1 <span class="token operator">></span> p2 <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> p1 <span class="token operator">&lt;</span> p2 <span class="token operator">? -</span><span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;
}</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
},</span> <span class="token number">0</span><span class="token punctuation">)
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[{</span> name<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">48</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'barney'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">36</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}];</span>
<span class="token function">orderBy</span><span class="token punctuation">(</span>users<span class="token punctuation">, [</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">], [</span><span class="token string">'asc'</span><span class="token punctuation">,</span> <span class="token string">'desc'</span><span class="token punctuation">]);</span> <span class="token comment">// [{name: 'barney', age: 36}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]</span>
<span class="token function">orderBy</span><span class="token punctuation">(</span>users<span class="token punctuation">, [</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">]);</span> <span class="token comment">// [{name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pick" class="section double-padded">pick</h3><div class="section double-padded"><p>Picks the key-value pairs corresponding to the given keys from an object.</p><p>Use <code>Array.reduce()</code> to convert the filtered/picked keys back to an object with the corresponding key-value pairs if the key exists in the object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=></span>
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> curr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>curr <span class="token keyword">in</span> obj <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>acc<span class="token punctuation">[</span>curr<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>curr<span class="token punctuation">]),</span> acc<span class="token punctuation">), {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">pick</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}, [</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]);</span> <span class="token comment">// { 'a': 1, 'c': 3 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pickby" class="section double-padded">pickBy</h3><div class="section double-padded"><p>Creates an object composed of the properties the given function returns truthy for. The function is invoked with two arguments: (value, key).</p><p>Use <code>Object.keys(obj)</code> and <code>Array.filter()</code>to remove the keys for which <code>fn</code> returns a falsey value. Use <code>Array.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pickBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
.</span><span class="token function">filter</span><span class="token punctuation">(</span>k <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">))
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]),</span> acc<span class="token punctuation">), {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">pickBy</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">},</span> x <span class="token operator">=></span> <span class="token keyword">typeof</span> x <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">);</span> <span class="token comment">// { 'a': 1, 'c': 3 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="renamekeys" class="section double-padded">renameKeys</h3><div class="section double-padded"><p>Replaces the names of multiple object keys with the values provided.</p><p>Use <code>Object.keys()</code> in combination with <code>Array.reduce()</code> and the spread operator (<code>...</code>) to get the object's keys and rename them according to <code>keysMap</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">renameKeys</span> <span class="token operator">=</span> <span class="token punctuation">(</span>keysMap<span class="token punctuation">,</span> obj<span class="token punctuation">)</span> <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">(
(</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">({</span>
<span class="token operator">...</span>acc<span class="token punctuation">,</span>
<span class="token operator">...</span><span class="token punctuation">{ [</span>keysMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">||</span> key<span class="token punctuation">]:</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">] }
}),
{}
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Bobo'</span><span class="token punctuation">,</span> job<span class="token punctuation">:</span> <span class="token string">'Front-End Master'</span><span class="token punctuation">,</span> shoeSize<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">};</span>
<span class="token function">renameKeys</span><span class="token punctuation">({</span> name<span class="token punctuation">:</span> <span class="token string">'firstName'</span><span class="token punctuation">,</span> job<span class="token punctuation">:</span> <span class="token string">'passion'</span> <span class="token punctuation">},</span> obj<span class="token punctuation">);</span> <span class="token comment">// { firstName: 'Bobo', passion: 'Front-End Master', shoeSize: 100 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="shallowclone" class="section double-padded">shallowClone</h3><div class="section double-padded"><p>Creates a shallow clone of an object.</p><p>Use <code>Object.assign()</code> and an empty object (<code>{}</code>) to create a shallow clone of the original.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">shallowClone</span> <span class="token operator">=</span> obj <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">({},</span> obj<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">};</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">shallowClone</span><span class="token punctuation">(</span>a<span class="token punctuation">);</span> <span class="token comment">// a !== b</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="size" class="section double-padded">size</h3><div class="section double-padded"><p>Get size of arrays, objects or strings.</p><p>Get type of <code>val</code> (<code>array</code>, <code>object</code> or <code>string</code>). Use <code>length</code> property for arrays. Use <code>length</code> or <code>size</code> value if available or number of keys for objects. Use <code>size</code> of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob"><code>Blob</code> object</a> created from <code>val</code> for strings.</p><p>Split strings into array of characters with <code>split('')</code> and return its length.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">size</span> <span class="token operator">=</span> val <span class="token operator">=></span>
Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
<span class="token operator">?</span> val<span class="token punctuation">.</span>length
<span class="token punctuation">:</span> val <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'object'</span>
<span class="token operator">?</span> val<span class="token punctuation">.</span>size <span class="token operator">||</span> val<span class="token punctuation">.</span>length <span class="token operator">||</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>val<span class="token punctuation">).</span>length
<span class="token punctuation">:</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'string'</span>
<span class="token operator">?</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">([</span>val<span class="token punctuation">]).</span>size
<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">size</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// 5</span>
<span class="token function">size</span><span class="token punctuation">(</span><span class="token string">'size'</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
<span class="token function">size</span><span class="token punctuation">({</span> one<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> two<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> three<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">});</span> <span class="token comment">// 3</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="transform" class="section double-padded">transform</h3><div class="section double-padded"><p>Applies a function against an accumulator and each key in the object (from left to right).</p><p>Use <code>Object.keys(obj)</code> to iterate over each key in the object, <code>Array.reduce()</code> to call the apply the specified function against the given accumulator.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">transform</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> acc<span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">,</span> obj<span class="token punctuation">),</span> acc<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">transform</span><span class="token punctuation">(
{</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">},
(</span>r<span class="token punctuation">,</span> v<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{
(</span>r<span class="token punctuation">[</span>v<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">(</span>r<span class="token punctuation">[</span>v<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[])).</span><span class="token function">push</span><span class="token punctuation">(</span>k<span class="token punctuation">);</span>
<span class="token keyword">return</span> r<span class="token punctuation">;
},
{}
);</span> <span class="token comment">// { '1': ['a', 'c'], '2': ['b'] }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="truthcheckcollection" class="section double-padded">truthCheckCollection</h3><div class="section double-padded"><p>Checks if the predicate (second argument) is truthy on all elements of a collection (first argument).</p><p>Use <code>Array.every()</code> to check if each passed object has the specified property and if it returns a truthy value.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">truthCheckCollection</span> <span class="token operator">=</span> <span class="token punctuation">(</span>collection<span class="token punctuation">,</span> pre<span class="token punctuation">)</span> <span class="token operator">=></span> collection<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>obj <span class="token operator">=></span> obj<span class="token punctuation">[</span>pre<span class="token punctuation">]);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truthCheckCollection</span><span class="token punctuation">([{</span> user<span class="token punctuation">:</span> <span class="token string">'Tinky-Winky'</span><span class="token punctuation">,</span> sex<span class="token punctuation">:</span> <span class="token string">'male'</span> <span class="token punctuation">}, {</span> user<span class="token punctuation">:</span> <span class="token string">'Dipsy'</span><span class="token punctuation">,</span> sex<span class="token punctuation">:</span> <span class="token string">'male'</span> <span class="token punctuation">}],</span> <span class="token string">'sex'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unflattenobject" class="section double-padded">unflattenObject<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Unflatten an object with the paths for keys.</p><p>Use <code>Object.keys(obj)</code> combined with <code>Array.reduce()</code> to convert flattened path node to a leaf node. If the value of a key contains a dot delimiter (<code>.</code>), use <code>Array.split('.')</code>, string transformations and <code>JSON.parse()</code> to create an object, then <code>Object.assign()</code> to create the leaf node. Otherwise, add the appropriate key-value pair to the accumulator object.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unflattenObject</span> <span class="token operator">=</span> obj <span class="token operator">=></span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>k<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span> <span class="token operator">!== -</span><span class="token number">1</span><span class="token punctuation">) {</span>
<span class="token keyword">const</span> keys <span class="token operator">=</span> k<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">);</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>
acc<span class="token punctuation">,</span>
<span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>
<span class="token string">'{'</span> <span class="token operator">+</span>
keys<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>i <span class="token operator">!==</span> keys<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token template-string"><span class="token string">`"</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>v<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">":{`</span></span> <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`"</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>v<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">":`</span></span><span class="token punctuation">)).</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span>
obj<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">+</span>
<span class="token string">'}'</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span>keys<span class="token punctuation">.</span>length<span class="token punctuation">)
)
);
}</span> <span class="token keyword">else</span> acc<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">];</span>
<span class="token keyword">return</span> acc<span class="token punctuation">;
}, {});</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unflattenObject</span><span class="token punctuation">({</span> <span class="token string">'a.b.c'</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">});</span> <span class="token comment">// { a: { b: { c: 1 } }, d: 1 }</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><button class="scroll-to-top">&uarr;</button><footer><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html>
Reference in New Issue View Git Blame Copy Permalink