442 lines
155 KiB
HTML
442 lines
155 KiB
HTML
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="./style.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) => {
|
|
if(node.value.toLowerCase().trim() === ''){
|
|
document.querySelector('nav').querySelectorAll('li').forEach(x => x.style.display = '');
|
|
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
|
|
return;
|
|
}
|
|
let matchingTags = [];
|
|
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
|
|
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
|
if(data.includes(true)){
|
|
x.style.display = '';
|
|
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
|
|
}
|
|
else x.style.display = 'none';
|
|
});
|
|
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
|
|
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
|
|
})
|
|
}
|
|
function scrollToTop(){
|
|
const c = document.querySelector('.card-container').scrollTop;
|
|
if (c > 0) {
|
|
window.requestAnimationFrame(scrollToTop);
|
|
document.querySelector('.card-container').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() {
|
|
if (window.location.href.split('#').length > 1)
|
|
setTimeout(() => document.getElementById(window.location.href.split('#')[1]).scrollIntoView(), 0);
|
|
registerClickListener();
|
|
if(window.innerWidth >= '768')
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === 'Object')[0].offsetTop;
|
|
else
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === 'Object')[0].offsetTop;
|
|
}
|
|
function registerClickListener() {
|
|
document.addEventListener('click', function (event) {
|
|
if ( event.target.classList.contains('collapse') ) {
|
|
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
|
}
|
|
else if (event.target.classList.contains('menu-button')) {
|
|
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
|
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
|
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
|
}
|
|
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
|
|
document.querySelector('nav').classList = '';
|
|
document.querySelector('[type="search"]').classList = '';
|
|
document.querySelector('.menu-button').classList = 'menu-button';
|
|
}
|
|
else if (event.target.classList.contains('social')){
|
|
if (event.target.classList.contains('fb')){
|
|
window.location = "https://www.facebook.com/30secondsofcode";
|
|
}
|
|
else if (event.target.classList.contains('instagram')) {
|
|
window.location = "https://www.instagram.com/30secondsofcode";
|
|
}
|
|
else if (event.target.classList.contains('twitter')) {
|
|
window.location = "https://twitter.com/30secondsofcode";
|
|
}
|
|
}
|
|
else if (event.target.classList.contains('copy-button')) {
|
|
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);
|
|
}
|
|
}, false);
|
|
}</script></head><body onload="loader()" class="card-page"><a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688;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><button class="menu-button"></button><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search"><nav><h4 class="collapse">Adapter</h4><ul><li><a tags="adapter,function,intermediate" href="./adapter#ary">ary</a></li><li><a tags="adapter,function,intermediate" href="./adapter#call">call</a></li><li><a tags="adapter,function,array,intermediate" href="./adapter#collectinto">collectInto</a></li><li><a tags="adapter,function,intermediate" href="./adapter#flip">flip</a></li><li><a tags="adapter,function,intermediate" href="./adapter#over">over</a></li><li><a tags="adapter,function,intermediate" href="./adapter#overargs">overArgs</a></li><li><a tags="adapter,function,promise,intermediate" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a></li><li><a tags="adapter,function,intermediate" href="./adapter#pipefunctions">pipeFunctions</a></li><li><a tags="adapter,function,promise,intermediate" href="./adapter#promisify">promisify</a></li><li><a tags="adapter,function,intermediate" href="./adapter#rearg">rearg</a></li><li><a tags="adapter,intermediate" href="./adapter#spreadover">spreadOver</a></li><li><a tags="adapter,function,intermediate" href="./adapter#unary">unary</a></li></ul><h4 class="collapse">Array</h4><ul><li><a tags="array,function,beginner" href="./index#all">all</a></li><li><a tags="array,function,beginner" href="./index#allequal">allEqual</a></li><li><a tags="array,function,beginner" href="./index#any">any</a></li><li><a tags="array,string,utility,intermediate" href="./index#arraytocsv">arrayToCSV</a></li><li><a tags="array,intermediate" href="./index#bifurcate">bifurcate</a></li><li><a tags="array,function,intermediate" href="./index#bifurcateby">bifurcateBy</a></li><li><a tags="array,intermediate" href="./index#chunk">chunk</a></li><li><a tags="array,beginner" href="./index#compact">compact</a></li><li><a tags="array,object,intermediate" href="./index#countby">countBy</a></li><li><a tags="array,intermediate" href="./index#countoccurrences">countOccurrences</a></li><li><a tags="array,recursion,intermediate" href="./index#deepflatten">deepFlatten</a></li><li><a tags="array,math,beginner" href="./index#difference">difference</a></li><li><a tags="array,function,intermediate" href="./index#differenceby">differenceBy</a></li><li><a tags="array,function,intermediate" href="./index#differencewith">differenceWith</a></li><li><a tags="array,beginner" href="./index#drop">drop</a></li><li><a tags="array,beginner" href="./index#dropright">dropRight</a></li><li><a tags="array,function,intermediate" href="./index#droprightwhile">dropRightWhile</a></li><li><a tags="array,function,intermediate" href="./index#dropwhile">dropWhile</a></li><li><a tags="array,beginner" href="./index#everynth">everyNth</a></li><li><a tags="array,beginner" href="./index#filterfalsy">filterFalsy</a></li><li><a tags="array,beginner" href="./index#filternonunique">filterNonUnique</a></li><li><a tags="array,function,intermediate" href="./index#filternonuniqueby">filterNonUniqueBy</a></li><li><a tags="array,beginner" href="./index#findlast">findLast</a></li><li><a tags="array,function,intermediate" href="./index#findlastindex">findLastIndex</a></li><li><a tags="array,intermediate" href="./index#flatten">flatten</a></li><li><a tags="array,function,intermediate" href="./index#foreachright">forEachRight</a></li><li><a tags="array,object,intermediate" href="./index#groupby">groupBy</a></li><li><a tags="array,beginner" href="./index#head">head</a></li><li><a tags="array,intermediate" href="./index#indexofall">indexOfAll</a></li><li><a tags="array,beginner" href="./index#initial">initial</a></li><li><a tags="array,intermediate" href="./index#initialize2darray">initialize2DArray</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithrange">initializeArrayWithRange</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithrangeright">initializeArrayWithRangeRight</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithvalues">initializeArrayWithValues</a></li><li><a tags="array,recursion,intermediate" href="./index#initializendarray">initializeNDArray</a></li><li><a tags="array,math,intermediate" href="./index#intersection">intersection</a></li><li><a tags="array,function,intermediate" href="./index#intersectionby">intersectionBy</a></li><li><a tags="array,function,intermediate" href="./index#intersectionwith">intersectionWith</a></li><li><a tags="array,intermediate" href="./index#issorted">isSorted</a></li><li><a tags="array,intermediate" href="./index#join">join</a></li><li><a tags="array,string,object,advanced" href="./index#jsontocsv">JSONtoCSV</a></li><li><a tags="array,beginner" href="./index#last">last</a></li><li><a tags="array,string,utility,intermediate" href="./index#longestitem">longestItem</a></li><li><a tags="array,object,advanced" href="./index#mapobject">mapObject</a></li><li><a tags="array,math,beginner" href="./index#maxn">maxN</a></li><li><a tags="array,math,beginner" href="./index#minn">minN</a></li><li><a tags="array,function,beginner" href="./index#none">none</a></li><li><a tags="array,beginner" href="./index#nthelement">nthElement</a></li><li><a tags="array,beginner" href="./index#offset">offset</a></li><li><a tags="array,object,function,intermediate" href="./index#partition">partition</a></li><li><a tags="array,recursion,advanced" href="./index#permutations">permutations</a></li><li><a tags="array,intermediate" href="./index#pull">pull</a></li><li><a tags="array,advanced" href="./index#pullatindex">pullAtIndex</a></li><li><a tags="array,advanced" href="./index#pullatvalue">pullAtValue</a></li><li><a tags="array,function,advanced" href="./index#pullby">pullBy</a></li><li><a tags="array,intermediate" href="./index#reducedfilter">reducedFilter</a></li><li><a tags="array,function,intermediate" href="./index#reducesuccessive">reduceSuccessive</a></li><li><a tags="array,function,intermediate" href="./index#reducewhich">reduceWhich</a></li><li><a tags="array,beginner" href="./index#reject">reject</a></li><li><a tags="array,intermediate" href="./index#remove">remove</a></li><li><a tags="array,random,beginner" href="./index#sample">sample</a></li><li><a tags="array,random,intermediate" href="./index#samplesize">sampleSize</a></li><li><a tags="array,intermediate" href="./index#shank">shank</a></li><li><a tags="array,random,intermediate" href="./index#shuffle">shuffle</a></li><li><a tags="array,math,beginner" href="./index#similarity">similarity</a></li><li><a tags="array,math,intermediate" href="./index#sortedindex">sortedIndex</a></li><li><a tags="array,math,function,intermediate" href="./index#sortedindexby">sortedIndexBy</a></li><li><a tags="array,math,intermediate" href="./index#sortedlastindex">sortedLastIndex</a></li><li><a tags="array,math,function,intermediate" href="./index#sortedlastindexby">sortedLastIndexBy</a></li><li><a tags="array,sort,advanced,intermediate" href="./index#stablesort">stableSort</a></li><li><a tags="array,math,intermediate" href="./index#symmetricdifference">symmetricDifference</a></li><li><a tags="array,function,intermediate" href="./index#symmetricdifferenceby">symmetricDifferenceBy</a></li><li><a tags="array,function,intermediate" href="./index#symmetricdifferencewith">symmetricDifferenceWith</a></li><li><a tags="array,beginner" href="./index#tail">tail</a></li><li><a tags="array,beginner" href="./index#take">take</a></li><li><a tags="array,intermediate" href="./index#takeright">takeRight</a></li><li><a tags="array,function,intermediate" href="./index#takerightwhile">takeRightWhile</a></li><li><a tags="array,function,intermediate" href="./index#takewhile">takeWhile</a></li><li><a tags="array,intermediate" href="./index#tohash">toHash</a></li><li><a tags="array,math,beginner" href="./index#union">union</a></li><li><a tags="array,function,intermediate" href="./index#unionby">unionBy</a></li><li><a tags="array,function,intermediate" href="./index#unionwith">unionWith</a></li><li><a tags="array,beginner" href="./index#uniqueelements">uniqueElements</a></li><li><a tags="array,function,intermediate" href="./index#uniqueelementsby">uniqueElementsBy</a></li><li><a tags="array,function,intermediate" href="./index#uniqueelementsbyright">uniqueElementsByRight</a></li><li><a tags="array,math,intermediate" href="./index#uniquesymmetricdifference">uniqueSymmetricDifference</a></li><li><a tags="array,intermediate" href="./index#unzip">unzip</a></li><li><a tags="array,function,advanced" href="./index#unzipwith">unzipWith</a></li><li><a tags="array,beginner" href="./index#without">without</a></li><li><a tags="array,math,intermediate" href="./index#xprod">xProd</a></li><li><a tags="array,intermediate" href="./index#zip">zip</a></li><li><a tags="array,object,intermediate" href="./index#zipobject">zipObject</a></li><li><a tags="array,function,advanced" href="./index#zipwith">zipWith</a></li></ul><h4 class="collapse">Browser</h4><ul><li><a tags="browser,array,intermediate" href="./browser#arraytohtmllist">arrayToHtmlList</a></li><li><a tags="browser,intermediate" href="./browser#bottomvisible">bottomVisible</a></li><li><a tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a></li><li><a tags="browser,advanced" href="./browser#counter">counter</a></li><li><a tags="browser,utility,beginner" href="./browser#createelement">createElement</a></li><li><a tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a></li><li><a tags="browser,url,beginner" href="./browser#currenturl">currentURL</a></li><li><a tags="browser,intermediate" href="./browser#detectdevicetype">detectDeviceType</a></li><li><a tags="browser,intermediate" href="./browser#elementcontains">elementContains</a></li><li><a tags="browser,advanced" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a></li><li><a tags="browser,object,intermediate" href="./browser#formtoobject">formToObject</a></li><li><a tags="browser,beginner" href="./browser#getimages">getImages</a></li><li><a tags="browser,intermediate" href="./browser#getscrollposition">getScrollPosition</a></li><li><a tags="browser,css,beginner" href="./browser#getstyle">getStyle</a></li><li><a tags="browser,css,beginner" href="./browser#hasclass">hasClass</a></li><li><a tags="browser,utility,advanced,promise,advanced" href="./browser#hashbrowser">hashBrowser</a></li><li><a tags="browser,css,beginner" href="./browser#hide">hide</a></li><li><a tags="browser,url,intermediate" href="./browser#httpsredirect">httpsRedirect</a></li><li><a tags="browser,beginner" href="./browser#insertafter">insertAfter</a></li><li><a tags="browser,beginner" href="./browser#insertbefore">insertBefore</a></li><li><a tags="browser,beginner" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a></li><li><a tags="browser,array,beginner" href="./browser#nodelisttoarray">nodeListToArray</a></li><li><a tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a></li><li><a tags="browser,event,intermediate" href="./browser#off">off</a></li><li><a tags="browser,event,intermediate" href="./browser#on">on</a></li><li><a tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a></li><li><a tags="browser,utility,intermediate" href="./browser#prefix">prefix</a></li><li><a tags="browser,utility,intermediate" href="./browser#recordanimationframes">recordAnimationFrames</a></li><li><a tags="browser,url,beginner" href="./browser#redirect">redirect</a></li><li><a tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a></li><li><a tags="browser,intermediate" href="./browser#scrolltotop">scrollToTop</a></li><li><a tags="browser,string,intermediate" href="./browser#serializeform">serializeForm</a></li><li><a tags="browser,beginner" href="./browser#setstyle">setStyle</a></li><li><a tags="browser,css,beginner" href="./browser#show">show</a></li><li><a tags="browser,css,intermediate" href="./browser#smoothscroll">smoothScroll</a></li><li><a tags="browser,beginner" href="./browser#toggleclass">toggleClass</a></li><li><a tags="browser,event,intermediate" href="./browser#triggerevent">triggerEvent</a></li><li><a tags="browser,utility,random,intermediate" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a></li></ul><h4 class="collapse">Date</h4><ul><li><a tags="date,beginner" href="./date#dayofyear">dayOfYear</a></li><li><a tags="date,math,string,utility,intermediate" href="./date#formatduration">formatDuration</a></li><li><a tags="date,intermediate" href="./date#getcolontimefromdate">getColonTimeFromDate</a></li><li><a tags="date,intermediate" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a></li><li><a tags="date,beginner" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a></li><li><a tags="date,utility,beginner" href="./date#isafterdate">isAfterDate</a></li><li><a tags="date,utility,beginner" href="./date#isbeforedate">isBeforeDate</a></li><li><a tags="date,utility,beginner" href="./date#issamedate">isSameDate</a></li><li><a tags="date,beginner" href="./date#isweekday">isWeekday</a></li><li><a tags="date,beginner" href="./date#isweekend">isWeekend</a></li><li><a tags="date,math,beginner" href="./date#maxdate">maxDate</a></li><li><a tags="date,math,beginner" href="./date#mindate">minDate</a></li><li><a tags="date,intermediate" href="./date#tomorrow">tomorrow</a></li><li><a tags="date,intermediate" href="./date#yesterday">yesterday</a></li></ul><h4 class="collapse">Function</h4><ul><li><a tags="function,intermediate" href="./function#attempt">attempt</a></li><li><a tags="function,object,intermediate" href="./function#bind">bind</a></li><li><a tags="function,object,intermediate" href="./function#bindkey">bindKey</a></li><li><a tags="function,intermediate" href="./function#chainasync">chainAsync</a></li><li><a tags="function,object,utility,beginner" href="./function#checkprop">checkProp</a></li><li><a tags="function,intermediate" href="./function#compose">compose</a></li><li><a tags="function,intermediate" href="./function#composeright">composeRight</a></li><li><a tags="function,intermediate" href="./function#converge">converge</a></li><li><a tags="function,recursion,intermediate" href="./function#curry">curry</a></li><li><a tags="function,intermediate" href="./function#debounce">debounce</a></li><li><a tags="function,intermediate" href="./function#defer">defer</a></li><li><a tags="function,intermediate" href="./function#delay">delay</a></li><li><a tags="function,utility,beginner" href="./function#functionname">functionName</a></li><li><a tags="function,intermediate" href="./function#hz">hz</a></li><li><a tags="function,advanced" href="./function#memoize">memoize</a></li><li><a tags="function,beginner" href="./function#negate">negate</a></li><li><a tags="function,intermediate" href="./function#once">once</a></li><li><a tags="function,intermediate" href="./function#partial">partial</a></li><li><a tags="function,intermediate" href="./function#partialright">partialRight</a></li><li><a tags="function,promise,intermediate" href="./function#runpromisesinseries">runPromisesInSeries</a></li><li><a tags="function,promise,intermediate" href="./function#sleep">sleep</a></li><li><a tags="function,advanced" href="./function#throttle">throttle</a></li><li><a tags="function,intermediate" href="./function#times">times</a></li><li><a tags="function,intermediate" href="./function#uncurry">uncurry</a></li><li><a tags="function,array,intermediate" href="./function#unfold">unfold</a></li><li><a tags="function,intermediate" href="./function#when">when</a></li></ul><h4 class="collapse">Math</h4><ul><li><a tags="math,beginner" href="./math#approximatelyequal">approximatelyEqual</a></li><li><a tags="math,array,beginner" href="./math#average">average</a></li><li><a tags="math,array,function,intermediate" href="./math#averageby">averageBy</a></li><li><a tags="math,intermediate" href="./math#binomialcoefficient">binomialCoefficient</a></li><li><a tags="math,beginner" href="./math#clampnumber">clampNumber</a></li><li><a tags="math,beginner" href="./math#degreestorads">degreesToRads</a></li><li><a tags="math,array,beginner" href="./math#digitize">digitize</a></li><li><a tags="math,beginner" href="./math#distance">distance</a></li><li><a tags="math,array,advanced" href="./math#elo">elo</a></li><li><a tags="math,recursion,beginner" href="./math#factorial">factorial</a></li><li><a tags="math,array,beginner" href="./math#fibonacci">fibonacci</a></li><li><a tags="math,recursion,beginner" href="./math#gcd">gcd</a></li><li><a tags="math,intermediate" href="./math#geometricprogression">geometricProgression</a></li><li><a tags="math,beginner" href="./math#hammingdistance">hammingDistance</a></li><li><a tags="math,beginner" href="./math#inrange">inRange</a></li><li><a tags="math,beginner" href="./math#isdivisible">isDivisible</a></li><li><a tags="math,beginner" href="./math#iseven">isEven</a></li><li><a tags="math,utility,beginner" href="./math#isnegativezero">isNegativeZero</a></li><li><a tags="math,beginner,intermediate" href="./math#isprime">isPrime</a></li><li><a tags="math,recursion,beginner" href="./math#lcm">lcm</a></li><li><a tags="math,utility,advanced" href="./math#luhncheck">luhnCheck</a></li><li><a tags="math,beginner" href="./math#mapnumrange">mapNumRange</a></li><li><a tags="math,array,function,beginner" href="./math#maxby">maxBy</a></li><li><a tags="math,array,intermediate" href="./math#median">median</a></li><li><a tags="math,array,beginner" href="./math#midpoint">midpoint</a></li><li><a tags="math,array,function,beginner" href="./math#minby">minBy</a></li><li><a tags="math,intermediate" href="./math#percentile">percentile</a></li><li><a tags="math,beginner" href="./math#powerset">powerset</a></li><li><a tags="math,array,intermediate" href="./math#primes">primes</a></li><li><a tags="math,beginner" href="./math#radstodegrees">radsToDegrees</a></li><li><a tags="math,utility,random,intermediate" href="./math#randomintarrayinrange">randomIntArrayInRange</a></li><li><a tags="math,utility,random,beginner" href="./math#randomintegerinrange">randomIntegerInRange</a></li><li><a tags="math,utility,random,beginner" href="./math#randomnumberinrange">randomNumberInRange</a></li><li><a tags="math,intermediate" href="./math#round">round</a></li><li><a tags="math,utility,intermediate" href="./math#sdbm">sdbm</a></li><li><a tags="math,array,intermediate" href="./math#standarddeviation">standardDeviation</a></li><li><a tags="math,array,beginner" href="./math#sum">sum</a></li><li><a tags="math,array,function,intermediate" href="./math#sumby">sumBy</a></li><li><a tags="math,intermediate" href="./math#sumpower">sumPower</a></li><li><a tags="math,beginner" href="./math#tosafeinteger">toSafeInteger</a></li><li><a tags="math,beginner" href="./math#vectordistance">vectorDistance</a></li></ul><h4 class="collapse">Node</h4><ul><li><a tags="node,string,utility,beginner" href="./node#atob">atob</a></li><li><a tags="node,string,utility,beginner" href="./node#btoa">btoa</a></li><li><a tags="node,utility,string,intermediate" href="./node#colorize">colorize</a></li><li><a tags="node,beginner" href="./node#createdirifnotexists">createDirIfNotExists</a></li><li><a tags="node,intermediate" href="./node#hasflags">hasFlags</a></li><li><a tags="node,utility,promise,intermediate" href="./node#hashnode">hashNode</a></li><li><a tags="node,type,intermediate" href="./node#isduplexstream">isDuplexStream</a></li><li><a tags="node,type,intermediate" href="./node#isreadablestream">isReadableStream</a></li><li><a tags="node,type,intermediate" href="./node#isstream">isStream</a></li><li><a tags="node,intermediate" href="./node#istravisci">isTravisCI</a></li><li><a tags="node,type,intermediate" href="./node#iswritablestream">isWritableStream</a></li><li><a tags="node,json,intermediate" href="./node#jsontofile">JSONToFile</a></li><li><a tags="node,array,string,beginner" href="./node#readfilelines">readFileLines</a></li><li><a tags="node,string,beginner" href="./node#untildify">untildify</a></li><li><a tags="node,utility,random,intermediate" href="./node#uuidgeneratornode">UUIDGeneratorNode</a></li></ul><h4 class="collapse">Object</h4><ul><li><a tags="object,function,intermediate" href="#bindall">bindAll</a></li><li><a tags="object,recursion,intermediate" href="#deepclone">deepClone</a></li><li><a tags="object,recursion,intermediate" href="#deepfreeze">deepFreeze</a></li><li><a tags="object,intermediate" href="#deepget">deepGet</a></li><li><a tags="object,recursion,advanced" href="#deepmapkeys">deepMapKeys</a></li><li><a tags="object,intermediate" href="#defaults">defaults</a></li><li><a tags="object,recursion,intermediate" href="#dig">dig</a></li><li><a tags="object,array,type,advanced" href="#equals">equals</a></li><li><a tags="object,function,intermediate" href="#findkey">findKey</a></li><li><a tags="object,function,intermediate" href="#findlastkey">findLastKey</a></li><li><a tags="object,recursion,intermediate" href="#flattenobject">flattenObject</a></li><li><a tags="object,intermediate" href="#forown">forOwn</a></li><li><a tags="object,intermediate" href="#forownright">forOwnRight</a></li><li><a tags="object,function,intermediate" href="#functions">functions</a></li><li><a tags="object,intermediate" href="#get">get</a></li><li><a tags="object,function,intermediate" href="#invertkeyvalues">invertKeyValues</a></li><li><a tags="object,intermediate" href="#lowercasekeys">lowercaseKeys</a></li><li><a tags="object,function,intermediate" href="#mapkeys">mapKeys</a></li><li><a tags="object,function,intermediate" href="#mapvalues">mapValues</a></li><li><a tags="object,type,intermediate" href="#matches">matches</a></li><li><a tags="object,type,function,intermediate" href="#matcheswith">matchesWith</a></li><li><a tags="object,array,intermediate" href="#merge">merge</a></li><li><a tags="object,intermediate" href="#nest">nest</a></li><li><a tags="object,array,beginner" href="#objectfrompairs">objectFromPairs</a></li><li><a tags="object,array,beginner" href="#objecttopairs">objectToPairs</a></li><li><a tags="object,array,intermediate" href="#omit">omit</a></li><li><a tags="object,array,function,intermediate" href="#omitby">omitBy</a></li><li><a tags="object,array,intermediate" href="#orderby">orderBy</a></li><li><a tags="object,array,intermediate" href="#pick">pick</a></li><li><a tags="object,array,function,intermediate" href="#pickby">pickBy</a></li><li><a tags="object,intermediate" href="#renamekeys">renameKeys</a></li><li><a tags="object,beginner" href="#shallowclone">shallowClone</a></li><li><a tags="object,array,string,intermediate" href="#size">size</a></li><li><a tags="object,array,intermediate" href="#transform">transform</a></li><li><a tags="object,logic,array,intermediate" href="#truthcheckcollection">truthCheckCollection</a></li><li><a tags="object,advanced" href="#unflattenobject">unflattenObject</a></li></ul><h4 class="collapse">String</h4><ul><li><a tags="string,beginner" href="./string#bytesize">byteSize</a></li><li><a tags="string,array,intermediate" href="./string#capitalize">capitalize</a></li><li><a tags="string,regexp,intermediate" href="./string#capitalizeeveryword">capitalizeEveryWord</a></li><li><a tags="string,regexp,beginner" href="./string#compactwhitespace">compactWhitespace</a></li><li><a tags="string,array,utility,intermediate" href="./string#csvtoarray">CSVToArray</a></li><li><a tags="string,array,object,advanced" href="./string#csvtojson">CSVToJSON</a></li><li><a tags="string,array,intermediate" href="./string#decapitalize">decapitalize</a></li><li><a tags="string,browser,regexp,intermediate" href="./string#escapehtml">escapeHTML</a></li><li><a tags="string,regexp,intermediate" href="./string#escaperegexp">escapeRegExp</a></li><li><a tags="string,intermediate" href="./string#fromcamelcase">fromCamelCase</a></li><li><a tags="string,utility,beginner" href="./string#indentstring">indentString</a></li><li><a tags="string,utility,browser,url,intermediate" href="./string#isabsoluteurl">isAbsoluteURL</a></li><li><a tags="string,regexp,intermediate" href="./string#isanagram">isAnagram</a></li><li><a tags="string,utility,beginner" href="./string#islowercase">isLowerCase</a></li><li><a tags="string,utility,beginner" href="./string#isuppercase">isUpperCase</a></li><li><a tags="string,array,function,utility,beginner" href="./string#mapstring">mapString</a></li><li><a tags="string,utility,regexp,intermediate" href="./string#mask">mask</a></li><li><a tags="string,beginner" href="./string#pad">pad</a></li><li><a tags="string,intermediate" href="./string#palindrome">palindrome</a></li><li><a tags="string,intermediate" href="./string#pluralize">pluralize</a></li><li><a tags="string,regexp,intermediate" href="./string#removenonascii">removeNonASCII</a></li><li><a tags="string,array,beginner" href="./string#reversestring">reverseString</a></li><li><a tags="string,beginner" href="./string#sortcharactersinstring">sortCharactersInString</a></li><li><a tags="string,beginner" href="./string#splitlines">splitLines</a></li><li><a tags="string,recursion,advanced" href="./string#stringpermutations">stringPermutations</a></li><li><a tags="string,utility,regexp,beginner" href="./string#striphtmltags">stripHTMLTags</a></li><li><a tags="string,regexp,intermediate" href="./string#tocamelcase">toCamelCase</a></li><li><a tags="string,regexp,intermediate" href="./string#tokebabcase">toKebabCase</a></li><li><a tags="string,regexp,intermediate" href="./string#tosnakecase">toSnakeCase</a></li><li><a tags="string,regepx,intermediate" href="./string#totitlecase">toTitleCase</a></li><li><a tags="string,beginner" href="./string#truncatestring">truncateString</a></li><li><a tags="string,browser,beginner" href="./string#unescapehtml">unescapeHTML</a></li><li><a tags="string,utility,regexp,advanced" href="./string#urljoin">URLJoin</a></li><li><a tags="string,regexp,intermediate" href="./string#words">words</a></li></ul><h4 class="collapse">Type</h4><ul><li><a tags="type,beginner" href="./type#gettype">getType</a></li><li><a tags="type,array,regexp,beginner" href="./type#is">is</a></li><li><a tags="type,array,intermediate" href="./type#isarraylike">isArrayLike</a></li><li><a tags="type,beginner" href="./type#isboolean">isBoolean</a></li><li><a tags="type,array,object,string,beginner" href="./type#isempty">isEmpty</a></li><li><a tags="type,function,beginner" href="./type#isfunction">isFunction</a></li><li><a tags="type,beginner" href="./type#isnil">isNil</a></li><li><a tags="type,beginner" href="./type#isnull">isNull</a></li><li><a tags="type,math,beginner" href="./type#isnumber">isNumber</a></li><li><a tags="type,object,beginner" href="./type#isobject">isObject</a></li><li><a tags="type,object,beginner" href="./type#isobjectlike">isObjectLike</a></li><li><a tags="type,object,intermediate" href="./type#isplainobject">isPlainObject</a></li><li><a tags="type,function,array,string,intermediate" href="./type#isprimitive">isPrimitive</a></li><li><a tags="type,function,promise,intermediate" href="./type#ispromiselike">isPromiseLike</a></li><li><a tags="type,string,beginner" href="./type#isstring">isString</a></li><li><a tags="type,beginner" href="./type#issymbol">isSymbol</a></li><li><a tags="type,beginner" href="./type#isundefined">isUndefined</a></li><li><a tags="type,json,intermediate" href="./type#isvalidjson">isValidJSON</a></li></ul><h4 class="collapse">Utility</h4><ul><li><a tags="utility,array,type,beginner" href="./utility#castarray">castArray</a></li><li><a tags="utility,regexp,intermediate" href="./utility#cloneregexp">cloneRegExp</a></li><li><a tags="utility,beginner" href="./utility#coalesce">coalesce</a></li><li><a tags="utility,intermediate" href="./utility#coalescefactory">coalesceFactory</a></li><li><a tags="utility,string,intermediate" href="./utility#extendhex">extendHex</a></li><li><a tags="utility,browser,string,url,intermediate" href="./utility#geturlparameters">getURLParameters</a></li><li><a tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a></li><li><a tags="utility,url,browser,intermediate" href="./utility#httpget">httpGet</a></li><li><a tags="utility,url,browser,intermediate" href="./utility#httppost">httpPost</a></li><li><a tags="utility,browser,intermediate" href="./utility#isbrowser">isBrowser</a></li><li><a tags="utility,function" href="./utility#mostperformant">mostPerformant</a></li><li><a tags="utility,function,beginner" href="./utility#ntharg">nthArg</a></li><li><a tags="utility,string,intermediate" href="./utility#parsecookie">parseCookie</a></li><li><a tags="utility,string,math,advanced" href="./utility#prettybytes">prettyBytes</a></li><li><a tags="utility,random,beginner" href="./utility#randomhexcolorcode">randomHexColorCode</a></li><li><a tags="utility,intermediate" href="./utility#rgbtohex">RGBToHex</a></li><li><a tags="utility,string,intermediate" href="./utility#serializecookie">serializeCookie</a></li><li><a tags="utility,beginner" href="./utility#timetaken">timeTaken</a></li><li><a tags="utility,intermediate" href="./utility#tocurrency">toCurrency</a></li><li><a tags="utility,math,beginner" href="./utility#todecimalmark">toDecimalMark</a></li><li><a tags="utility,math,intermediate" href="./utility#toordinalsuffix">toOrdinalSuffix</a></li><li><a tags="utility,math,intermediate" href="./utility#validatenumber">validateNumber</a></li><li><a tags="utility,regexp,intermediate" href="./utility#yesno">yesNo</a></li></ul><h4 class="static-link"><a href="./archive">Archive</a></h4><h4 class="static-link"><a href="./glossary">Glossary</a></h4><h4 class="static-link"><a href="./contributing">Contributing</a></h4><h4 class="static-link"><a href="./about">About</a></h4><div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div></nav><main class="col-centered"><span id="top"><br/><br/></span><h2 class="category-name">Object</h2><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="bindall">bindAll</h4><p>Binds methods of an object to the object itself, overwriting the existing method.</p><p>Use <code>Array.prototype.forEach()</code> to return a <code>function</code> that uses <code>Function.prototype.apply()</code> to apply the given context (<code>obj</code>) to <code>fn</code> for each function specified.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="deepclone">deepClone</h4><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.prototype.forEach()</code> to determine which key-value pairs need to be deep cloned.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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> obj<span class="token punctuation">.</span>length
|
|
<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">&&</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span>clone<span class="token punctuation">)
|
|
:</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> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span>obj<span class="token punctuation">)
|
|
:</span> clone<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="deepfreeze">deepFreeze</h4><p>Deep freezes an object.</p><p>Calls <code>Object.freeze(obj)</code> recursively on all unfrozen properties of passed object that are <code>instanceof</code> object.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">deepFreeze</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">forEach</span><span class="token punctuation">(</span>
|
|
prop <span class="token operator">=>
|
|
!</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">)</span> <span class="token operator">||</span> Object<span class="token punctuation">.</span><span class="token function">isFrozen</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">])</span> <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token function">deepFreeze</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">])
|
|
)</span> <span class="token operator">||</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>obj<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> o <span class="token operator">=</span> <span class="token function">deepFreeze</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>
|
|
|
|
o<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">// not allowed</span>
|
|
o<span class="token punctuation">[</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 operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">// not allowed as well</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="deepget">deepGet</h4><p>Returns the target value in a nested JSON object, based on the <code>keys</code> array.</p><p>Compare the keys you want in the nested JSON object as an <code>Array</code>. Use <code>Array.prototype.reduce()</code> to get value from nested JSON object one by one. If the key exists in object, return target value, otherwise, return <code>null</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">deepGet</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> keys<span class="token punctuation">)</span> <span class="token operator">=></span> keys<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>xs<span class="token punctuation">,</span> x<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>xs <span class="token operator">&&</span> xs<span class="token punctuation">[</span>x<span class="token punctuation">]</span> <span class="token operator">?</span> xs<span class="token punctuation">[</span>x<span class="token punctuation">] :</span> <span class="token keyword">null</span><span class="token punctuation">),</span> obj<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
foo<span class="token punctuation">: {</span>
|
|
foz<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>
|
|
bar<span class="token punctuation">: {</span>
|
|
baz<span class="token punctuation">: [</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]
|
|
}
|
|
}
|
|
};</span>
|
|
<span class="token function">deepGet</span><span class="token punctuation">(</span>data<span class="token punctuation">, [</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'foz'</span><span class="token punctuation">,</span> index<span class="token punctuation">]);</span> <span class="token comment">// get 3</span>
|
|
<span class="token function">deepGet</span><span class="token punctuation">(</span>data<span class="token punctuation">, [</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token string">'baz'</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token string">'foz'</span><span class="token punctuation">]);</span> <span class="token comment">// null</span>
|
|
</pre></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="deepmapkeys">deepMapKeys</h4><p>Deep maps an object keys.</p><p>Creates an object with the same values as the provided object and keys generated by running the provided function for each key.</p><p>Use <code>Object.keys(obj)</code> to iterate over the object's keys. Use <code>Array.prototype.reduce()</code> to create a new object with the same values and mapped keys using <code>fn</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">deepMapKeys</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> f<span class="token punctuation">)</span> <span class="token operator">=></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> obj<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token function">deepMapKeys</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> f<span class="token punctuation">))
|
|
:</span> <span class="token keyword">typeof</span> obj <span class="token operator">===</span> <span class="token string">'object'</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> current<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> obj<span class="token punctuation">[</span>current<span class="token punctuation">];</span>
|
|
acc<span class="token punctuation">[</span><span class="token function">f</span><span class="token punctuation">(</span>current<span class="token punctuation">)]</span> <span class="token operator">=</span>
|
|
val <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&&</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">?</span> <span class="token function">deepMapKeys</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> f<span class="token punctuation">) : (</span>acc<span class="token punctuation">[</span><span class="token function">f</span><span class="token punctuation">(</span>current<span class="token punctuation">)]</span> <span class="token operator">=</span> val<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
}, {})
|
|
:</span> obj<span class="token punctuation">;</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
foo<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
|
|
nested<span class="token punctuation">: {</span>
|
|
child<span class="token punctuation">: {</span>
|
|
withArray<span class="token punctuation">: [
|
|
{</span>
|
|
grandChild<span class="token punctuation">: [</span><span class="token string">'hello'</span><span class="token punctuation">]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
};</span>
|
|
<span class="token keyword">const</span> upperKeysObj <span class="token operator">=</span> <span class="token function">deepMapKeys</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> key <span class="token operator">=></span> key<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">());</span>
|
|
<span class="token comment">/*
|
|
{
|
|
"FOO":"1",
|
|
"NESTED":{
|
|
"CHILD":{
|
|
"WITHARRAY":[
|
|
{
|
|
"GRANDCHILD":[ 'hello' ]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
*/</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="defaults">defaults</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="dig">dig</h4><p>Returns the target value in a nested JSON object, based on the given key.</p><p>Use the <code>in</code> operator to check if <code>target</code> exists in <code>obj</code>. If found, return the value of <code>obj[target]</code>, otherwise use <code>Object.values(obj)</code> and <code>Array.prototype.reduce()</code> to recursively call <code>dig</code> on each nested object until the first matching key/value pair is found.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">dig</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> target<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
target <span class="token keyword">in</span> obj
|
|
<span class="token operator">?</span> obj<span class="token punctuation">[</span>target<span class="token punctuation">]
|
|
:</span> Object<span class="token punctuation">.</span><span class="token function">values</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> val<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> undefined<span class="token punctuation">)</span> <span class="token keyword">return</span> acc<span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">dig</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> target<span class="token punctuation">);
|
|
},</span> undefined<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
level1<span class="token punctuation">: {</span>
|
|
level2<span class="token punctuation">: {</span>
|
|
level3<span class="token punctuation">:</span> <span class="token string">'some data'</span>
|
|
<span class="token punctuation">}
|
|
}
|
|
};</span>
|
|
<span class="token function">dig</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token string">'level3'</span><span class="token punctuation">);</span> <span class="token comment">// 'some data'</span>
|
|
<span class="token function">dig</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token string">'level4'</span><span class="token punctuation">);</span> <span class="token comment">// undefined</span>
|
|
</pre></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="equals">equals</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">&&</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="findkey">findKey</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="findlastkey">findLastKey</h4><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.prototype.reverse()</code> to reverse their order and <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="flattenobject">flattenObject</h4><p>Flatten an object with the paths for keys.</p><p>Use recursion. Use <code>Object.keys(obj)</code> combined with <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="forown">forOwn</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="forownright">forOwnRight</h4><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.prototype.reverse()</code> to reverse their order and <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="functions">functions</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="get">get</h4><p>Retrieve a set of properties indicated by the given selectors from an object.</p><p>Use <code>Array.prototype.map()</code> for each selector, <code>String.prototype.replace()</code> to replace square brackets with dots, <code>String.prototype.split('.')</code> to split each selector, <code>Array.prototype.filter()</code> to remove empty values and <code>Array.prototype.reduce()</code> to get the value indicated by it.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="invertkeyvalues">invertKeyValues</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="lowercasekeys">lowercaseKeys</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="mapkeys">mapKeys</h4><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.prototype.reduce()</code> to create a new object with the same values and mapped keys using <code>fn</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="mapvalues">mapValues</h4><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.prototype.reduce()</code> to create a new object with the same keys and mapped values using <code>fn</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="section card-content"><h4><a href="https://frontendmasters.com/courses/es6-right-parts/" target="_blank" rel="noopener noreferrer">Recommended Resource - ES6: The Right Parts</a></h4><p>Learn new ES6 JavaScript language features like arrow function, destructuring, generators & more to write cleaner and more productive, readable programs.</p></div></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="matches">matches</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="matcheswith">matchesWith</h4><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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">examples</label><pre class="section card-examples 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">&&</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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="merge">merge</h4><p>Creates a new object from the combination of two or more objects.</p><p>Use <code>Array.prototype.reduce()</code> combined with <code>Object.keys(obj)</code> to iterate over all objects and keys. Use <code>hasOwnProperty()</code> and <code>Array.prototype.concat()</code> to append values for keys existing in multiple objects.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="nest">nest</h4><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.prototype.filter()</code> to filter the items where the <code>id</code> matches the <code>link</code>, then <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="objectfrompairs">objectFromPairs</h4><p>Creates an object from the given key-value pairs.</p><p>Use <code>Array.prototype.reduce()</code> to create and combine key-value pairs.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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>key<span class="token punctuation">,</span> val<span class="token punctuation">])</span> <span class="token operator">=></span> <span class="token punctuation">((</span>a<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">),</span> a<span class="token punctuation">), {});</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="objecttopairs">objectToPairs</h4><p>Creates an array of key-value pair arrays from an object.</p><p>Use <code>Object.keys()</code> and <code>Array.prototype.map()</code> to iterate over the object's keys and produce an array with key-value pairs.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="omit">omit</h4><p>Omits the key-value pairs corresponding to the given keys from an object.</p><p>Use <code>Object.keys(obj)</code>, <code>Array.prototype.filter()</code> and <code>Array.prototype.includes()</code> to remove the provided keys. Use <code>Array.prototype.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="omitby">omitBy</h4><p>Creates an object composed of the properties the given function returns falsy for. The function is invoked with two arguments: (value, key).</p><p>Use <code>Object.keys(obj)</code> and <code>Array.prototype.filter()</code>to remove the keys for which <code>fn</code> returns a truthy value. Use <code>Array.prototype.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="orderby">orderBy</h4><p>Returns a sorted array of objects ordered by properties and orders.</p><p>Uses <code>Array.prototype.sort()</code>, <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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"><</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="pick">pick</h4><p>Picks the key-value pairs corresponding to the given keys from an object.</p><p>Use <code>Array.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="pickby">pickBy</h4><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.prototype.filter()</code>to remove the keys for which <code>fn</code> returns a falsy value. Use <code>Array.prototype.reduce()</code> to convert the filtered keys back to an object with the corresponding key-value pairs.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="renamekeys">renameKeys</h4><p>Replaces the names of multiple object keys with the values provided.</p><p>Use <code>Object.keys()</code> in combination with <code>Array.prototype.reduce()</code> and the spread operator (<code>...</code>) to get the object's keys and rename them according to <code>keysMap</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="shallowclone">shallowClone</h4><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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="size">size</h4><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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">&&</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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="transform">transform</h4><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.prototype.reduce()</code> to call the apply the specified function against the given accumulator.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="truthcheckcollection">truthCheckCollection</h4><p>Checks if the predicate (second argument) is truthy on all elements of a collection (first argument).</p><p>Use <code>Array.prototype.every()</code> to check if each passed object has the specified property and if it returns a truthy value.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="unflattenobject">unflattenObject</h4><p>Unflatten an object with the paths for keys.</p><p>Use <code>Object.keys(obj)</code> combined with <code>Array.prototype.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.prototype.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></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code 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">examples</label><pre class="section card-examples 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></div></main><footer class="col-full-width container"><div class="col-centered"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.</p><br/><p style="display:inline-block"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a href="./archive">Archive</a> <a href="./glossary">Glossary</a></p></div></footer><a class="scroll-to-top" href="#top"></a></div></body></html> |