Adapter
ary
Creates a function that accepts up to n arguments, ignoring any additional arguments.
Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).
const ary = (fn, n) => (...args) => fn(...args.slice(0, n)); + }
30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
Adapter
intermediateary
Creates a function that accepts up to
narguments, ignoring any additional arguments.Call the provided function,
fn, with up tonarguments, usingArray.slice(0,n)and the spread operator (...).const ary = (fn, n) => (...args) => fn(...args.slice(0, n));const firstTwoMax = ary(Math.max, 2); [[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]intermediatecall
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args); diff --git a/docs/browser.html b/docs/browser.html index 4ce2da36f..6ac0ffd16 100644 --- a/docs/browser.html +++ b/docs/browser.html @@ -73,7 +73,7 @@ },1700); } }, false); - }
Browser
intermediatearrayToHtmlList
Converts the given array elements into
<li>tags and appends them to the list of the given id.Use
Array.map(),document.querySelector(), and an anonymous inner closure to create a list of html tags.const arrayToHtmlList = (arr, listID) => + }
Browser
intermediatearrayToHtmlList
Converts the given array elements into
<li>tags and appends them to the list of the given id.Use
Array.map(),document.querySelector(), and an anonymous inner closure to create a list of html tags.const arrayToHtmlList = (arr, listID) => (el => ( (el = document.querySelector('#' + listID)), (el.innerHTML += arr.map(item => `<li>${item}</li>`).join('')) @@ -113,7 +113,7 @@ return timer; };counter('#my-id', 1, 1000, 5, 2000); // Creates a 2-second timer for the element with id="my-id" -intermediatecreateElement
Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.
Use
document.createElement()to create a new element. Set itsinnerHTMLto the string supplied as the argument. UseParentNode.firstElementChildto return the element version of the string.const createElement = str => { +beginnercreateElement
Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.
Use
document.createElement()to create a new element. Set itsinnerHTMLto the string supplied as the argument. UseParentNode.firstElementChildto return the element version of the string.const createElement = str => { const el = document.createElement('div'); el.innerHTML = str; return el.firstElementChild; @@ -164,7 +164,7 @@ hub.offintermediateelementContains
Returns
trueif theparentelement contains thechildelement,falseotherwise.Check that
parentis not the same element aschild, useparent.contains(child)to check if theparentelement contains thechildelement.const elementContains = (parent, child) => parent !== child && parent.contains(child);elementContains(document.querySelector('head'), document.querySelector('title')); // true elementContains(document.querySelector('body'), document.querySelector('body')); // false -intermediateelementIsVisibleInViewport
Returns
trueif the element specified is visible in the viewport,falseotherwise.Use
Element.getBoundingClientRect()and thewindow.inner(Width|Height)values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specifytrueto determine if it is partially visible.const elementIsVisibleInViewport = (el, partiallyVisible = false) => { +advancedelementIsVisibleInViewport
Returns
trueif the element specified is visible in the viewport,falseotherwise.Use
Element.getBoundingClientRect()and thewindow.inner(Width|Height)values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specifytrueto determine if it is partially visible.const elementIsVisibleInViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window; return partiallyVisible @@ -180,7 +180,7 @@ hub.off: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop });getScrollPosition(); // {x: 0, y: 200} -intermediategetStyle
Returns the value of a CSS rule for the specified element.
Use
Window.getComputedStyle()to get the value of the CSS rule for the specified element.const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; +beginnergetStyle
Returns the value of a CSS rule for the specified element.
Use
Window.getComputedStyle()to get the value of the CSS rule for the specified element.const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];getStyle(document.querySelector('p'), 'font-size'); // '16px'beginnerhasClass
Returns
trueif the element has the specified class,falseotherwise.Use
element.classList.contains()to check if the element has the specified class.const hasClass = (el, className) => el.classList.contains(className);hasClass(document.querySelector('p.special'), 'special'); // true @@ -193,19 +193,19 @@ hub.offreturn hexes.join(''); });hashBrowser(JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })).then(console.log); // '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393' -intermediatehide
Hides all the elements specified.
Use
NodeList.prototype.forEach()to applydisplay: noneto each element specified.const hide = els => els.forEach(e => (e.style.display = 'none')); +beginnerhide
Hides all the elements specified.
Use
NodeList.prototype.forEach()to applydisplay: noneto each element specified.const hide = els => els.forEach(e => (e.style.display = 'none'));hide(document.querySelectorAll('img')); // Hides all <img> elements on the pageintermediatehttpsRedirect
Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.
Use
location.protocolto get the protocol currently being used. If it's not HTTPS, uselocation.replace()to replace the existing page with the HTTPS version of the page. Uselocation.hrefto get the full address, split it withString.split()and remove the protocol part of the URL.const httpsRedirect = () => { if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]); };httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com -intermediateinsertAfter
Inserts an HTML string after the end of the specified element.
Use
el.insertAdjacentHTML()with a position of'afterend'to parsehtmlStringand insert it after the end ofel.const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString); +beginnerinsertAfter
Inserts an HTML string after the end of the specified element.
Use
el.insertAdjacentHTML()with a position of'afterend'to parsehtmlStringand insert it after the end ofel.const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p> -intermediateinsertBefore
Inserts an HTML string before the start of the specified element.
Use
el.insertAdjacentHTML()with a position of'beforebegin'to parsehtmlStringand insert it before the start ofel.const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString); +beginnerinsertBefore
Inserts an HTML string before the start of the specified element.
Use
el.insertAdjacentHTML()with a position of'beforebegin'to parsehtmlStringand insert it before the start ofel.const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div> -intermediateisBrowserTabFocused
Returns
trueif the browser tab of the page is focused,falseotherwise.Use the
Document.hiddenproperty, introduced by the Page Visibility API to check if the browser tab of the page is visible or hidden.const isBrowserTabFocused = () => !document.hidden; +beginnerisBrowserTabFocused
Returns
trueif the browser tab of the page is focused,falseotherwise.Use the
Document.hiddenproperty, introduced by the Page Visibility API to check if the browser tab of the page is visible or hidden.const isBrowserTabFocused = () => !document.hidden;isBrowserTabFocused(); // true -intermediatenodeListToArray
Converts a
NodeListto an array.Use spread operator inside new array to convert a
NodeListto an array.const nodeListToArray = nodeList => [...nodeList]; +beginnernodeListToArray
Converts a
NodeListto an array.Use spread operator inside new array to convert a
NodeListto an array.const nodeListToArray = nodeList => [...nodeList];nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]advancedobserveMutations
Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.
Use a
MutationObserverto observe mutations on the given element. UseArray.forEach()to run the callback for each mutation that is observed. Omit the third argument,options, to use the default options (alltrue).const observeMutations = (element, callback, options) => { const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m))); @@ -291,7 +291,7 @@ document.body.stop(); // stops logging recorder.start(); // starts again const recorder2 = recordAnimationFrames(cb, false); // `start` needs to be explicitly called to begin recording frames -intermediateredirect
Redirects to a specified URL.
Use
window.location.hreforwindow.location.replace()to redirect tourl. Pass a second argument to simulate a link click (true- default) or an HTTP redirect (false).const redirect = (url, asLink = true) => +beginnerredirect
Redirects to a specified URL.
Use
window.location.hreforwindow.location.replace()to redirect tourl. Pass a second argument to simulate a link click (true- default) or an HTTP redirect (false).const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);redirect('https://google.com');advancedrunAsync
Runs a function in a separate thread by using a Web Worker, allowing long running functions to not block the UI.
Create a new
Workerusing aBlobobject URL, the contents of which should be the stringified version of the supplied function. Immediately post the return value of calling the function back. Return a promise, listening foronmessageandonerrorevents and resolving the data posted back from the worker, or throwing an error.const runAsync = fn => { @@ -337,9 +337,9 @@ recorder.sta } };scrollToTop(); -intermediatesetStyle
Sets the value of a CSS rule for the specified element.
Use
element.styleto set the value of the CSS rule for the specified element toval.const setStyle = (el, ruleName, val) => (el.style[ruleName] = val); +beginnersetStyle
Sets the value of a CSS rule for the specified element.
Use
element.styleto set the value of the CSS rule for the specified element toval.const setStyle = (el, ruleName, val) => (el.style[ruleName] = val);setStyle(document.querySelector('p'), 'font-size', '20px'); // The first <p> element on the page will have a font-size of 20px -intermediateshow
Shows all the elements specified.
Use the spread operator (
...) andArray.forEach()to clear thedisplayproperty for each element specified.const show = (...el) => [...el].forEach(e => (e.style.display = '')); +beginnershow
Shows all the elements specified.
Use the spread operator (
...) andArray.forEach()to clear thedisplayproperty for each element specified.const show = (...el) => [...el].forEach(e => (e.style.display = ''));show(...document.querySelectorAll('img')); // Shows all <img> elements on the pageintermediatesmoothScroll
Smoothly scrolls the element on which it's called into the visible area of the browser window.
Use
.scrollIntoViewmethod to scroll the element. Pass{ behavior: 'smooth' }to.scrollIntoViewso it scrolls smoothly.const smoothScroll = element => document.querySelector(element).scrollIntoView({ @@ -347,7 +347,7 @@ recorder.sta });smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar -intermediatetoggleClass
Toggle a class for an element.
Use
element.classList.toggle()to toggle the specified class for the element.const toggleClass = (el, className) => el.classList.toggle(className); +beginnertoggleClass
Toggle a class for an element.
Use
element.classList.toggle()to toggle the specified class for the element.const toggleClass = (el, className) => el.classList.toggle(className);toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymoreintermediatetriggerEvent
Triggers a specific event on a given element, optionally passing custom data.
Use
new CustomEvent()to create an event from the specifiedeventTypeand details. Useel.dispatchEvent()to trigger the newly created event on the given element. Omit the third argument,detail, if you do not want to pass custom data to the triggered event.const triggerEvent = (el, eventType, detail = undefined) => el.dispatchEvent(new CustomEvent(eventType, { detail: detail })); diff --git a/docs/date.html b/docs/date.html index 97d3b1983..4bf3f826e 100644 --- a/docs/date.html +++ b/docs/date.html @@ -73,7 +73,7 @@ },1700); } }, false); - }
Date
intermediateformatDuration
Returns the human readable format of the given number of milliseconds.
Divide
mswith the appropriate values to obtain the appropriate values forday,hour,minute,secondandmillisecond. UseObject.entries()withArray.filter()to keep only non-zero values. UseArray.map()to create the string for each value, pluralizing appropriately. UseString.join(', ')to combine the values into a string.const formatDuration = ms => { + }
Date
intermediateformatDuration
Returns the human readable format of the given number of milliseconds.
Divide
mswith the appropriate values to obtain the appropriate values forday,hour,minute,secondandmillisecond. UseObject.entries()withArray.filter()to keep only non-zero values. UseArray.map()to create the string for each value, pluralizing appropriately. UseString.join(', ')to combine the values into a string.const formatDuration = ms => { if (ms < 0) ms = -ms; const time = { day: Math.floor(ms / 86400000), diff --git a/docs/function.html b/docs/function.html index 088695248..c0896a347 100644 --- a/docs/function.html +++ b/docs/function.html @@ -73,7 +73,7 @@ },1700); } }, false); - }
Function
intermediateattempt
Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.
Use a
try... catchblock to return either the result of the function or an appropriate error.const attempt = (fn, ...args) => { + }
Function
intermediateattempt
Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.
Use a
try... catchblock to return either the result of the function or an appropriate error.const attempt = (fn, ...args) => { try { return fn(...args); } catch (e) { @@ -168,7 +168,7 @@ document.que 1000, 'later' ); // Logs 'later' after one second. -intermediatefunctionName
Logs the name of a function.
Use
console.debug()and thenameproperty of the passed method to log the method's name to thedebugchannel of the console.const functionName = fn => (console.debug(fn.name), fn); +beginnerfunctionName
Logs the name of a function.
Use
console.debug()and thenameproperty of the passed method to log the method's name to thedebugchannel of the console.const functionName = fn => (console.debug(fn.name), fn);functionName(Math.max); // max (logged in debug channel of console)intermediatehz
Returns the number of times a function executed per second.
hzis the unit forhertz, the unit of frequency defined as one cycle per second.Use
performance.now()to get the difference in milliseconds before and after the iteration loop to calculate the time elapsed executing the functioniterationstimes. Return the number of cycles per second by converting milliseconds to seconds and dividing it by the time elapsed. Omit the second argument,iterations, to use the default of 100 iterations.const hz = (fn, iterations = 100) => { const before = performance.now(); @@ -191,7 +191,7 @@ document.que // `sumForLoop` is nearly 10 times faster Math.round(hz(sumReduce)); // 572 Math.round(hz(sumForLoop)); // 4784 -intermediatememoize
Returns the memoized (cached) function.
Create an empty cache by instantiating a new
Mapobject. Return a function which takes a single argument to be supplied to the memoized function by first checking if the function's output for that specific input value is already cached, or store and return it if not. Thefunctionkeyword must be used in order to allow the memoized function to have itsthiscontext changed if necessary. Allow access to thecacheby setting it as a property on the returned function.const memoize = fn => { +advancedmemoize
Returns the memoized (cached) function.
Create an empty cache by instantiating a new
Mapobject. Return a function which takes a single argument to be supplied to the memoized function by first checking if the function's output for that specific input value is already cached, or store and return it if not. Thefunctionkeyword must be used in order to allow the memoized function to have itsthiscontext changed if necessary. Allow access to thecacheby setting it as a property on the returned function.const memoize = fn => { const cache = new Map(); const cached = function(val) { return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val); @@ -204,7 +204,7 @@ Math.roundanagramsCached('javascript'); // takes a long time anagramsCached('javascript'); // returns virtually instantly since it's now cached console.log(anagramsCached.cache); // The cached anagrams map -intermediatenegate
Negates a predicate function.
Take a predicate function and apply the not operator (
!) to it with its arguments.const negate = func => (...args) => !func(...args); +beginnernegate
Negates a predicate function.
Take a predicate function and apply the not operator (
!) to it with its arguments.const negate = func => (...args) => !func(...args);[1, 2, 3, 4, 5, 6].filter(negate(n => n % 2 === 0)); // [ 1, 3, 5 ]intermediateonce
Ensures a function is called only once.
Utilizing a closure, use a flag,
called, and set it totrueonce the function is called for the first time, preventing it from being called again. In order to allow the function to have itsthiscontext changed (such as in an event listener), thefunctionkeyword must be used, and the supplied function must have the context applied. Allow the function to be supplied with an arbitrary number of arguments using the rest/spread (...) operator.const once = fn => { let called = false; @@ -235,7 +235,7 @@ document.bodyawait sleep(1000); console.log('I woke up after 1 second.'); } -intermediatethrottle
Creates a throttled function that only invokes the provided function at most once per every
waitmillisecondsUse
setTimeout()andclearTimeout()to throttle the given method,fn. UseFunction.apply()to apply thethiscontext to the function and provide the necessaryarguments. UseDate.now()to keep track of the last time the throttled function was invoked. Omit the second argument,wait, to set the timeout at a default of 0 ms.const throttle = (fn, wait) => { +advancedthrottle
Creates a throttled function that only invokes the provided function at most once per every
waitmillisecondsUse
setTimeout()andclearTimeout()to throttle the given method,fn. UseFunction.apply()to apply thethiscontext to the function and provide the necessaryarguments. UseDate.now()to keep track of the last time the throttled function was invoked. Omit the second argument,wait, to set the timeout at a default of 0 ms.const throttle = (fn, wait) => { let inThrottle, lastFn, lastTime; return function() { const context = this, diff --git a/docs/index.html b/docs/index.html index 7a5f2cfc4..2057a85f1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -73,13 +73,13 @@ },1700); } }, false); - }
Array
intermediateall
Returns
trueif the provided predicate function returnstruefor all elements in a collection,falseotherwise.Use
Array.every()to test if all elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const all = (arr, fn = Boolean) => arr.every(fn); + }
Array
beginnerall
Returns
trueif the provided predicate function returnstruefor all elements in a collection,falseotherwise.Use
Array.every()to test if all elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const all = (arr, fn = Boolean) => arr.every(fn);all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // truebeginnerallEqual
Check if all elements are equal
Use
Array.every()to check if all the elements of the array are the same as the first one.const allEqual = arr => arr.every(val => val === arr[0]);allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1]); // true -intermediateany
Returns
trueif the provided predicate function returnstruefor at least one element in a collection,falseotherwise.Use
Array.some()to test if any elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const any = (arr, fn = Boolean) => arr.some(fn); +beginnerany
Returns
trueif the provided predicate function returnstruefor at least one element in a collection,falseotherwise.Use
Array.some()to test if any elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const any = (arr, fn = Boolean) => arr.some(fn);any([0, 1, 2, 0], x => x >= 2); // true any([0, 0, 1, 0]); // trueintermediatearrayToCSV
Converts a 2D array to a comma-separated values (CSV) string.
Use
Array.map()andArray.join(delimiter)to combine individual 1D arrays (rows) into strings. UseArray.join('\n')to combine all rows into a CSV string, separating each row with a newline. Omit the second argument,delimiter, to use a default delimiter of,.const arrayToCSV = (arr, delimiter = ',') => @@ -97,7 +97,7 @@ arr.slice(i * size, i * size + size) );chunk([1, 2, 3, 4, 5], 2); // [[1,2],[3,4],[5]] -intermediatecompact
Removes falsey values from an array.
Use
Array.filter()to filter out falsey values (false,null,0,"",undefined, andNaN).const compact = arr => arr.filter(Boolean); +beginnercompact
Removes falsey values from an array.
Use
Array.filter()to filter out falsey values (false,null,0,"",undefined, andNaN).const compact = arr => arr.filter(Boolean);compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); // [ 1, 2, 3, 'a', 's', 34 ]intermediatecountBy
Groups the elements of an array based on the given function and returns the count of elements in each group.
Use
Array.map()to map the values of an array to a function or property name. UseArray.reduce()to create an object, where the keys are produced from the mapped results.const countBy = (arr, fn) => arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val, i) => { @@ -110,7 +110,7 @@countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3intermediatedeepFlatten
Deep flattens an array.
Use recursion. Use
Array.concat()with an empty array ([]) and the spread operator (...) to flatten an array. Recursively flatten each element that is an array.const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5] -intermediatedifference
Returns the difference between two arrays.
Create a
Setfromb, then useArray.filter()onato only keep values not contained inb.const difference = (a, b) => { +beginnerdifference
Returns the difference between two arrays.
Create a
Setfromb, then useArray.filter()onato only keep values not contained inb.const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); }; @@ -123,11 +123,11 @@ differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]intermediatedifferenceWith
Filters out all values from an array for which the comparator function does not return
true.Use
Array.filter()andArray.findIndex()to find the appropriate values.const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); // [1, 1.2] -intermediatedrop
Returns a new array with
nelements removed from the left.Use
Array.slice()to slice the remove the specified number of elements from the left.const drop = (arr, n = 1) => arr.slice(n); +beginnerdrop
Returns a new array with
nelements removed from the left.Use
Array.slice()to slice the remove the specified number of elements from the left.const drop = (arr, n = 1) => arr.slice(n);drop([1, 2, 3]); // [2,3] drop([1, 2, 3], 2); // [3] drop([1, 2, 3], 42); // [] -intermediatedropRight
Returns a new array with
nelements removed from the right.Use
Array.slice()to slice the remove the specified number of elements from the right.const dropRight = (arr, n = 1) => arr.slice(0, -n); +beginnerdropRight
Returns a new array with
nelements removed from the right.Use
Array.slice()to slice the remove the specified number of elements from the right.const dropRight = (arr, n = 1) => arr.slice(0, -n);dropRight([1, 2, 3]); // [1,2] dropRight([1, 2, 3], 2); // [1] dropRight([1, 2, 3], 42); // [] @@ -157,7 +157,7 @@ ], (a, b) => a.id == b.id ); // [ { id: 2, value: 'c' } ] -intermediatefindLast
Returns the last element for which the provided function returns a truthy value.
Use
Array.filter()to remove elements for whichfnreturns falsey values,Array.pop()to get the last one.const findLast = (arr, fn) => arr.filter(fn).pop(); +beginnerfindLast
Returns the last element for which the provided function returns a truthy value.
Use
Array.filter()to remove elements for whichfnreturns falsey values,Array.pop()to get the last one.const findLast = (arr, fn) => arr.filter(fn).pop();findLast([1, 2, 3, 4], n => n % 2 === 1); // 3intermediatefindLastIndex
Returns the index of the last element for which the provided function returns a truthy value.
Use
Array.map()to map each element to an array with its index and value. UseArray.filter()to remove elements for whichfnreturns falsey values,Array.pop()to get the last one.const findLastIndex = (arr, fn) => arr @@ -182,12 +182,12 @@ }, {});groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]} groupBy(['one', 'two', 'three'], 'length'); // {3: ['one', 'two'], 5: ['three']} -intermediatehead
Returns the head of a list.
Use
arr[0]to return the first element of the passed array.const head = arr => arr[0]; +beginnerhead
Returns the head of a list.
Use
arr[0]to return the first element of the passed array.const head = arr => arr[0];head([1, 2, 3]); // 1intermediateindexOfAll
Returns all indices of
valin an array. Ifvalnever occurs, returns[].Use
Array.reduce()to loop over elements and store indices for matching elements. Return the array of indices.const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3] indexOfAll([1, 2, 3], 4); // [] -intermediateinitial
Returns all the elements of an array except the last one.
Use
arr.slice(0,-1)to return all but the last element of the array.const initial = arr => arr.slice(0, -1); +beginnerinitial
Returns all the elements of an array except the last one.
Use
arr.slice(0,-1)to return all but the last element of the array.const initial = arr => arr.slice(0, -1);initial([1, 2, 3]); // [1,2]intermediateinitialize2DArray
Initializes a 2D array of given width and height and value.
Use
Array.map()to generate h rows where each is a new array of size w initialize with value. If the value is not provided, default tonull.const initialize2DArray = (w, h, val = null) => Array.from({ length: h }).map(() => Array.from({ length: w }).fill(val)); @@ -278,10 +278,10 @@beginnermaxN
Returns the
nmaximum elements from the provided array. Ifnis greater than or equal to the provided array's length, then return the original array(sorted in descending order).Use
Array.sort()combined with the spread operator (...) to create a shallow clone of the array and sort it in descending order. UseArray.slice()to get the specified number of elements. Omit the second argument,n, to get a one-element array.const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);maxN([1, 2, 3]); // [3] maxN([1, 2, 3], 2); // [3,2] -intermediateminN
Returns the
nminimum elements from the provided array. Ifnis greater than or equal to the provided array's length, then return the original array(sorted in ascending order).Use
Array.sort()combined with the spread operator (...) to create a shallow clone of the array and sort it in ascending order. UseArray.slice()to get the specified number of elements. Omit the second argument,n, to get a one-element array.const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n); +beginnerminN
Returns the
nminimum elements from the provided array. Ifnis greater than or equal to the provided array's length, then return the original array(sorted in ascending order).Use
Array.sort()combined with the spread operator (...) to create a shallow clone of the array and sort it in ascending order. UseArray.slice()to get the specified number of elements. Omit the second argument,n, to get a one-element array.const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);minN([1, 2, 3]); // [1] minN([1, 2, 3], 2); // [1,2] -intermediatenone
Returns
trueif the provided predicate function returnsfalsefor all elements in a collection,falseotherwise.Use
Array.some()to test if any elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const none = (arr, fn = Boolean) => !arr.some(fn); +beginnernone
Returns
trueif the provided predicate function returnsfalsefor all elements in a collection,falseotherwise.Use
Array.some()to test if any elements in the collection returntruebased onfn. Omit the second argument,fn, to useBooleanas a default.const none = (arr, fn = Boolean) => !arr.some(fn);none([0, 1, 3, 0], x => x == 2); // true none([0, 0, 0]); // truebeginnernthElement
Returns the nth element of an array.
Use
Array.slice()to get an array containing the nth element at the first place. If the index is out of bounds, returnundefined. Omit the second argument,n, to get the first element of the array.const nthElement = (arr, n = 0) => (n === -1 ? arr.slice(n) : arr.slice(n, n + 1))[0]; @@ -300,7 +300,7 @@ );const users = [{ user: 'barney', age: 36, active: false }, { user: 'fred', age: 40, active: true }]; partition(users, o => o.active); // [[{ 'user': 'fred', 'age': 40, 'active': true }],[{ 'user': 'barney', 'age': 36, 'active': false }]] -intermediatepermutations
⚠️ WARNING: This function's execution time increases exponentially with each array element. Anything more than 8 to 10 entries will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of an array's elements (contains duplicates).
Use recursion. For each element in the given array, create all the partial permutations for the rest of its elements. Use
Array.map()to combine the element with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for arraylengthequal to2or1.const permutations = arr => { +advancedpermutations
⚠️ WARNING: This function's execution time increases exponentially with each array element. Anything more than 8 to 10 entries will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of an array's elements (contains duplicates).
Use recursion. For each element in the given array, create all the partial permutations for the rest of its elements. Use
Array.map()to combine the element with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for arraylengthequal to2or1.const permutations = arr => { if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr; return arr.reduce( (acc, item, i) => @@ -319,7 +319,7 @@ };let myArray = ['a', 'b', 'c', 'a', 'b', 'c']; pull(myArray, 'a', 'c'); // myArray = [ 'b', 'b' ] -intermediatepullAtIndex
Mutates the original array to filter out the values at the specified indexes.
Use
Array.filter()andArray.includes()to pull out the values that are not needed. UseArray.length = 0to mutate the passed in an array by resetting it's length to zero andArray.push()to re-populate it with only the pulled values. UseArray.push()to keep track of pulled valuesconst pullAtIndex = (arr, pullArr) => { +advancedpullAtIndex
Mutates the original array to filter out the values at the specified indexes.
Use
Array.filter()andArray.includes()to pull out the values that are not needed. UseArray.length = 0to mutate the passed in an array by resetting it's length to zero andArray.push()to re-populate it with only the pulled values. UseArray.push()to keep track of pulled valuesconst pullAtIndex = (arr, pullArr) => { let removed = []; let pulled = arr .map((v, i) => (pullArr.includes(i) ? removed.push(v) : v)) @@ -330,7 +330,7 @@ };let myArray = ['a', 'b', 'c', 'd']; let pulled = pullAtIndex(myArray, [1, 3]); // myArray = [ 'a', 'c' ] , pulled = [ 'b', 'd' ] -intermediatepullAtValue
Mutates the original array to filter out the values specified. Returns the removed elements.
Use
Array.filter()andArray.includes()to pull out the values that are not needed. UseArray.length = 0to mutate the passed in an array by resetting it's length to zero andArray.push()to re-populate it with only the pulled values. UseArray.push()to keep track of pulled valuesconst pullAtValue = (arr, pullArr) => { +advancedpullAtValue
Mutates the original array to filter out the values specified. Returns the removed elements.
Use
Array.filter()andArray.includes()to pull out the values that are not needed. UseArray.length = 0to mutate the passed in an array by resetting it's length to zero andArray.push()to re-populate it with only the pulled values. UseArray.push()to keep track of pulled valuesconst pullAtValue = (arr, pullArr) => { let removed = [], pushToRemove = arr.forEach((v, i) => (pullArr.includes(v) ? removed.push(v) : v)), mutateTo = arr.filter((v, i) => !pullArr.includes(v)); @@ -383,7 +383,7 @@ [{ name: 'Tom', age: 12 }, { name: 'Jack', age: 18 }, { name: 'Lucy', age: 9 }], (a, b) => a.age - b.age ); // {name: "Lucy", age: 9} -intermediatereject
Takes a predicate and array, like
Array.filter(), but only keepsxifpred(x) === false.const reject = (pred, array) => array.filter((...args) => !pred(...args)); +beginnerreject
Takes a predicate and array, like
Array.filter(), but only keepsxifpred(x) === false.const reject = (pred, array) => array.filter((...args) => !pred(...args));reject(x => x % 2 === 0, [1, 2, 3, 4, 5]); // [1, 3, 5] reject(word => word.length > 4, ['Apple', 'Pear', 'Kiwi', 'Banana']); // ['Pear', 'Kiwi']intermediateremove
Removes elements from an array for which the given function returns
false.Use
Array.filter()to find array elements that return truthy values andArray.reduce()to remove elements usingArray.splice(). Thefuncis invoked with three arguments (value, index, array).const remove = (arr, func) => @@ -480,7 +480,7 @@beginnertail
Returns all elements in an array except for the first one.
Return
Array.slice(1)if the array'slengthis more than1, otherwise, return the whole array.const tail = arr => (arr.length > 1 ? arr.slice(1) : arr);tail([1, 2, 3]); // [2,3] tail([1]); // [1] -intermediatetake
Returns an array with n elements removed from the beginning.
Use
Array.slice()to create a slice of the array withnelements taken from the beginning.const take = (arr, n = 1) => arr.slice(0, n); +beginnertake
Returns an array with n elements removed from the beginning.
Use
Array.slice()to create a slice of the array withnelements taken from the beginning.const take = (arr, n = 1) => arr.slice(0, n);take([1, 2, 3], 5); // [1, 2, 3] take([1, 2, 3], 0); // []intermediatetakeRight
Returns an array with n elements removed from the end.
Use
Array.slice()to create a slice of the array withnelements taken from the end.const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length); @@ -516,7 +516,7 @@ managers.for }, toHash(users, 'id'))) ); managers; // [ { manager:1, employees: [ { id: 2, first: "Joe" }, { id: 3, first: "Moe" } ] } ] -intermediateunion
Returns every element that exists in any of the two arrays once.
Create a
Setwith all values ofaandband convert to an array.const union = (a, b) => Array.from(new Set([...a, ...b])); +beginnerunion
Returns every element that exists in any of the two arrays once.
Create a
Setwith all values ofaandband convert to an array.const union = (a, b) => Array.from(new Set([...a, ...b]));union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]intermediateunionBy
Returns every element that exists in any of the two arrays once, after applying the provided function to each array element of both.
Create a
Setby applying allfnto all values ofa. Create aSetfromaand all elements inbwhose value, after applyingfndoes not match a value in the previously created set. Return the last set converted to an array.const unionBy = (a, b, fn) => { const s = new Set(a.map(v => fn(v))); @@ -526,7 +526,7 @@ managers; //intermediateunionWith
Returns every element that exists in any of the two arrays once, using a provided comparator function.
Create a
Setwith all values ofaand values inbfor which the comparator finds no matches ina, usingArray.findIndex().const unionWith = (a, b, comp) => Array.from(new Set([...a, ...b.filter(x => a.findIndex(y => comp(x, y)) === -1)]));unionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1, 1.2, 1.5, 3, 0, 3.9] -intermediateuniqueElements
Returns all unique values of an array.
Use ES6
Setand the...restoperator to discard all duplicated values.const uniqueElements = arr => [...new Set(arr)]; +beginneruniqueElements
Returns all unique values of an array.
Use ES6
Setand the...restoperator to discard all duplicated values.const uniqueElements = arr => [...new Set(arr)];uniqueElements([1, 2, 2, 3, 4, 4, 5]); // [1,2,3,4,5]intermediateuniqueElementsBy
Returns all unique values of an array, based on a provided comparator function.
Use
Array.reduce()andArray.some()for an array containing only the first unique occurence of each value, based on the comparator function,fn. The comparator function takes two arguments: the values of the two elements being compared.const uniqueElementsBy = (arr, fn) => arr.reduce((acc, v) => { @@ -582,7 +582,7 @@ managers; // ) .map(val => fn(...val));unzipWith([[1, 10, 100], [2, 20, 200]], (...args) => args.reduce((acc, v) => acc + v, 0)); // [3, 30, 300] -intermediatewithout
Filters out the elements of an array, that have one of the specified values.
Use
Array.filter()to create an array excluding(using!Array.includes()) all given values.(For a snippet that mutates the original array see
pull)const without = (arr, ...args) => arr.filter(v => !args.includes(v)); +beginnerwithout
Filters out the elements of an array, that have one of the specified values.
Use
Array.filter()to create an array excluding(using!Array.includes()) all given values.(For a snippet that mutates the original array see
pull)const without = (arr, ...args) => arr.filter(v => !args.includes(v));without([2, 1, 2, 3], 1, 2); // [3]intermediatexProd
Creates a new array out of the two supplied by creating each possible pair from the arrays.
Use
Array.reduce(),Array.map()andArray.concat()to produce every possible pair from the elements of the two arrays and save them in an array.const xProd = (a, b) => a.reduce((acc, x) => acc.concat(b.map(y => [x, y])), []);xProd([1, 2], ['a', 'b']); // [[1, 'a'], [1, 'b'], [2, 'a'], [2, 'b']] diff --git a/docs/math.html b/docs/math.html index 1991adea0..64280419e 100644 --- a/docs/math.html +++ b/docs/math.html @@ -73,9 +73,9 @@ },1700); } }, false); - }
Math
intermediateapproximatelyEqual
Checks if two numbers are approximately equal to each other.
Use
Math.abs()to compare the absolute difference of the two values toepsilon. Omit the third parameter,epsilon, to use a default value of0.001.const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon; + }
Math
beginnerapproximatelyEqual
Checks if two numbers are approximately equal to each other.
Use
Math.abs()to compare the absolute difference of the two values toepsilon. Omit the third parameter,epsilon, to use a default value of0.001.const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;approximatelyEqual(Math.PI / 2.0, 1.5708); // true -intermediateaverage
Returns the average of two or more numbers.
Use
Array.reduce()to add each value to an accumulator, initialized with a value of0, divide by thelengthof the array.const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length; +beginneraverage
Returns the average of two or more numbers.
Use
Array.reduce()to add each value to an accumulator, initialized with a value of0, divide by thelengthof the array.const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;average(...[1, 2, 3]); // 2 average(1, 2, 3); // 2intermediateaverageBy
Returns the average of an array, after mapping each element to a value using the provided function.
Use
Array.map()to map each element to the value returned byfn,Array.reduce()to add each value to an accumulator, initialized with a value of0, divide by thelengthof the array.const averageBy = (arr, fn) => @@ -94,14 +94,14 @@ return Math.round(res); };binomialCoefficient(8, 2); // 28 -intermediateclampNumber
Clamps
numwithin the inclusive range specified by the boundary valuesaandb.If
numfalls within the range, returnnum. Otherwise, return the nearest number in the range.const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)); +beginnerclampNumber
Clamps
numwithin the inclusive range specified by the boundary valuesaandb.If
numfalls within the range, returnnum. Otherwise, return the nearest number in the range.const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));clampNumber(2, 3, 5); // 3 clampNumber(1, -1, -5); // -1 -intermediatedegreesToRads
Converts an angle from degrees to radians.
Use
Math.PIand the degree to radian formula to convert the angle from degrees to radians.const degreesToRads = deg => (deg * Math.PI) / 180.0; +beginnerdegreesToRads
Converts an angle from degrees to radians.
Use
Math.PIand the degree to radian formula to convert the angle from degrees to radians.const degreesToRads = deg => (deg * Math.PI) / 180.0;degreesToRads(90.0); // ~1.5708 -intermediatedigitize
Converts a number to an array of digits.
Convert the number to a string, using the spread operator (
...) to build an array. UseArray.map()andparseInt()to transform each value to an integer.const digitize = n => [...`${n}`].map(i => parseInt(i)); +beginnerdigitize
Converts a number to an array of digits.
Convert the number to a string, using the spread operator (
...) to build an array. UseArray.map()andparseInt()to transform each value to an integer.const digitize = n => [...`${n}`].map(i => parseInt(i));digitize(123); // [1, 2, 3] -intermediatedistance
Returns the distance between two points.
Use
Math.hypot()to calculate the Euclidean distance between two points.const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); +beginnerdistance
Returns the distance between two points.
Use
Math.hypot()to calculate the Euclidean distance between two points.const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);distance(1, 1, 2, 3); // 2.23606797749979advancedelo
Computes the new ratings between two or more opponents using the Elo rating system. It takes an array of pre-ratings and returns an array containing post-ratings. The array should be ordered from best performer to worst performer (winner -> loser).
Use the exponent
**operator and math operators to compute the expected score (chance of winning). of each opponent and compute the new rating for each. Loop through the ratings, using each permutation to compute the post-Elo rating for each player in a pairwise fashion. Omit the second argument to use the defaultkFactorof 32.const elo = ([...ratings], kFactor = 32, selfRating) => { const [a, b] = ratings; @@ -158,9 +158,9 @@ own individual rating by supplying it as the third argument.geometricProgression(256); // [1, 2, 4, 8, 16, 32, 64, 128, 256] geometricProgression(256, 3); // [3, 6, 12, 24, 48, 96, 192] geometricProgression(256, 1, 4); // [1, 4, 16, 64, 256] -intermediatehammingDistance
Calculates the Hamming distance between two values.
Use XOR operator (
^) to find the bit difference between the two numbers, convert to a binary string usingtoString(2). Count and return the number of1s in the string, usingmatch(/1/g).const hammingDistance = (num1, num2) => ((num1 ^ num2).toString(2).match(/1/g) || '').length; +beginnerhammingDistance
Calculates the Hamming distance between two values.
Use XOR operator (
^) to find the bit difference between the two numbers, convert to a binary string usingtoString(2). Count and return the number of1s in the string, usingmatch(/1/g).const hammingDistance = (num1, num2) => ((num1 ^ num2).toString(2).match(/1/g) || '').length;hammingDistance(2, 3); // 1 -intermediateinRange
Checks if the given number falls within the given range.
Use arithmetic comparison to check if the given number is in the specified range. If the second parameter,
end, is not specified, the range is considered to be from0tostart.const inRange = (n, start, end = null) => { +beginnerinRange
Checks if the given number falls within the given range.
Use arithmetic comparison to check if the given number is in the specified range. If the second parameter,
end, is not specified, the range is considered to be from0tostart.const inRange = (n, start, end = null) => { if (end && start > end) [end, start] = [start, end]; return end == null ? n >= 0 && n < start : n >= start && n < end; }; @@ -185,7 +185,7 @@ own individual rating by supplying it as the third argument. };lcm(12, 7); // 84 lcm(...[1, 3, 4, 5]); // 60 -intermediateluhnCheck
Implementation of the Luhn Algorithm used to validate a variety of identification numbers, such as credit card numbers, IMEI numbers, National Provider Identifier numbers etc.
Use
String.split(''),Array.reverse()andArray.map()in combination withparseInt()to obtain an array of digits. UseArray.splice(0,1)to obtain the last digit. UseArray.reduce()to implement the Luhn Algorithm. Returntrueifsumis divisible by10,falseotherwise.const luhnCheck = num => { +advancedluhnCheck
Implementation of the Luhn Algorithm used to validate a variety of identification numbers, such as credit card numbers, IMEI numbers, National Provider Identifier numbers etc.
Use
String.split(''),Array.reverse()andArray.map()in combination withparseInt()to obtain an array of digits. UseArray.splice(0,1)to obtain the last digit. UseArray.reduce()to implement the Luhn Algorithm. Returntrueifsumis divisible by10,falseotherwise.const luhnCheck = num => { let arr = (num + '') .split('') .reverse() @@ -198,7 +198,7 @@ own individual rating by supplying it as the third argument.luhnCheck('4485275742308327'); // true luhnCheck(6011329933655299); // false luhnCheck(123456789); // false -intermediatemaxBy
Returns the maximum value of an array, after mapping each element to a value using the provided function.
Use
Array.map()to map each element to the value returned byfn,Math.max()to get the maximum value.const maxBy = (arr, fn) => Math.max(...arr.map(typeof fn === 'function' ? fn : val => val[fn])); +beginnermaxBy
Returns the maximum value of an array, after mapping each element to a value using the provided function.
Use
Array.map()to map each element to the value returned byfn,Math.max()to get the maximum value.const maxBy = (arr, fn) => Math.max(...arr.map(typeof fn === 'function' ? fn : val => val[fn]));maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 8 maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 8intermediatemedian
Returns the median of an array of numbers.
Find the middle of the array, use
Array.sort()to sort the values. Return the number at the midpoint iflengthis odd, otherwise the average of the two middle numbers.const median = arr => { @@ -213,7 +213,7 @@ own individual rating by supplying it as the third argument.intermediatepercentile
Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value.
Use
Array.reduce()to calculate how many numbers are below the value and how many are the same value and apply the percentile formula.const percentile = (arr, val) => (100 * arr.reduce((acc, v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0)) / arr.length;percentile([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 6); // 55 -intermediatepowerset
Returns the powerset of a given array of numbers.
Use
Array.reduce()combined withArray.map()to iterate over elements and combine into an array containing all combinations.const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]); +beginnerpowerset
Returns the powerset of a given array of numbers.
Use
Array.reduce()combined withArray.map()to iterate over elements and combine into an array containing all combinations.const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);powerset([1, 2]); // [[], [1], [2], [2,1]]intermediateprimes
Generates primes up to a given number, using the Sieve of Eratosthenes.
Generate an array from
2to the given number. UseArray.filter()to filter out the values divisible by any number from2to the square root of the provided number.const primes = num => { let arr = Array.from({ length: num - 1 }).map((x, i) => i + 2), @@ -223,14 +223,14 @@ own individual rating by supplying it as the third argument. return arr; };primes(10); // [2,3,5,7] -intermediateradsToDegrees
Converts an angle from radians to degrees.
Use
Math.PIand the radian to degree formula to convert the angle from radians to degrees.const radsToDegrees = rad => (rad * 180.0) / Math.PI; +beginnerradsToDegrees
Converts an angle from radians to degrees.
Use
Math.PIand the radian to degree formula to convert the angle from radians to degrees.const radsToDegrees = rad => (rad * 180.0) / Math.PI;radsToDegrees(Math.PI / 2); // 90intermediaterandomIntArrayInRange
Returns an array of n random integers in the specified range.
Use
Array.from()to create an empty array of the specific length,Math.random()to generate a random number and map it to the desired range, usingMath.floor()to make it an integer.const randomIntArrayInRange = (min, max, n = 1) => Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min);randomIntArrayInRange(12, 35, 10); // [ 34, 14, 27, 17, 30, 27, 20, 26, 21, 14 ]beginnerrandomIntegerInRange
Returns a random integer in the specified range.
Use
Math.random()to generate a random number and map it to the desired range, usingMath.floor()to make it an integer.const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;randomIntegerInRange(0, 5); // 2 -intermediaterandomNumberInRange
Returns a random number in the specified range.
Use
Math.random()to generate a random value, map it to the desired range using multiplication.const randomNumberInRange = (min, max) => Math.random() * (max - min) + min; +beginnerrandomNumberInRange
Returns a random number in the specified range.
Use
Math.random()to generate a random value, map it to the desired range using multiplication.const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;randomNumberInRange(2, 10); // 6.0211363285087005intermediateround
Rounds a number to a specified amount of digits.
Use
Math.round()and template literals to round the number to the specified number of digits. Omit the second argument,decimalsto round to an integer.const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);round(1.005, 2); // 1.01 @@ -266,7 +266,7 @@ own individual rating by supplying it as the third argument.sumPower(10); // 385 sumPower(10, 3); //3025 sumPower(10, 3, 5); //2925 -intermediatetoSafeInteger
Converts a value to a safe integer.
Use
Math.max()andMath.min()to find the closest safe value. UseMath.round()to convert to an integer.const toSafeInteger = num => +beginnertoSafeInteger
Converts a value to a safe integer.
Use
Math.max()andMath.min()to find the closest safe value. UseMath.round()to convert to an integer.const toSafeInteger = num => Math.round(Math.max(Math.min(num, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER));toSafeInteger('3.2'); // 3 toSafeInteger(Infinity); // 9007199254740991 diff --git a/docs/node.html b/docs/node.html index ba8922451..8822f54b6 100644 --- a/docs/node.html +++ b/docs/node.html @@ -73,9 +73,9 @@ },1700); } }, false); - }
Node
intermediateatob
Decodes a string of data which has been encoded using base-64 encoding.
Create a
Bufferfor the given string with base-64 encoding and useBuffer.toString('binary')to return the decoded string.const atob = str => new Buffer(str, 'base64').toString('binary'); + }
Node
beginneratob
Decodes a string of data which has been encoded using base-64 encoding.
Create a
Bufferfor the given string with base-64 encoding and useBuffer.toString('binary')to return the decoded string.const atob = str => new Buffer(str, 'base64').toString('binary');atob('Zm9vYmFy'); // 'foobar' -intermediatebtoa
Creates a base-64 encoded ASCII string from a String object in which each character in the string is treated as a byte of binary data.
Create a
Bufferfor the given string with binary encoding and useBuffer.toString('base64')to return the encoded string.const btoa = str => new Buffer(str, 'binary').toString('base64'); +beginnerbtoa
Creates a base-64 encoded ASCII string from a String object in which each character in the string is treated as a byte of binary data.
Create a
Bufferfor the given string with binary encoding and useBuffer.toString('base64')to return the encoded string.const btoa = str => new Buffer(str, 'binary').toString('base64');btoa('foobar'); // 'Zm9vYmFy'intermediatecolorize
Add special characters to text to print in color in the console (combined with
console.log()).Use template literals and special characters to add the appropriate color code to the string output. For background colors, add a special character that resets the background color at the end of the string.
const colorize = (...args) => ({ black: `\x1b[30m${args.join(' ')}`, @@ -125,7 +125,7 @@ console.log< const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2));JSONToFile({ test: 'is passed' }, 'testJsonFile'); // writes the object to 'testJsonFile.json' -intermediatereadFileLines
Returns an array of lines from the specified file.
Use
readFileSyncfunction infsnode package to create aBufferfrom a file. convert buffer to string usingtoString(encoding)function. creating an array from contents of file byspliting file content line by line (each\n).const fs = require('fs'); +beginnerreadFileLines
Returns an array of lines from the specified file.
Use
readFileSyncfunction infsnode package to create aBufferfrom a file. convert buffer to string usingtoString(encoding)function. creating an array from contents of file byspliting file content line by line (each\n).const fs = require('fs'); const readFileLines = filename => fs .readFileSync(filename) @@ -140,7 +140,7 @@ contents of test.txt : */ let arr = readFileLines('test.txt'); console.log(arr); // ['line1', 'line2', 'line3'] -intermediateuntildify
Converts a tilde path to an absolute path.
Use
String.replace()with a regular expression andOS.homedir()to replace the~in the start of the path with the home directory.const untildify = str => str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`); +beginneruntildify
Converts a tilde path to an absolute path.
Use
String.replace()with a regular expression andOS.homedir()to replace the~in the start of the path with the home directory.const untildify = str => str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`);untildify('~/node'); // '/Users/aUser/node'intermediateUUIDGeneratorNode
Generates a UUID in Node.JS.
Use
cryptoAPI to generate a UUID, compliant with RFC4122 version 4.const crypto = require('crypto'); const UUIDGeneratorNode = () => diff --git a/docs/object.html b/docs/object.html index 7f630b3a4..e0ca15295 100644 --- a/docs/object.html +++ b/docs/object.html @@ -73,7 +73,7 @@ },1700); } }, false); - }
Object
intermediatebindAll
Binds methods of an object to the object itself, overwriting the existing method.
Use
Array.forEach()to return afunctionthat usesFunction.apply()to apply the given context (obj) tofnfor each function specified.const bindAll = (obj, ...fns) => + }
Object
intermediatebindAll
Binds methods of an object to the object itself, overwriting the existing method.
Use
Array.forEach()to return afunctionthat usesFunction.apply()to apply the given context (obj) tofnfor each function specified.const bindAll = (obj, ...fns) => fns.forEach( fn => ( (f = obj[fn]), @@ -278,9 +278,9 @@ Foo.prototype: 5, parent_id: 4 } ]; const nestedComments = nest(comments); // [{ id: 1, parent_id: null, children: [...] }] -intermediateobjectFromPairs
Creates an object from the given key-value pairs.
Use
Array.reduce()to create and combine key-value pairs.const objectFromPairs = arr => arr.reduce((a, v) => ((a[v[0]] = v[1]), a), {}); +beginnerobjectFromPairs
Creates an object from the given key-value pairs.
Use
Array.reduce()to create and combine key-value pairs.const objectFromPairs = arr => arr.reduce((a, v) => ((a[v[0]] = v[1]), a), {});objectFromPairs([['a', 1], ['b', 2]]); // {a: 1, b: 2} -intermediateobjectToPairs
Creates an array of key-value pair arrays from an object.
Use
Object.keys()andArray.map()to iterate over the object's keys and produce an array with key-value pairs.const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); +beginnerobjectToPairs
Creates an array of key-value pair arrays from an object.
Use
Object.keys()andArray.map()to iterate over the object's keys and produce an array with key-value pairs.const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);objectToPairs({ a: 1, b: 2 }); // [['a',1],['b',2]]intermediateomit
Omits the key-value pairs corresponding to the given keys from an object.
Use
Object.keys(obj),Array.filter()andArray.includes()to remove the provided keys. UseArray.reduce()to convert the filtered keys back to an object with the corresponding key-value pairs.const omit = (obj, arr) => Object.keys(obj) @@ -323,7 +323,7 @@ Foo.prototypeexamplesconst obj = { name: 'Bobo', job: 'Front-End Master', shoeSize: 100 }; renameKeys({ name: 'firstName', job: 'passion' }, obj); // { firstName: 'Bobo', passion: 'Front-End Master', shoeSize: 100 } -intermediateshallowClone
Creates a shallow clone of an object.
Use
Object.assign()and an empty object ({}) to create a shallow clone of the original.const shallowClone = obj => Object.assign({}, obj); +beginnershallowClone
Creates a shallow clone of an object.
Use
Object.assign()and an empty object ({}) to create a shallow clone of the original.const shallowClone = obj => Object.assign({}, obj);const a = { x: true, y: 1 }; const b = shallowClone(a); // a !== bintermediatesize
Get size of arrays, objects or strings.
Get type of
val(array,objectorstring). Uselengthproperty for arrays. Uselengthorsizevalue if available or number of keys for objects. Usesizeof aBlobobject created fromvalfor strings.Split strings into array of characters with
split('')and return its length.const size = val => diff --git a/docs/string.html b/docs/string.html index 7184f01bf..358c4affa 100644 --- a/docs/string.html +++ b/docs/string.html @@ -73,7 +73,7 @@ },1700); } }, false); - }
String
intermediatebyteSize
Returns the length of a string in bytes.
Convert a given string to a
BlobObject and find itssize.const byteSize = str => new Blob([str]).size; + }
String
beginnerbyteSize
Returns the length of a string in bytes.
Convert a given string to a
BlobObject and find itssize.const byteSize = str => new Blob([str]).size;byteSize('😀'); // 4 byteSize('Hello World'); // 11intermediatecapitalize
Capitalizes the first letter of a string.
Use array destructuring and
String.toUpperCase()to capitalize first letter,...restto get array of characters after first letter and thenArray.join('')to make it a string again. Omit thelowerRestparameter to keep the rest of the string intact, or set it totrueto convert to lowercase.const capitalize = ([first, ...rest], lowerRest = false) => @@ -144,15 +144,15 @@ return normalize(str1) === normalize(str2); };isAnagram('iceman', 'cinema'); // true -intermediateisLowerCase
Checks if a string is lower case.
Convert the given string to lower case, using
String.toLowerCase()and compare it to the original.const isLowerCase = str => str === str.toLowerCase(); +beginnerisLowerCase
Checks if a string is lower case.
Convert the given string to lower case, using
String.toLowerCase()and compare it to the original.const isLowerCase = str => str === str.toLowerCase();isLowerCase('abc'); // true isLowerCase('a3@$'); // true isLowerCase('Ab4'); // false -intermediateisUpperCase
Checks if a string is upper case.
Convert the given string to upper case, using
String.toUpperCase()and compare it to the original.const isUpperCase = str => str === str.toUpperCase(); +beginnerisUpperCase
Checks if a string is upper case.
Convert the given string to upper case, using
String.toUpperCase()and compare it to the original.const isUpperCase = str => str === str.toUpperCase();isUpperCase('ABC'); // true isLowerCase('A3@$'); // true isLowerCase('aB4'); // false -intermediatemapString
Creates a new string with the results of calling a provided function on every character in the calling string.
Use
String.split('')andArray.map()to call the provided function,fn, for each character instr. UseArray.join('')to recombine the array of characters into a string. The callback function,fn, takes three arguments (the current character, the index of the current character and the stringmapStringwas called upon).const mapString = (str, fn) => +beginnermapString
Creates a new string with the results of calling a provided function on every character in the calling string.
Use
String.split('')andArray.map()to call the provided function,fn, for each character instr. UseArray.join('')to recombine the array of characters into a string. The callback function,fn, takes three arguments (the current character, the index of the current character and the stringmapStringwas called upon).const mapString = (str, fn) => str .split('') .map((c, i) => fn(c, i, str)) @@ -163,7 +163,7 @@mask(1234567890); // '******7890' mask(1234567890, 3); // '*******890' mask(1234567890, -4, '$'); // '$$$$567890' -intermediatepad
Pads a string on both sides with the specified character, if it's shorter than the specified length.
Use
String.padStart()andString.padEnd()to pad both sides of the given string. Omit the third argument,char, to use the whitespace character as the default padding character.const pad = (str, length, char = ' ') => +beginnerpad
Pads a string on both sides with the specified character, if it's shorter than the specified length.
Use
String.padStart()andString.padEnd()to pad both sides of the given string. Omit the third argument,char, to use the whitespace character as the default padding character.const pad = (str, length, char = ' ') => str.padStart((str.length + length) / 2, char).padEnd(length, char);pad('cat', 8); // ' cat ' pad(String(42), 6, '0'); // '004200' @@ -194,11 +194,11 @@removeNonASCII('äÄçÇéÉêlorem-ipsumöÖÐþúÚ'); // 'lorem-ipsum'beginnerreverseString
Reverses a string.
Use the spread operator (
...) andArray.reverse()to reverse the order of the characters in the string. Combine characters to get a string usingString.join('').const reverseString = str => [...str].reverse().join('');reverseString('foobar'); // 'raboof' -intermediatesortCharactersInString
Alphabetically sorts the characters in a string.
Use the spread operator (
...),Array.sort()andString.localeCompare()to sort the characters instr, recombine usingString.join('').const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join(''); +beginnersortCharactersInString
Alphabetically sorts the characters in a string.
Use the spread operator (
...),Array.sort()andString.localeCompare()to sort the characters instr, recombine usingString.join('').const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');sortCharactersInString('cabbage'); // 'aabbceg' -intermediatesplitLines
Splits a multiline string into an array of lines.
Use
String.split()and a regular expression to match line breaks and create an array.const splitLines = str => str.split(/\r?\n/); +beginnersplitLines
Splits a multiline string into an array of lines.
Use
String.split()and a regular expression to match line breaks and create an array.const splitLines = str => str.split(/\r?\n/);splitLines('This\nis a\nmultiline\nstring.\n'); // ['This', 'is a', 'multiline', 'string.' , ''] -intermediatestringPermutations
⚠️ WARNING: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of a string (contains duplicates).
Use recursion. For each letter in the given string, create all the partial permutations for the rest of its letters. Use
Array.map()to combine the letter with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for stringlengthequal to2or1.const stringPermutations = str => { +advancedstringPermutations
⚠️ WARNING: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of a string (contains duplicates).
Use recursion. For each letter in the given string, create all the partial permutations for the rest of its letters. Use
Array.map()to combine the letter with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for stringlengthequal to2or1.const stringPermutations = str => { if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; return str .split('') @@ -209,7 +209,7 @@ ); };stringPermutations('abc'); // ['abc','acb','bac','bca','cab','cba'] -intermediatestripHTMLTags
Removes HTML/XML tags from string.
Use a regular expression to remove HTML/XML tags from a string.
const stripHTMLTags = str => str.replace(/<[^>]*>/g, ''); +beginnerstripHTMLTags
Removes HTML/XML tags from string.
Use a regular expression to remove HTML/XML tags from a string.
const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');stripHTMLTags('<p><em>lorem</em> <strong>ipsum</strong></p>'); // 'lorem ipsum'intermediatetoCamelCase
Converts a string to camelcase.
Break the string into words and combine them capitalizing the first letter of each word, using a regexp.
const toCamelCase = str => { let s = @@ -249,7 +249,7 @@beginnertruncateString
Truncates a string up to a specified length.
Determine if the string's
lengthis greater thannum. Return the string truncated to the desired length, with'...'appended to the end or the original string.const truncateString = (str, num) => str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;truncateString('boomerang', 7); // 'boom...' -intermediateunescapeHTML
Unescapes escaped HTML characters.
Use
String.replace()with a regex that matches the characters that need to be unescaped, using a callback function to replace each escaped character instance with its associated unescaped character using a dictionary (object).const unescapeHTML = str => +beginnerunescapeHTML
Unescapes escaped HTML characters.
Use
String.replace()with a regex that matches the characters that need to be unescaped, using a callback function to replace each escaped character instance with its associated unescaped character using a dictionary (object).const unescapeHTML = str => str.replace( /&|<|>|'|"/g, tag => @@ -262,7 +262,7 @@ }[tag] || tag) );unescapeHTML('<a href="#">Me & you</a>'); // '<a href="#">Me & you</a>' -intermediateURLJoin
Joins all given URL segments together, then normalizes the resulting URL.
Use
String.join('/')to combine URL segments, then a series ofString.replace()calls with various regexps to normalize the resulting URL (remove double slashes, add proper slashes for protocol, remove slashes before parameters, combine parameters with'&'and normalize first parameter delimiter).const URLJoin = (...args) => +advancedURLJoin
Joins all given URL segments together, then normalizes the resulting URL.
Use
String.join('/')to combine URL segments, then a series ofString.replace()calls with various regexps to normalize the resulting URL (remove double slashes, add proper slashes for protocol, remove slashes before parameters, combine parameters with'&'and normalize first parameter delimiter).const URLJoin = (...args) => args .join('/') .replace(/[\/]+/g, '/') diff --git a/docs/style.css b/docs/style.css index 625c5bd47..096ce23da 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1 +1 @@ -@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color)}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:6.5rem;height:3.25rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:3.5rem;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:calc(100vh - 3.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:var(--universal-margin);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));padding-left:0;color:var(--nav-fore-color)}nav a{display:block;margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav a:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav a+a{margin-top:0}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}[type="search"]{color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);width:100%;margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 .0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.3125rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.contributor>.section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all 0.3s ease}.card.contributor>.section.button:link,.card.contributor>.section.button:visited{color:var(--fore-color)}.card.contributor>.section.button:link:hover,.card.contributor>.section.button:visited:hover{color:var(--a-link-color);text-decoration:none} +@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color)}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0;padding-top:calc(3 * var(--universal-padding))}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:6.5rem;height:3.25rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:3.5rem;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:calc(100vh - 3.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:var(--universal-margin);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));padding-left:0;color:var(--nav-fore-color)}nav a{display:block;margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav a:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav a+a{margin-top:0}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}[type="search"]{color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);width:100%;margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 .0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.3125rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.contributor>.section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all 0.3s ease}.card.contributor>.section.button:link,.card.contributor>.section.button:visited{color:var(--fore-color)}.card.contributor>.section.button:link:hover,.card.contributor>.section.button:visited:hover{color:var(--a-link-color);text-decoration:none} diff --git a/docs/type.html b/docs/type.html index 3c3d2efdf..43d5ece6a 100644 --- a/docs/type.html +++ b/docs/type.html @@ -73,10 +73,10 @@ },1700); } }, false); - }
Type
intermediategetType
Returns the native type of a value.
Returns lowercased constructor name of value,
"undefined"or"null"if value isundefinedornull.const getType = v => + }
Type
beginnergetType
Returns the native type of a value.
Returns lowercased constructor name of value,
"undefined"or"null"if value isundefinedornull.const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();getType(new Set([1, 2, 3])); // 'set' -intermediateis
Checks if the provided value is of the specified type.
Ensure the value is not
undefinedornullusingArray.includes(), and compare theconstructorproperty on the value withtypeto check if the provided value is of the specifiedtype.const is = (type, val) => ![, null].includes(val) && val.constructor === type; +beginneris
Checks if the provided value is of the specified type.
Ensure the value is not
undefinedornullusingArray.includes(), and compare theconstructorproperty on the value withtypeto check if the provided value is of the specifiedtype.const is = (type, val) => ![, null].includes(val) && val.constructor === type;is(Array, [1]); // true is(ArrayBuffer, new ArrayBuffer()); // true is(Map, new Map()); // true @@ -94,10 +94,10 @@isArrayLike(document.querySelectorAll('.className')); // true isArrayLike('abc'); // true isArrayLike(null); // false -intermediateisBoolean
Checks if the given argument is a native boolean element.
Use
typeofto check if a value is classified as a boolean primitive.const isBoolean = val => typeof val === 'boolean'; +beginnerisBoolean
Checks if the given argument is a native boolean element.
Use
typeofto check if a value is classified as a boolean primitive.const isBoolean = val => typeof val === 'boolean';isBoolean(null); // false isBoolean(false); // true -intermediateisEmpty
Returns true if the a value is an empty object, collection, map or set, has no enumerable properties or is any type that is not considered a collection.
Check if the provided value is
nullor if itslengthis equal to0.const isEmpty = val => val == null || !(Object.keys(val) || val).length; +beginnerisEmpty
Returns true if the a value is an empty object, collection, map or set, has no enumerable properties or is any type that is not considered a collection.
Check if the provided value is
nullor if itslengthis equal to0.const isEmpty = val => val == null || !(Object.keys(val) || val).length;isEmpty(new Map()); // true isEmpty(new Set()); // true isEmpty([]); // true @@ -108,25 +108,25 @@ isEmpty('text'); // false isEmpty(123); // true - type is not considered a collection isEmpty(true); // true - type is not considered a collection -intermediateisFunction
Checks if the given argument is a function.
Use
typeofto check if a value is classified as a function primitive.const isFunction = val => typeof val === 'function'; +beginnerisFunction
Checks if the given argument is a function.
Use
typeofto check if a value is classified as a function primitive.const isFunction = val => typeof val === 'function';isFunction('x'); // false isFunction(x => x); // true -intermediateisNil
Returns
trueif the specified value isnullorundefined,falseotherwise.Use the strict equality operator to check if the value and of
valare equal tonullorundefined.const isNil = val => val === undefined || val === null; +beginnerisNil
Returns
trueif the specified value isnullorundefined,falseotherwise.Use the strict equality operator to check if the value and of
valare equal tonullorundefined.const isNil = val => val === undefined || val === null;isNil(null); // true isNil(undefined); // true -intermediateisNull
Returns
trueif the specified value isnull,falseotherwise.Use the strict equality operator to check if the value and of
valare equal tonull.const isNull = val => val === null; +beginnerisNull
Returns
trueif the specified value isnull,falseotherwise.Use the strict equality operator to check if the value and of
valare equal tonull.const isNull = val => val === null;isNull(null); // true -intermediateisNumber
Checks if the given argument is a number.
Use
typeofto check if a value is classified as a number primitive.const isNumber = val => typeof val === 'number'; +beginnerisNumber
Checks if the given argument is a number.
Use
typeofto check if a value is classified as a number primitive.const isNumber = val => typeof val === 'number';isNumber('1'); // false isNumber(1); // true -intermediateisObject
Returns a boolean determining if the passed value is an object or not.
Uses the
Objectconstructor to create an object wrapper for the given value. If the value isnullorundefined, create and return an empty object. Οtherwise, return an object of a type that corresponds to the given value.const isObject = obj => obj === Object(obj); +beginnerisObject
Returns a boolean determining if the passed value is an object or not.
Uses the
Objectconstructor to create an object wrapper for the given value. If the value isnullorundefined, create and return an empty object. Οtherwise, return an object of a type that corresponds to the given value.const isObject = obj => obj === Object(obj);isObject([1, 2, 3, 4]); // true isObject([]); // true isObject(['Hello!']); // true isObject({ a: 1 }); // true isObject({}); // true isObject(true); // false -intermediateisObjectLike
Checks if a value is object-like.
Check if the provided value is not
nulland itstypeofis equal to'object'.const isObjectLike = val => val !== null && typeof val === 'object'; +beginnerisObjectLike
Checks if a value is object-like.
Check if the provided value is not
nulland itstypeofis equal to'object'.const isObjectLike = val => val !== null && typeof val === 'object';isObjectLike({}); // true isObjectLike([1, 2, 3]); // true isObjectLike(x => x); // false @@ -152,11 +152,11 @@ }); // true isPromiseLike(null); // false isPromiseLike({}); // false -intermediateisString
Checks if the given argument is a string.
Use
typeofto check if a value is classified as a string primitive.const isString = val => typeof val === 'string'; +beginnerisString
Checks if the given argument is a string.
Use
typeofto check if a value is classified as a string primitive.const isString = val => typeof val === 'string';isString('10'); // true -intermediateisSymbol
Checks if the given argument is a symbol.
Use
typeofto check if a value is classified as a symbol primitive.const isSymbol = val => typeof val === 'symbol'; +beginnerisSymbol
Checks if the given argument is a symbol.
Use
typeofto check if a value is classified as a symbol primitive.const isSymbol = val => typeof val === 'symbol';isSymbol(Symbol('x')); // true -intermediateisUndefined
Returns
trueif the specified value isundefined,falseotherwise.Use the strict equality operator to check if the value and of
valare equal toundefined.const isUndefined = val => val === undefined; +beginnerisUndefined
Returns
trueif the specified value isundefined,falseotherwise.Use the strict equality operator to check if the value and of
valare equal toundefined.const isUndefined = val => val === undefined;isUndefined(undefined); // trueintermediateisValidJSON
Checks if the provided argument is a valid JSON.
Use
JSON.parse()and atry... catchblock to check if the provided argument is a valid JSON.const isValidJSON = obj => { try { diff --git a/docs/utility.html b/docs/utility.html index e94c33cff..5db21f79b 100644 --- a/docs/utility.html +++ b/docs/utility.html @@ -73,13 +73,13 @@ },1700); } }, false); - }
Utility
intermediatecastArray
Casts the provided value as an array if it's not one.
Use
Array.isArray()to determine ifvalis an array and return it as-is or encapsulated in an array accordingly.const castArray = val => (Array.isArray(val) ? val : [val]); + }
Utility
beginnercastArray
Casts the provided value as an array if it's not one.
Use
Array.isArray()to determine ifvalis an array and return it as-is or encapsulated in an array accordingly.const castArray = val => (Array.isArray(val) ? val : [val]);castArray('foo'); // ['foo'] castArray([1]); // [1]intermediatecloneRegExp
Clones a regular expression.
Use
new RegExp(),RegExp.sourceandRegExp.flagsto clone the given regular expression.const cloneRegExp = regExp => new RegExp(regExp.source, regExp.flags);const regExp = /lorem ipsum/gi; const regExp2 = cloneRegExp(regExp); // /lorem ipsum/gi -intermediatecoalesce
Returns the first non-null/undefined argument.
Use
Array.find()to return the first nonnull/undefinedargument.const coalesce = (...args) => args.find(_ => ![undefined, null].includes(_)); +beginnercoalesce
Returns the first non-null/undefined argument.
Use
Array.find()to return the first nonnull/undefinedargument.const coalesce = (...args) => args.find(_ => ![undefined, null].includes(_));coalesce(null, undefined, '', NaN, 'Waldo'); // ""intermediatecoalesceFactory
Returns a customized coalesce function that returns the first argument that returns
truefrom the provided argument validation function.Use
Array.find()to return the first argument that returnstruefrom the provided argument validation function.const coalesceFactory = valid => (...args) => args.find(valid);const customCoalesce = coalesceFactory(_ => ![null, undefined, '', NaN].includes(_)); @@ -197,7 +197,7 @@ Logs: { [1, '2', 3, 4, 5, 6, 7, 8, 9, 10].every(el => typeof el === 'number'); } ]); // 1 -intermediatenthArg
Creates a function that gets the argument at index
n. Ifnis negative, the nth argument from the end is returned.Use
Array.slice()to get the desired argument at indexn.const nthArg = n => (...args) => args.slice(n)[0]; +beginnernthArg
Creates a function that gets the argument at index
n. Ifnis negative, the nth argument from the end is returned.Use
Array.slice()to get the desired argument at indexn.const nthArg = n => (...args) => args.slice(n)[0];const third = nthArg(2); third(1, 2, 3); // 3 third(1, 2); // undefined @@ -212,7 +212,7 @@ Logs: { return acc; }, {});parseCookie('foo=bar; equation=E%3Dmc%5E2'); // { foo: 'bar', equation: 'E=mc^2' } -intermediateprettyBytes
Converts a number in bytes to a human-readable string.
Use an array dictionary of units to be accessed based on the exponent. Use
Number.toPrecision()to truncate the number to a certain number of digits. Return the prettified string by building it up, taking into account the supplied options and whether it is negative or not. Omit the second argument,precision, to use a default precision of3digits. Omit the third argument,addSpace, to add space between the number and unit by default.const prettyBytes = (num, precision = 3, addSpace = true) => { +advancedprettyBytes
Converts a number in bytes to a human-readable string.
Use an array dictionary of units to be accessed based on the exponent. Use
Number.toPrecision()to truncate the number to a certain number of digits. Return the prettified string by building it up, taking into account the supplied options and whether it is negative or not. Omit the second argument,precision, to use a default precision of3digits. Omit the third argument,addSpace, to add space between the number and unit by default.const prettyBytes = (num, precision = 3, addSpace = true) => { const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; if (Math.abs(num) < 1) return num + (addSpace ? ' ' : '') + UNITS[0]; const exponent = Math.min(Math.floor(Math.log10(num < 0 ? -num : num) / 3), UNITS.length - 1); @@ -222,7 +222,7 @@ Logs: {prettyBytes(1000); // "1 KB" prettyBytes(-27145424323.5821, 5); // "-27.145 GB" prettyBytes(123456789, 3, false); // "123MB" -intermediaterandomHexColorCode
Generates a random hexadecimal color code.
Use
Math.randomto generate a random 24-bit(6x4bits) hexadecimal number. Use bit shifting and then convert it to an hexadecimal String usingtoString(16).const randomHexColorCode = () => { +beginnerrandomHexColorCode
Generates a random hexadecimal color code.
Use
Math.randomto generate a random 24-bit(6x4bits) hexadecimal number. Use bit shifting and then convert it to an hexadecimal String usingtoString(16).const randomHexColorCode = () => { let n = (Math.random() * 0xfffff * 1000000).toString(16); return '#' + n.slice(0, 6); }; @@ -231,7 +231,7 @@ Logs: {RGBToHex(255, 165, 1); // 'ffa501'intermediateserializeCookie
Serialize a cookie name-value pair into a Set-Cookie header string.
Use template literals and
encodeURIComponent()to create the appropriate string.const serializeCookie = (name, val) => `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;serializeCookie('foo', 'bar'); // 'foo=bar' -intermediatetimeTaken
Measures the time taken by a function to execute.
Use
console.time()andconsole.timeEnd()to measure the difference between the start and end times to determine how long the callback took to execute.const timeTaken = callback => { +beginnertimeTaken
Measures the time taken by a function to execute.
Use
console.time()andconsole.timeEnd()to measure the difference between the start and end times to determine how long the callback took to execute.const timeTaken = callback => { console.time('timeTaken'); const r = callback(); console.timeEnd('timeTaken'); @@ -245,7 +245,7 @@ Logs: { toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ $ | currency: US Dollar | currencyLangFormat: Farsi toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish -intermediatetoDecimalMark
Use
toLocaleString()to convert a float-point arithmetic to the Decimal mark form. It makes a comma separated string from a number.const toDecimalMark = num => num.toLocaleString('en-US'); +beginnertoDecimalMark
Use
toLocaleString()to convert a float-point arithmetic to the Decimal mark form. It makes a comma separated string from a number.const toDecimalMark = num => num.toLocaleString('en-US');toDecimalMark(12305030388.9087); // "12,305,030,388.909"intermediatetoOrdinalSuffix
Adds an ordinal suffix to a number.
Use the modulo operator (
%) to find values of single and tens digits. Find which ordinal pattern digits match. If digit is found in teens pattern, use teens ordinal.const toOrdinalSuffix = num => { const int = parseInt(num),