boost-eo-extension 💛

Explore a curated compilation of helpful code snippets and clever design techniques designed to improve JavaScript developer productivity, easily accessible right within the VSCode environment.

Usage: You can install it by typing "boost-eo" in the extension tab of your IDE

---

📌 Table of contents

array	basic	cast	class	console	date	destruct	dom	function	math	object	pattern	regex	spread	string

---

📌 Snippets

⚫ array

Prefix	Description
bbeo-array-asc	[array]: (a0 -> b1) sort in ascending order -> array

${1:array}.sort((${2:a},${3:b}) => ${2:a} - ${3:b})

Prefix	Description
bbeo-array-desc	[array]: (b1 -> a0) sort in descending order -> array

${1:array}.sort((${2:a},${3:b}) => ${3:b} - ${2:a})

Prefix	Description
bbeo-array-slice	[array]: split an array [n, n+1] -> array

${1:array}.slice(${2:start}, ${3:end+1})

Prefix	Description
bbeo-array-join	[array]: join an array from a delimiter to get a string -> string

${1:array}.join(${2:delimiter})

Prefix	Description
bbeo-array-flat	[array]: Flatten the elements of a nested array to a specific depth -> array

${1:array}.flat(${2:depth})

Prefix	Description
bbeo-array-isEmpty	[array]: Check if an array is empty -> boolean

${1:array}.length === 0 ? true : false

Prefix	Description
bbeo-array-removeDuplicates	[array]: Remove duplicates from an array -> array

[...new Set(${1:array})]

Prefix	Description
bbeo-array-reverse	[array]: Reverse all element in an array -> array

${1:array}.reverse()

Prefix	Description
bbeo-array-find	[array]: Search a specific element -> array

${1:array}.find(${2:element} => ${2:element} ${3:===} ${4:foo})

Prefix	Description
bbeo-array-some	[array]: Check one or more specific element.s of an array (no size modification) -> boolean

${1:array}.some(${2:element} => ${2:element} ${3:===} ${4:foo})

Prefix	Description
bbeo-array-every	[array]: Check the integrity of the elements of an array (no size modification) -> boolean

${1:array}.every(${2:element} => ${2:element} ${3:===} ${4:foo})

Prefix	Description
bbeo-array-map	[array]: Processing of different element of the array (no modification of the size) -> array

${1:array}.map(${2:element} => {${3:expression}})

Prefix	Description
bbeo-array-filter	[array]: Filter the element of an array (size modification) -> array

${1:array}.filter(${2:element} => {${3:condition}})

Prefix	Description
bbeo-array-reduce	[array]: Processing each element of the array to obtain a single value -> number

${1:array}.reduce((${2:total, element}) => {${3:total + element}})

Prefix	Description
bbeo-array-fill	[array]: Fill an array with a static value -> array

${1:array}.fill(${2:start_index},${3:foo})

Prefix	Description
bbeo-array-foreach	[array]: Browse the elements of an array -> any

${1:array}.forEach((${2:element}) => {
    ${3:expression}
})

Prefix	Description
bbeo-array-indexOf	[array]: Find index of element

${1:array}.indexOf(${2:element})

Prefix	Description
bbeo-array-includes	[array]: Check the existence of an element

${1:array}.includes(${2:element})

Prefix	Description
bbeo-array-length	[array]: Length of array

${1:array}.length

Prefix	Description
bbeo-array-concat	[array]: Concatenate with another array

${1:array}.concat(${2:array})

Prefix	Description
bbeo-array-addToQueue	[array]: Add to queue -> array

${1:array}.push(${2:element})

Prefix	Description
bbeo-array-addToHead	[array]: Add to head -> array

${1:array}.unshift(${2:element})

Prefix	Description
bbeo-array-deleteAtTail	[array]: Delete at tail -> array

${1:array}.pop(${2:element})

Prefix	Description
bbeo-array-deleteAtHead	[array]: Delete at head -> array

${1:array}.shift(${2:element})

Prefix	Description
bbeo-array-findIndex	[array]: Find element index using findIndex -> number

${1:array}.findIndex(${2:element} => ${3:condition})

Prefix	Description
bbeo-array-removeAtIndex	[array]: Remove element at specific index -> array

${1:array}.splice(${2:index}, 1)

Prefix	Description
bbeo-array-sliceToEnd	[array]: Slice array from specific index to end -> array

${1:array}.slice(${2:index})

Prefix	Description
bbeo-array-insertAtIndex	[array]: Insert element at specific index -> array

${1:array}.splice(${2:index}, 0, ${3:element})

Prefix	Description
bbeo-array-allOfType	[array]: Check if array contains only specified type of elements -> boolean

${1:array}.every(${2:element} => typeof ${2:element} === '${3:type}')

Prefix	Description
bbeo-array-rotateRight	[array]: Rotate array elements to the right -> array

${1:array}.unshift(${1:array}.pop())

Prefix	Description
bbeo-array-groupBy	[array]: Group array elements by a criterion -> object

${1:array}.reduce((result, ${2:element}) => { (result[${3:condition}] = result[${3:condition}] || []).push(${2:element}); return result; }, {})

Prefix	Description
bbeo-array-removeByValue	[array]: Remove element by value -> array

${1:array}.filter(${2:element} => ${2:element} !== ${3:value})

Prefix	Description
bbeo-array-partition	[array]: Partition array into two based on a condition -> [array1, array2]

${1:array}.reduce((result, ${2:element}) => { result[${3:condition} ? 0 : 1].push(${2:element}); return result; }, [[], []])

↥ Back To Top

⚫ basic

Prefix	Description
bbeo-basic-permut	[basic]: Swap 2 values ​​from 2 variables

[${1:a},${2:b}] = [${2:b},${1:a}]

Prefix	Description
bbeo-basic-if	[basic]: Conditional statement

if (${1:condition}) {
    ${2:body}
}

Prefix	Description
bbeo-basic-if2	[basic]: Conditional statement 2

if (${1:condition1}) {
    ${3:body1}
} else (${2:condition2}) {
    ${4:body2}

Prefix	Description
bbeo-basic-if3	[basic]: Conditional statement 3

if (${1:condition1}) {
    ${3:body1}
} else if (${2:condition2}) {
    ${4:body2}
} else {
    ${5:body3}
}

Prefix	Description
bbeo-basic-ternary	[basic]: Ternary condition

${1:condition} ? ${2:expr1} : ${3:expr2}

Prefix	Description
bbeo-basic-ternary2	[basic]: Ternary condition 2

${1:condition} ? ${2:expr1} : ${3:condition2} ? ${4:expr2} : ${5:expr3}

Prefix	Description
bbeo-basic-ternary3	[basic]: Ternary condition 3

${1:condition} ? ${2:expr1} : ${3:condition2} ? ${4:expr2} : ${5:condition3} ? ${6:expr3} : ${7:expr4}

Prefix	Description
bbeo-basic-for	[basic]: For loop

for (let ${1:index} = 0; ${1:index} < ${2:array_length}; ${1:index}++) {
    ${3:body}
}

Prefix	Description
bbeo-basic-forIn	[basic]: For in loop

for (let ${1:e} in ${2:array}) {
    ${3:body}
}

Prefix	Description
bbeo-basic-forOf	[basic]: For of loop

for (let ${1:e} of ${2:array}) {
    ${3:body}
}

Prefix	Description
bbeo-basic-forEach	[basic]: For each loop

${2:array}.forEach((${1:e}) => {
    ${3:body}
});

Prefix	Description
bbeo-basic-while	[basic]: While loop

while (${1:condition}) {
    ${2:body}
}

Prefix	Description
bbeo-basic-doWhileLoop	[basic]: Do while loop

do {
    ${2:body}
} while (${1:condition});

Prefix	Description
bbeo-basic-switch	[basic]: Switch statement

switch (${1:condition}) {
    case ${2:condition}:
        ${3:body}
        break;
    default:
        ${4:body}
        break;
}

Prefix	Description
bbeo-basic-switch2	[basic]: Switch statement 2

switch (${1:condition}) {
    case ${2:condition}:
        ${4:body}
        break;
    case ${3:condition}:
        ${5:body}
        break;
    default:
        ${6:body}
        break;
}

Prefix	Description
bbeo-basic-switch3	undefined

switch (${1:condition}) {
    case ${2:condition}:
        ${5:body}
        break;
    case ${3:condition}:
        ${6:body}
        break;
    case ${4:condition}:
        ${7:body}
        break;
    default:
        ${8:body}
        break;
}

Prefix	Description
bbeo-basic-tryCatch	[basic]: Try catch statement

try {
    ${1:body}
} catch (${2:error}) {
    ${3:body}
}

Prefix	Description
bbeo-basic-tryCatchFinally	[basic]: Try catch finally statement

try {
    ${1:body}
} catch (${2:error}) {
    ${3:body}
} finally {
    ${4:body}
}

Prefix	Description
bbeo-basic-tryMultipleCatchFinally	[basic]: Try catch finally statement with multiple catch blocks

try {
    ${1:body}
} catch (${2:error}) {
    ${3:body}
} catch (${4:error}) {
    ${5:body}
} finally {
    ${6:body}
}

Prefix	Description
bbeo-basic-throw	[basic]: Throw an error

throw new Error(${1:message})

Prefix	Description
bbeo-basic-setTimeout	[basic]: Create setTimeout

setTimeout(() => {
    ${1:body}
}, ${2:delay})

Prefix	Description
bbeo-basic-setInterval	[basic]: Create setInterval

setInterval(() => {
    ${1:body}
}, ${2:delay})

↥ Back To Top

⚫ cast

Prefix	Description
bbeo-cast-objectToString1	[cast]: method 1 - Convert any object to string -> string

${1:object}.toString()

Prefix	Description
bbeo-cast-objectToString2	[cast]: method 2 - Convert any object to string -> string

String(${1:object})

Prefix	Description
bbeo-cast-stringToArray1	[cast]: method 1 - convert string to array -> array

Array.from(${1:string})

Prefix	Description
bbeo-cast-stringToArray2	[cast]: method 2 - convert string to array -> array

[... ${1:string}]

Prefix	Description
bbeo-cast-stringToArray3	[cast]: method 3 - convert string to array -> array

${1:string}.split()

Prefix	Description
bbeo-cast-stringToNumber1	[cast]: method 1 - convert string to number -> number

Number(${1:string})

Prefix	Description
bbeo-cast-stringToNumber2	[cast]: method 2 - convert string to number -> number

parseInt(${1:string})

Prefix	Description
bbeo-cast-hex2dec	[cast]: hex -> dec

+('0x'+ ${1:var})

Prefix	Description
bbeo-cast-dec2hex	[cast]: dec -> hex

${1:var}.toString(16)

Prefix	Description
bbeo-cast-oct2dec	[cast]: oct -> dec

parseInt(${1:var}, 8)

Prefix	Description
bbeo-cast-dec2oct	[cast]: dec -> oct

${1:var}.toString(8)

Prefix	Description
bbeo-cast-bin2dec	[cast]: bin -> dec

parseInt(${var}, 2)

Prefix	Description
bbeo-cast-dec2bin	[cast]: dec -> bin

${1:var}.toString(2)

Prefix	Description
bbeo-cast-jsonToString	[cast]: JSON to String

JSON.stringify(${1:json})

Prefix	Description
bbeo-cast-stringToJSON	[cast]: String to JSON

JSON.parse(${1:string})

Prefix	Description
bbeo-cast-dateToString	[cast]: Date to String

${1:date}.toISOString()

Prefix	Description
bbeo-cast-stringToDate	[cast]: String to Date

new Date(${1:string})

Prefix	Description
bbeo-cast-arrayToString	[cast]: Array to String

${1:array}.join(',')

Prefix	Description
bbeo-cast-stringToArray	[cast]: String to Array

${1:string}.split(',')

↥ Back To Top

⚫ class

Prefix	Description
bbeo-class-getter	[class]: Create getter

get ${1:property} () { return this.${1:property}; }

Prefix	Description
bbeo-class-setter	[class]: Create setter

set ${1:property} (${2:value}) { this.${1:property} = ${2:value}; }

Prefix	Description
bbeo-class-staticGetter	[class]: Create static getter

static get ${1:property} () { return this.${1:property}; }

Prefix	Description
bbeo-class-staticSetter	[class]: Create static setter

static set ${1:property} (${2:value}) { this.${1:property} = ${2:value}; }

Prefix	Description
bbeo-class-method	[class]: Create method

${1:name} () { ${2:body} }

Prefix	Description
bbeo-class-staticMethod	[class]: Create static method

static ${1:name} () { ${2:body} }

Prefix	Description
bbeo-class-constructor	[class]: Create constructor

constructor () { ${1:body} }

Prefix	Description
bbeo-class-staticProperty	[class]: Create static property

static ${1:property} = ${2:value}

Prefix	Description
bbeo-class-genClass	[class]: Generate class

class Circle extends Shape {
  
  // constructor
  constructor (radius) {
    this.radius = radius
  }
  
  // methods
   getArea () {
    return Math.PI * 2 * this.radius
  }
  
  // superclass
   expand (n) {
    return super.expand(n) * Math.PI
  }
  
  //static method
   static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}

↥ Back To Top

⚫ console

Prefix	Description
bbeo-console-clg	[console]: Display a message with console.log()

console.log(${1:object})

Prefix	Description
bbeo-console-clr	[console]: Display an error with console.error()

console.error(${1:object})

Prefix	Description
bbeo-console-clt	[console]: Display a table with console.table()

console.table(${1:object})

Prefix	Description
bbeo-console-cli	[console]: Display information with console.info()

console.info(${1:object})

Prefix	Description
bbeo-console-clw	[console]: Display a warning with console.warn()

console.warn(${1:object})

Prefix	Description
bbeo-console-cld	[console]: Display an object's properties with console.dir()

console.dir(${1:object})

Prefix	Description
bbeo-console-clc	[console]: Clear all messages with console.clear()

console.clear()

↥ Back To Top

⚫ date

Prefix	Description
bbeo-date-createNullDate	[date]: Create a date object (null args)

const ${1:date} = new Date()

Prefix	Description
bbeo-date-createFullDate	[date]: Create a date object (full args)

const ${1:date} = new Date(${2:year}, ${3:month}, ${4:day}, ${5:hour}, ${6:minute}, ${7:second}, ${8:millisecond})

Prefix	Description
bbeo-date-createStringDate	[date]: Create a date object (date string)

const ${1:date} = new Date(${2:date})

Prefix	Description
bbeo-date-now	[date]: Get current date

${1:date}.now()

Prefix	Description
bbeo-date-day	[date]: Get current day

${1:date}.getDay()

Prefix	Description
bbeo-date-month	[date]: Get current month

${1:date}.getMonth()

Prefix	Description
bbeo-date-year	[date]: Get current year

${1:date}.getFullYear()

Prefix	Description
bbeo-date-hour	[date]: Get current hour

${1:date}.getHours()

Prefix	Description
bbeo-date-minute	[date]: Get current minute

${1:date}.getMinutes()

Prefix	Description
bbeo-date-second	[date]: Get current second

${1:date}.getSeconds()

Prefix	Description
bbeo-date-millisecond	[date]: Get current millisecond

${1:date}.getMilliseconds()

Prefix	Description
bbeo-date-time	[date]: Get current time

${1:date}.getTime()

Prefix	Description
bbeo-date-toString	[date]: Get current date as string

${1:date}.toString()

Prefix	Description
bbeo-date-setDate	[date]: Set date

${1:date}.setDate(${2:date})

Prefix	Description
bbeo-date-setMonth	[date]: Set month

${1:date}.setMonth(${2:month})

Prefix	Description
bbeo-date-setYear	[date]: Set year

${1:date}.setFullYear(${2:year})

Prefix	Description
bbeo-date-setHour	[date]: Set hour

${1:date}.setHours(${2:hour})

Prefix	Description
bbeo-date-setMinute	[date]: Set minute

${1:date}.setMinutes(${2:minute})

Prefix	Description
bbeo-date-setSecond	[date]: Set second

${1:date}.setSeconds(${2:second})

Prefix	Description
bbeo-date-setMillisecond	[date]: Set millisecond

${1:date}.setMilliseconds(${2:millisecond})

Prefix	Description
bbeo-date-setTime	[date]: Set time

${1:date}.setTime(${2:time})

↥ Back To Top

⚫ destruct

Prefix	Description
bbeo-destruct-array	[destruct]: Destructuring assignment -> array

const [${1:var1}, ${2:var2}] = [${3:value1}, ${4:value2}]

Prefix	Description
bbeo-destruct-object	[destruct]: Object destructuring assignment -> object

const {${1:attrib1}, ${2:attrib2}} = ${3:object}

↥ Back To Top

⚫ dom

Prefix	Description
bbeo-dom-id	[dom]: Get element by id

document.getElementById(${1:id})

Prefix	Description
bbeo-dom-class	[dom]: Get element by class

document.getElementsByClassName(${1:class})

Prefix	Description
bbeo-dom-tag	[dom]: Get element by tag

document.getElementsByTagName(${1:tag})

Prefix	Description
bbeo-dom-query	[dom]: Get element by query

document.querySelector(${1:query})

Prefix	Description
bbeo-dom-queryAll	[dom]: Get element by query all

document.querySelectorAll(${1:query})

Prefix	Description
bbeo-dom-name	[dom]: Get element by name

document.getElementsByName(${1:name})

Prefix	Description
bbeo-dom-createHTMLElement	[dom]: Create html element of tag

document.createElement(${1:tag})

Prefix	Description
bbeo-dom-createTextNode	[dom]: Create text node

document.createTextNode(${1:text})

Prefix	Description
bbeo-dom-id-innerHTML	[dom]: Get element by id and set innerHTML

document.getElementById(${1:id}).innerHTML = ${2:html}

Prefix	Description
bbeo-dom-id-textContent	[dom]: Get element by id and set textContent

document.getElementById(${1:id}).textContent = ${2:text}

Prefix	Description
bbeo-dom-id-value	[dom]: Get element by id and set value

document.getElementById(${1:id}).value = ${2:value}

Prefix	Description
bbeo-dom-id-attribute	[dom]: Get element by id and set attribute

document.getElementById(${1:id}).setAttribute(${2:attribute}, ${3:value})

Prefix	Description
bbeo-dom-id-getAttribute	[dom]: Get element by id and get attribute

document.getElementById(${1:id}).getAttribute(${2:attribute})

Prefix	Description
bbeo-dom-id-removeAttribute	[dom]: Get element by id and remove attribute

document.getElementById(${1:id}).removeAttribute(${2:attribute})

Prefix	Description
bbeo-dom-id-addClass	[dom]: Get element by id and add class

document.getElementById(${1:id}).classList.add(${2:class})

Prefix	Description
bbeo-dom-id-removeClass	[dom]: Get element by id and remove class

document.getElementById(${1:id}).classList.remove(${2:class})

Prefix	Description
bbeo-dom-id-toggleClass	[dom]: Get element by id and toggle class

document.getElementById(${1:id}).classList.toggle(${2:class})

Prefix	Description
bbeo-dom-id-hasClass	[dom]: Get element by id and check class

document.getElementById(${1:id}).classList.contains(${2:class})

Prefix	Description
bbeo-dom-id-appendChild	[dom]: Get element by id and append child

document.getElementById(${1:id}).appendChild(${2:child})

Prefix	Description
bbeo-dom-id-removeChild	[dom]: Get element by id and remove child

document.getElementById(${1:id}).removeChild(${2:child})

Prefix	Description
bbeo-dom-id-insertBefore	[dom]: Get element by id and insert before

document.getElementById(${1:id}).insertBefore(${2:child}, ${3:reference})

Prefix	Description
bbeo-dom-id-insertAfter	[dom]: Get element by id and insert after

document.getElementById(${1:id}).insertBefore(${2:child}, ${3:reference}.nextSibling)

Prefix	Description
bbeo-dom-id-replaceChild	[dom]: Get element by id and replace child

document.getElementById(${1:id}).replaceChild(${2:child}, ${3:reference})

Prefix	Description
bbeo-dom-id-childNodes	[dom]: Get element by id and retrieve all child nodes

document.getElementById(${1:id}).childNodes

Prefix	Description
bbeo-dom-id-firstChild	[dom]: Get element by id and retrieve first child node

document.getElementById(${1:id}).firstChild

Prefix	Description
bbeo-dom-id-lastChild	[dom]: Get element by id and retrieve last child node

document.getElementById(${1:id}).lastChild

Prefix	Description
bbeo-dom-id-parentNode	[dom]: Get element by id and retrieve parent node

document.getElementById(${1:id}).parentNode

Prefix	Description
bbeo-dom-id-addEventListener	[dom]: Get element by id and add event listener

document.getElementById(${1:id}).addEventListener(${2:click, 'keypress, scroll, mouseenter, mouseout, input, submit, load'}, ${3:callback})

Prefix	Description
bbeo-dom-eventTargetValue	[dom]: Get target value from event

${1:e}.target.value

Prefix	Description
bbeo-dom-id-addEventListenerWithpreventDefault	[dom]: Get element by id and add event listener with prevent default

document.getElementById(${1:id}).addEventListener(${2:'submit'}, ${3:e} => {
    ${3:e}.preventDefault()
})

Prefix	Description
bbeo-dom-id-addEventListenerWithstopPropagation	[dom]: Get element by id and add event listener with stop propagation

document.getElementById(${1:id}).addEventListener(${2:click, 'keypress, scroll, mouseenter, mouseout, input, submit, load'}, ${3:e} => {
    ${3:e}.stopPropagation()
})

↥ Back To Top

⚫ function

Prefix	Description
bbeo-function-arrow	[function]: Create arrow function

const ${1:func_name} = (${2:args}) => {
  ${3:code...}
}

Prefix	Description
bbeo-function-function	[function]: Create function

function ${1:func_name} (${2:args}) {
  ${3:code...}
}

Prefix	Description
bbeo-function-asyncArrow	[function]: Create async arrow function

const ${1:func_name} = async (${2:args}) => {
  ${3:code...}
}

Prefix	Description
bbeo-function-async	[function]: Create async function

async function ${1:func_name} (${2:args}) {
  ${3:code...}
}

Prefix	Description
bbeo-function-anon	[function]: Create anonymous function

(${1:args}) => {
  ${2:code...}
}

↥ Back To Top

⚫ math

Prefix	Description
bbeo-math-fixedDot	[math]: Format a number in fixed-dot notation -> number

${1:number}.toFixed(${2:decal})

Prefix	Description
bbeo-math-pow	[math]: Power of number

${1:number} ** ${2:exp}

Prefix	Description
bbeo-math-max	[math]: Get MAX element

Math.max(... ${1: element})

Prefix	Description
bbeo-math-min	[math]: Get MIN element

Math.min(... ${1: element})

Prefix	Description
bbeo-math-expOfNumber	[math]: Get exponent of a number

Math.log(${1:number})/Math.log(${2:base})

Prefix	Description
bbeo-math-sqrt	[math]: Get square of a number

Math.sqrt(${1:number})

Prefix	Description
bbeo-math-abs	[math]: Get absolute value of a number

Math.abs(${1:number})

Prefix	Description
bbeo-math-round	[math]: Get round value of a number

Math.round(${1:number})

Prefix	Description
bbeo-math-ceil	[math]: Get ceil value of a number

Math.ceil(${1:number})

Prefix	Description
bbeo-math-floor	[math]: Get floor value of a number

Math.floor(${1:number})

Prefix	Description
bbeo-math-random	[math]: Get random value between 0 and 1

Math.random()

Prefix	Description
bbeo-math-random-max	[math]: Get random value between 0 and max

Math.floor(Math.random() * ${1:max})

Prefix	Description
bbeo-math-random-minMax	[math]: Get random value between min and max

Math.floor(Math.random() * (${1:max} - ${2:min}) + ${2:min})

Prefix	Description
bbeo-math-pi	[math]: Get PI value

Math.PI

Prefix	Description
bbeo-math-e	[math]: Get E value

Math.E

Prefix	Description
bbeo-math-ln2	[math]: Get LN2 value

Math.LN2

Prefix	Description
bbeo-math-ln10	[math]: Get LN10 value

Math.LN10

↥ Back To Top

⚫ object

Prefix	Description
bbeo-object-extractValues	[object]: Extract objecy values

Object.values(${1:object})

Prefix	Description
bbeo-object-extractEntries	[object]: Extract object entries

Object.entries(${1:object})

Prefix	Description
bbeo-object-length	[object]: Get object length

Object.keys(${1:object}).length

↥ Back To Top

⚫ pattern

Prefix	Description
bbeo-pattern-array-1-all	[pattern]: This snippet returns if the predicate function returns for all elements in a collection and otherwise. You can omit the second argument if you want to use as a default value

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

Prefix	Description
bbeo-pattern-array-2-allEqual	[pattern]: This snippet checks whether all elements of the array are equal

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

Prefix	Description
bbeo-pattern-math-3-approximatelyEqual	[pattern]: This snippet checks whether two numbers are approximately equal to each other, with a small difference

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

Prefix	Description
bbeo-pattern-cast-4-arrayToCSV	[pattern]: This snippet converts the elements to strings with comma-separated values

const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
  
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'```

Prefix	Description
bbeo-pattern-cast-5-arrayToHtmlList	[pattern]: This snippet converts the elements of an array into tags and appends them to the list of the given ID

const arrayToHtmlList = (arr, listID) =>
  (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();
  
arrayToHtmlList(['item 1', 'item 2'], 'myListID');

Prefix	Description
bbeo-pattern-func-6-attempt	[pattern]: This snippet executes a function, returning either the result or the caught error object

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

Prefix	Description
bbeo-pattern-array-7-average	[pattern]: This snippet returns the average of two or more numerical values

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

Prefix	Description
bbeo-pattern-mixte-8-averageBy	[pattern]: This snippet returns the average of an array after initially doing the mapping of each element to a value using a given function

const averageBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
  arr.length;
  
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

Prefix	Description
bbeo-pattern-array-9-bifurcate	[pattern]: This snippet splits values into two groups and then puts a truthy element of in the first group, and in the second group otherwise

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

Prefix	Description
bbeo-pattern-array-10-bifurcateBy	[pattern]: This snippet splits values into two groups, based on a predicate function. If the predicate function returns a truthy value, the element will be placed in the first group. Otherwise, it will be placed in the second group

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
  
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

Prefix	Description
bbeo-pattern-dom-11-bottomVisible	[pattern]: This snippet checks whether the bottom of a page is visible

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

bottomVisible(); // true

Prefix	Description
bbeo-pattern-cast-12-byteSize	[pattern]: This snippet returns the length of a string in bytes

const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11

Prefix	Description
bbeo-pattern-string-13-capitalize	[pattern]: This snippet capitalizes the first letter of a string

const capitalize = ([first, ...rest]) =>
  first.toUpperCase() + rest.join('');
  
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'

Prefix	Description
bbeo-pattern-string-14-capitalizeEveryWord	[pattern]: This snippet capitalizes the first letter of every word in a given string

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

capitalizeEveryWord('hello world!'); // 'Hello World!'

Prefix	Description
bbeo-pattern-cast-15-castArray	[pattern]: This snippet converts a non-array value into array

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

Prefix	Description
bbeo-pattern-array-16-compact	[pattern]: This snippet removes false values from an array

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

Prefix	Description
bbeo-pattern-array-17-countOccurrences	[pattern]: This snippet counts the occurrences of a value in an array

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

Prefix	Description
bbeo-pattern-lib-18-createDirIfNotExists	[pattern]: This snippet uses to check whether a directory exists and then to create it if it doesn’t

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test'); 
// creates the directory 'test', if it doesn't exist

Prefix	Description
bbeo-pattern-bom-19-currentURL	[pattern]: This snippet returns the current URL

const currentURL = () => window.location.href;

currentURL(); // 'https://medium.com/@fatosmorina'

Prefix	Description
bbeo-pattern-date-20-dayOfYear	[pattern]: This snippet gets the day of the year from a object

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

Prefix	Description
bbeo-pattern-string-21-decapitalize	[pattern]: This snippet turns the first letter of a string into lowercase

const decapitalize = ([first, ...rest]) =>
  first.toLowerCase() + rest.join('')

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'

Prefix	Description
bbeo-pattern-array-22-deepFlatten	[pattern]: This snippet flattens an array recursively

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

Prefix	Description
bbeo-pattern-object-23-default	[pattern]: This snippet assigns default values for all properties in an object that are

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

Prefix	Description
bbeo-pattern-func-24-defer	[pattern]: This snippet delays the execution of a function until the current call stack is cleared

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);

defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

Prefix	Description
bbeo-pattern-cast-25-degreesToRads	[pattern]: This snippet can be used to convert a value from degrees to radians

const degreesToRads = deg => (deg * Math.PI) / 180.0;

degreesToRads(90.0); // ~1.5708

Prefix	Description
bbeo-pattern-array-26-difference	[pattern]: This snippet finds the difference between two arrays

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};

difference([1, 2, 3], [1, 2, 4]); // [3]

Prefix	Description
bbeo-pattern-mixte-27-differenceBy	[pattern]: This snippet returns the difference between two arrays, after applying a given function to each element of both lists

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => !s.has(fn(x)));
};

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

Prefix	Description
bbeo-pattern-array-28-differenceWith	[pattern]: This snippet removes the values for which the comparator function returns

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]

Prefix	Description
bbeo-pattern-cast-29-digitize	[pattern]: This snippet gets a number as input and returns an array of its digits

const digitize = n => [...`${n}`].map(i => parseInt(i));

digitize(431); // [4, 3, 1]

Prefix	Description
bbeo-pattern-math-30-distance	[pattern]: This snippet returns the distance between two points by calculating the Euclidean distance

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

distance(1, 1, 2, 3); // 2.23606797749979

Prefix	Description
bbeo-pattern-array-31-DropLeft	[pattern]: This snippet returns a new array with elements removed from the left

const dropLeft = (arr, n = 1) => arr.slice(n);

dropLeft([1, 2, 3]); // [2,3]
dropLeft([1, 2, 3], 2); // [3]
dropLeft([1, 2, 3], 42); // []

Prefix	Description
bbeo-pattern-array-32-dropRight	[pattern]: This snippet returns a new array with elements removed 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); // []

Prefix	Description
bbeo-pattern-array-33-dropRightWhile	[pattern]: This snippet removes elements from the right side of an array until the passed function returns

const dropRightWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
  return arr;
};

dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

Prefix	Description
bbeo-pattern-array-34-dropWhile	[pattern]: This snippet removes elements from an array until the passed function returns

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};

dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]

Prefix	Description
bbeo-pattern-dom-35-elementContains	[pattern]: This snippet checks whether the parent element contains the child

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

Prefix	Description
bbeo-pattern-array-36-Filter Duplicate Elements	[pattern]: This snippet removes duplicate values in an array

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]

Prefix	Description
bbeo-pattern-object-37-findKey	[pattern]: This snippet returns the first key that satisfies a given function

const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));

findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  o => o['active']
); // 'barney'

Prefix	Description
bbeo-pattern-array-38-findLast	[pattern]: This snippet returns the last element for which a given function returns a truthy value

const findLast = (arr, fn) => arr.filter(fn).pop();

findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

Prefix	Description
bbeo-pattern-array-39-flatten	[pattern]: This snippet flattens an array up to a specified depth using recursion

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

Prefix	Description
bbeo-pattern-array-40-forEachRight	[pattern]: This snippet executes a function for each element of an array starting from the array’s last element

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);
    
forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

Prefix	Description
bbeo-pattern-object-41-forOwn	[pattern]: This snippet iterates on each property of an object and iterates a callback for each one respectively

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

Prefix	Description
bbeo-pattern-func-42-functionName	[pattern]: This snippet prints the name of a function into the console

const functionName = fn => (console.debug(fn.name), fn);

functionName(Math.max); // max (logged in debug channel of console)

Prefix	Description
bbeo-pattern-date-43-Get Time From Date	[pattern]: This snippet can be used to get the time from a object as a string

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"

Prefix	Description
bbeo-pattern-date-44-Get Days Between Dates	[pattern]: This snippet can be used to find the difference in days between two dates

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);
  
getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

Prefix	Description
bbeo-pattern-dom-45-getStyle	[pattern]: This snippet can be used to get the value of a CSS rule for a particular element

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

Prefix	Description
bbeo-pattern-test-46-getType	[pattern]: This snippet can be used to get the type of a value

const getType = v =>
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
  
getType(new Set([1, 2, 3])); // 'set'

Prefix	Description
bbeo-pattern-dom-47-hasClass	[pattern]: This snippet checks whether an element has a particular class

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

Prefix	Description
bbeo-pattern-array-48-head	[pattern]: This snippet returns the of a list

const head = arr => arr[0];

head([1, 2, 3]); // 1

Prefix	Description
bbeo-pattern-dom-49-hide	[pattern]: This snippet can be used to hide all elements specified

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

Prefix	Description
bbeo-pattern-bom-50-httpsRedirect	[pattern]: This snippet can be used to redirect from HTTP to HTTPS in a particular domain

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

Prefix	Description
bbeo-pattern-array-51-indexOfAll	[pattern]: This snippet can be used to get all indexes of a value in an array, which returns an empty array, in case this value is not included in it

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); // []

Prefix	Description
bbeo-pattern-array-52-initial	[pattern]: This snippet returns all elements of an array except the last one

const initial = arr => arr.slice(0, -1);

initial([1, 2, 3]); // [1,2]const initial = arr => arr.slice(0, -1);
initial([1, 2, 3]); // [1,2]

Prefix	Description
bbeo-pattern-dom-53-insertAfter	[pattern]: This snippet can be used to insert an HTML string after the end of a particular element

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>

Prefix	Description
bbeo-pattern-dom-54-insertBefore	[pattern]: This snippet can be used to insert an HTML string before a particular element

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

Prefix	Description
bbeo-pattern-array-55-intersection	[pattern]: This snippet can be used to get an array with elements that are included in two other arrays

const intersection = (a, b) => {
  const s = new Set(b);
  return a.filter(x => s.has(x));
};

intersection([1, 2, 3], [4, 3, 2]); // [2, 3]

Prefix	Description
bbeo-pattern-array-56-intersectionBy	[pattern]: This snippet can be used to return a list of elements that exist in both arrays, after a particular function has been executed to each element of both arrays

const intersectionBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => s.has(fn(x)));
};

intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]

Prefix	Description
bbeo-pattern-array-57-intersectionWith	[pattern]: This snippet can be used to return a list of elements that exist in both arrays by using a comparator function

const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);

intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]

Prefix	Description
bbeo-pattern-test-58-is	[pattern]: This snippet can be used to check if a value is of a particular type

const is = (type, val) => ![, null].includes(val) && val.constructor === type;

is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true

Prefix	Description
bbeo-pattern-test-59-isAfterDate	[pattern]: This snippet can be used to check whether a date is after another date

const isAfterDate = (dateA, dateB) => dateA > dateB;

isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true

Prefix	Description
bbeo-pattern-test-60-isAnagram	[pattern]: This snippet can be used to check whether a particular string is an anagram with another string

const isAnagram = (str1, str2) => {
  const normalize = str =>
    str
      .toLowerCase()
      .replace(/[^a-z0-9]/gi, '')
      .split('')
      .sort()
      .join('');
  return normalize(str1) === normalize(str2);
};

isAnagram('iceman', 'cinema'); // true

Prefix	Description
bbeo-pattern-test-61-isArrayLike	[pattern]: This snippet can be used to check if a provided argument is iterable like an array

const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';

isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false

Prefix	Description
bbeo-pattern-test-62-isBeforeDate	[pattern]: This snippet can be used to check whether a date is before another date

const isBeforeDate = (dateA, dateB) => dateA < dateB;

isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true

Prefix	Description
bbeo-pattern-test-63-isBoolean	[pattern]: This snippet can be used to check whether an argument is a boolean

const isBoolean = val => typeof val === 'boolean';

isBoolean(null); // false
isBoolean(false); // true

Prefix	Description
bbeo-pattern-test-64-isBrowser	[pattern]: This snippet can be used to determine whether the current runtime environment is a browser. This is helpful for avoiding errors when running front-end modules on the server (Node)

const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // true (browser)
isBrowser(); // false (Node)

Prefix	Description
bbeo-pattern-test-65-isBrowserTabFocused	[pattern]: This snippet can be used to determine whether the browser tab is focused

const isBrowserTabFocused = () => !document.hidden;

isBrowserTabFocused(); // true

Prefix	Description
bbeo-pattern-test-66-isLowerCase	[pattern]: This snippet can be used to determine whether a string is lower case

const isLowerCase = str => str === str.toLowerCase();

isLowerCase('abc'); // true
isLowerCase('a3@$'); // true
isLowerCase('Ab4'); // false

Prefix	Description
bbeo-pattern-test-67-isNil	[pattern]: This snippet can be used to check whether a value is or

const isNil = val => val === undefined || val === null;

isNil(null); // true
isNil(undefined); // true

Prefix	Description
bbeo-pattern-test-68-isNull	[pattern]: This snippet can be used to check whether a value is

const isNull = val => val === null;

isNull(null); // true

Prefix	Description
bbeo-pattern-test-69-isNumber	[pattern]: This snippet can be used to check whether a provided value is a number

const isNumber = val => typeof val === 'number';

isNumber('1'); // false
isNumber(1); // true

Prefix	Description
bbeo-pattern-test-70-isObject	[pattern]: This snippet can be used to check whether a provided value is an object. It uses the Object constructor to create an object wrapper for 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

Prefix	Description
bbeo-pattern-test-71-isObjectLike	[pattern]: This snippet can be used to check if a value is not and that its is “object”

const isObjectLike = val => val !== null && typeof val === 'object';

isObjectLike({}); // true
isObjectLike([1, 2, 3]); // true
isObjectLike(x => x); // false
isObjectLike(null); // false

Prefix	Description
bbeo-pattern-test-72-isPlainObject	[pattern]: This snippet checks whether a value is an object created by the Object constructor

const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object;

isPlainObject({ a: 1 }); // true
isPlainObject(new Map()); // false

Prefix	Description
bbeo-pattern-test-73-isPromiseLike	[pattern]: This snippet checks whether an object looks like a

const isPromiseLike = obj =>
  obj !== null &&
  (typeof obj === 'object' || typeof obj === 'function') &&
  typeof obj.then === 'function';
  
isPromiseLike({
  then: function() {
    return '';
  }
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false

Prefix	Description
bbeo-pattern-test-74-isSameDate	[pattern]: This snippet can be used to check whether two dates are equal

const isSameDate = (dateA, dateB) => dateA.toISOString() === dateB.toISOString();

isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true

Prefix	Description
bbeo-pattern-test-75-isString	[pattern]: This snippet can be used to check whether an argument is a string

const isString = val => typeof val === 'string';

isString('10'); // true

Prefix	Description
bbeo-pattern-test-76-isSymbol	[pattern]: This snippet can be used to check whether an argument is a symbol

const isSymbol = val => typeof val === 'symbol';

isSymbol(Symbol('x')); // true

Prefix	Description
bbeo-pattern-test-77-isUndefined	[pattern]: This snippet can be used to check whether a value is undefined

const isUndefined = val => val === undefined;

isUndefined(undefined); // true

Prefix	Description
bbeo-pattern-test-78-isUpperCase	[pattern]: This snippet can be used to check whether a string is upper case

const isUpperCase = str => str === str.toUpperCase();

isUpperCase('ABC'); // true
isLowerCase('A3@$'); // true
isLowerCase('aB4'); // false

Prefix	Description
bbeo-pattern-test-79-isValidJSON	[pattern]: This snippet can be used to check whether a string is a valid JSON

const isValidJSON = str => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};

isValidJSON('{"name":"Adam","age":20}'); // true
isValidJSON('{"name":"Adam",age:"20"}'); // false
isValidJSON(null); // true

Prefix	Description
bbeo-pattern-array-80-last	[pattern]: This snippet returns the last element of an array

const last = arr => arr[arr.length - 1];

last([1, 2, 3]); // 3

Prefix	Description
bbeo-pattern-object-81-matches	[pattern]: This snippet compares two objects to determine if the first one contains the same property values as the second one

const matches = (obj, source) =>
  Object.keys(source).every(key => obj.hasOwnProperty(key) && obj[key] === source[key]);
  
matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true }); // true
matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true }); // false

Prefix	Description
bbeo-pattern-date-82-maxDate	[pattern]: This snippet can be used to get the latest date

const maxDate = (...dates) => new Date(Math.max.apply(null, ...dates));

const array = [
  new Date(2017, 4, 13),
  new Date(2018, 2, 12),
  new Date(2016, 0, 10),
  new Date(2016, 0, 9)
];
maxDate(array); // 2018-03-11T22:00:00.000Z

Prefix	Description
bbeo-pattern-array-83-maxN	[pattern]: This snippet returns the largest elements from a list. If is greater than or equal to the list’s length, then it will return the original list (sorted in descending order)

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]

Prefix	Description
bbeo-pattern-date-84-minDate	[pattern]: This snippet can be used to get the earliest date

const minDate = (...dates) => new Date(Math.min.apply(null, ...dates));

const array = [
  new Date(2017, 4, 13),
  new Date(2018, 2, 12),
  new Date(2016, 0, 10),
  new Date(2016, 0, 9)
];
minDate(array); // 2016-01-08T22:00:00.000Z

Prefix	Description
bbeo-pattern-array-85-minN	[pattern]: This snippet returns the smallest elements from a list. If is greater than or equal to the list’s length, then it will return the original list (sorted in ascending order)

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]

Prefix	Description
bbeo-pattern-func-86-negate	[pattern]: This snippet can be used to apply the not operator () to a predicate function with its arguments

const negate = func => (...args) => !func(...args);

[1, 2, 3, 4, 5, 6].filter(negate(n => n % 2 === 0)); // [ 1, 3, 5 ]

Prefix	Description
bbeo-pattern-dom-87-nodeListToArray	[pattern]: This snippet can be used to convert a to an array

const nodeListToArray = nodeList => [...nodeList];

nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]

Prefix	Description
bbeo-pattern-string-88-pad	[pattern]: This snippet can be used to a string on both sides with a specified character if it is shorter than the specified length

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'
pad('foobar', 3); // 'foobar'

Prefix	Description
bbeo-pattern-cast-89-radsToDegrees	[pattern]: This snippet can be used to convert an angle from radians to degrees

const radsToDegrees = rad => (rad * 180.0) / Math.PI;

radsToDegrees(Math.PI / 2); // 90

Prefix	Description
bbeo-pattern-gen-90-randomHexColorCode	[pattern]: This snippet can be used to generate a random hexadecimal color code

const randomHexColorCode = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

randomHexColorCode(); // "#e34155"

Prefix	Description
bbeo-pattern-gen-91-randomIntArrayInRange	[pattern]: This snippet can be used to generate an array with random integers in a specified range

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 ]

Prefix	Description
bbeo-pattern-gen-92-randomIntegerInRange	[pattern]: This snippet can be used to generate a random integer in a specified range

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

randomIntegerInRange(0, 5); // 3

Prefix	Description
bbeo-pattern-gen-93-randomNumberInRange	[pattern]: This snippet can be used to return a random number in a specified range

const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;

randomNumberInRange(2, 10); // 6.0211363285087005

Prefix	Description
bbeo-pattern-lib-94-readFileLines	[pattern]: This snippet can be used to read a file by getting an array of lines from a file

const fs = require('fs');
const readFileLines = filename =>
  fs
    .readFileSync(filename)
    .toString('UTF8')
    .split('\n');

let arr = readFileLines('test.txt');
console.log(arr); // ['line1', 'line2', 'line3']

Prefix	Description
bbeo-pattern-bom-95-redirect	[pattern]: This snippet can be used to do a redirect to a specified URL

const redirect = (url, asLink = true) =>
  asLink ? (window.location.href = url) : window.location.replace(url);
  
redirect('https://google.com');

Prefix	Description
bbeo-pattern-string-96-reverse	[pattern]: This snippet can be used to reverse a string

const reverseString = str => [...str].reverse().join('');

reverseString('foobar'); // 'raboof'

Prefix	Description
bbeo-pattern-math-97-round	[pattern]: This snippet can be used to round a number to a specified number of digits

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);

round(1.005, 2); // 1.01

Prefix	Description
bbeo-pattern-promise-98-runPromisesInSeries	[pattern]: This snippet can be used to run an array of promises in series

const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
const delay = d => new Promise(r => setTimeout(r, d));

runPromisesInSeries([() => delay(1000), () => delay(2000)]); 
// Executes each promise sequentially, taking a total of 3 seconds to complete

Prefix	Description
bbeo-pattern-array-99-sample	[pattern]: This snippet can be used to get a random number from an array

const sample = arr => arr[Math.floor(Math.random() * arr.length)];

sample([3, 7, 9, 11]); // 9

Prefix	Description
bbeo-pattern-array-100-sampleSize	[pattern]: This snippet can be used to get random elements from unique positions from an array up to the size of the array. Elements in the array are shuffled using the

const sampleSize = ([...arr], n = 1) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr.slice(0, n);
};

sampleSize([1, 2, 3], 2); // [3,1]
sampleSize([1, 2, 3], 4); // [2,3,1]

Prefix	Description
bbeo-pattern-dom-101-scrollToTop	[pattern]: This snippet can be used to do a smooth scroll to the top of the current page

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

Prefix	Description
bbeo-pattern-string-102-serializeCookie	[pattern]: This snippet can be used to serialize a cookie name-value pair into a Set-Cookie header string

const serializeCookie = (name, val) => `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;

serializeCookie('foo', 'bar'); // 'foo=bar'

Prefix	Description
bbeo-pattern-dom-103-setStyle	[pattern]: This snippet can be used to set the value of a CSS rule for a particular element

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

Prefix	Description
bbeo-pattern-gen-104-shallowClone	[pattern]: This snippet can be used to create a shallow clone of an object

const shallowClone = obj => Object.assign({}, obj);

const a = { x: true, y: 1 };
const b = shallowClone(a); // a !== b

Prefix	Description
bbeo-pattern-dom-105-show	[pattern]: This snippet can be used to show all the elements specified

const show = (...el) => [...el].forEach(e => (e.style.display = ''));

show(...document.querySelectorAll('img')); // Shows all <img> elements on the page

Prefix	Description
bbeo-pattern-array-106-shuffle	[pattern]: This snippet can be used to order the elements of an array randomly using the

const shuffle = ([...arr]) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr;
};

const foo = [1, 2, 3];
shuffle(foo); // [2, 3, 1], foo = [1, 2, 3]

Prefix	Description
bbeo-pattern-array-107-similarity	[pattern]: This snippet can be used to return an array of elements that appear in two arrays

const similarity = (arr, values) => arr.filter(v => values.includes(v))

similarity([1, 2, 3], [1, 2, 4]); // [1, 2]

Prefix	Description
bbeo-pattern-promise-108-sleep	[pattern]: This snippet can be used to delay the execution of an asynchronous function by putting it into sleep

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function sleepyWork() {
  console.log("I'm going to sleep for 1 second.");
  await sleep(1000);
  console.log('I woke up after 1 second.');
}

Prefix	Description
bbeo-pattern-dom-109-smoothScroll	[pattern]: This snippet can be used to smoothly scroll the element on which it is called into the visible area of the browser window

const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });
  
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar

Prefix	Description
bbeo-pattern-string-110-sortCharactersInString	[pattern]: This snippet can be used to alphabetically sort the characters in a string

const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');

sortCharactersInString('cabbage'); // 'aabbceg'

Prefix	Description
bbeo-pattern-cast-111-splitLines	[pattern]: This snippet can be used to split a multi-line string into an array of lines

const splitLines = str => str.split(/\r?\n/);

splitLines('This\nis a\nmultiline\nstring.\n'); // ['This', 'is a', 'multiline', 'string.' , '']

Prefix	Description
bbeo-pattern-dom-112-stripHTMLTags	[pattern]: This snippet can be used 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'

Prefix	Description
bbeo-pattern-array-113-sum	[pattern]: This snippet can be used to find the sum of two or more numbers or arrays

const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);

sum(1, 2, 3, 4); // 10
sum(...[1, 2, 3, 4]); // 10

Prefix	Description
bbeo-pattern-array-114-tail	[pattern]: This snippet can be used to get an array with all the elements of an array except for the first one. If the array has only one element, then that an array with that element will be returned instead

const tail = arr => (arr.length > 1 ? arr.slice(1) : arr);

tail([1, 2, 3]); // [2,3]
tail([1]); // [1]

Prefix	Description
bbeo-pattern-array-115-take	[pattern]: This snippet can be used to get an array with elements removed 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); // []

Prefix	Description
bbeo-pattern-array-116-takeRight	[pattern]: This snippet can be used to get an array with elements removed from the end

const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);

takeRight([1, 2, 3], 2); // [ 2, 3 ]
takeRight([1, 2, 3]); // [3]

Prefix	Description
bbeo-pattern-func-117-timeTaken	[pattern]: This snippet can be used to find out the time it takes to execute a function

const timeTaken = callback => {
  console.time('timeTaken');
  const r = callback();
  console.timeEnd('timeTaken');
  return r;
};

timeTaken(() => Math.pow(2, 10)); // 1024, (logged): timeTaken: 0.02099609375ms

Prefix	Description
bbeo-pattern-func-118-times	[pattern]: This snippet can be used to iterate over a callback times

const times = (n, fn, context = undefined) => {
  let i = 0;
  while (fn.call(context, i) !== false && ++i < n) {}
};

var output = '';
times(5, i => (output += i));
console.log(output); // 01234

Prefix	Description
bbeo-pattern-cast-119-toCurrency	[pattern]: This snippet can be used to format a number like a currency

const toCurrency = (n, curr, LanguageFormat = undefined) =>
  Intl.NumberFormat(LanguageFormat, { style: 'currency', currency: curr }).format(n);
  
toCurrency(123456.789, 'EUR'); // €123,456.79  | currency: Euro | currencyLangFormat: Local
toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79  | currency: US Dollar | currencyLangFormat: English (United States)
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

Prefix	Description
bbeo-pattern-cast-120-toDecimalMark	[pattern]: This snippet uses the function to convert float-point arithmetic to the decimal mark form by using a number to make a comma-separated string

const toDecimalMark = num => num.toLocaleString('en-US');

toDecimalMark(12305030388.9087); // "12,305,030,388.909"

Prefix	Description
bbeo-pattern-dom-121-toggleClass	[pattern]: This snippet can be used to toggle a class for an element

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore

Prefix	Description
bbeo-pattern-date-122-tomorrow	[pattern]: This snippet can be used to get a string representation of tomorrow’s date

const tomorrow = () => {
  let t = new Date();
  t.setDate(t.getDate() + 1);
  return t.toISOString().split('T')[0];
};

tomorrow(); // 2019-09-08 (if current date is 2018-09-08)

Prefix	Description
bbeo-pattern-func-123-unfold	[pattern]: This snippet can be used to build an array using an iterator function and an initial seed value

const unfold = (fn, seed) => {
  let result = [],
    val = [null, seed];
  while ((val = fn(val[1]))) result.push(val[0]);
  return result;
};

var f = n => (n > 50 ? false : [-n, n + 10]);
unfold(f, 10); // [-10, -20, -30, -40, -50]

Prefix	Description
bbeo-pattern-array-124-union	[pattern]: This snippet can be used to find the of two arrays, resulting in an array that has elements that come from both arrays but that do not repeat

const union = (a, b) => Array.from(new Set([...a, ...b]));

union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]

Prefix	Description
bbeo-pattern-array-125-uniqueElements	[pattern]: This snippet uses ES6 andtheoperator to get every element only once

const uniqueElements = arr => [...new Set(arr)];

uniqueElements([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]

Prefix	Description
bbeo-pattern-test-126-validateNumber	[pattern]: This snippet can be used to check whether a value is a number

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;

validateNumber('10'); // true

Prefix	Description
bbeo-pattern-cast-127-words	[pattern]: This snippet converts a string into an array of words

const words = (str, pattern = /[^a-zA-Z-]+/) => str.split(pattern).filter(Boolean);

words('I love javaScript!!'); // ["I", "love", "javaScript"]
words('python, javaScript & coffee'); // ["python", "javaScript", "coffee"]

↥ Back To Top

⚫ regex

Prefix	Description
bbeo-regex-numExtract	[regex]: Extract number in string

${1:string}.match(/\d/g);

Prefix	Description
bbeo-regex-occTotal	[regex]: Get total occurrence of argument in string

const ${1:string} = ${2:value};
const ${3:occ_name} = (${1:string}.match(/${4:arg}/g) || []).length;

Prefix	Description
bbeo-regex-ifExist	[regex]: {arg} must be present from {string}

${1:string}.match(/${2:arg}/);

Prefix	Description
bbeo-regex-startOf	[regex]: Start of {arg}

${1:string}.match(/^${2:arg}/);

Prefix	Description
bbeo-regex-endOf	[regex]: End of {arg}

${1:string}.match(/${2:arg}$/);

Prefix	Description
bbeo-regex-ifExistOR	[regex]: {a} OR {b} must be present from {string}

${1:string}.match(/${2:a}|${3:b}/);

↥ Back To Top

⚫ spread

Prefix	Description
bbeo-spread-mergeArrays	[spread]: Merge several arrays (concat() alternative) -> array

[...${1:array1}, ...${2:array2}]

Prefix	Description
bbeo-spread-mergeObjects	[spread]: Merge several objects (Object.assign() alternative) -> object

{...${1:object1}, ...${2:object2}}

Prefix	Description
bbeo-spread-removeDuplicates	[spread]: Remove duplicates from an array -> array

[...new Set(${1:array})]

Prefix	Description
bbeo-spread-addProp	[spread]: Add a new prop/value to an existing object -> object

{...${1:object}, ${2:newProp}: ${3:foo}}

↥ Back To Top

⚫ string

Prefix	Description
bbeo-string-replace	[string]: Replace single occurrence of value -> string

${1:string}.replace(${2:'input'}, ${3:'output'})

Prefix	Description
bbeo-string-replaceAll	[string]: Replace all occurrences of value -> string

${1:string}.replaceAll(${2:'input'}, ${3:'output'})

Prefix	Description
bbeo-string-split	[string]: Split string into array -> array

${1:string}.split(${2:'delimiter'})

Prefix	Description
bbeo-string-sub	[string]: Split a string [start, end+1] -> string

${1:string}.substr(${2:start}, ${3:end+1})

Prefix	Description
bbeo-string-repeat	[string]: Repeat a string N times -> string

${1:string}.repeat(${2:N})

Prefix	Description
bbeo-string-trim	[string]: Remove the white space at the beginning and at the end of a string -> string

${1:string}.trim()

Prefix	Description
bbeo-string-charAt	[string]: Get charAt index -> string

${1:string}.charAt(${2:index})

Prefix	Description
bbeo-string-startsWith	[string]: Check start of a string -> boolean

${1:string}.startsWith(${2:input}, ${3:start_index})

Prefix	Description
bbeo-string-endsWith	[string]: Check end of a string -> boolean

${1:string}.endsWith(${2:input}, ${3:end_index})

Prefix	Description
bbeo-string-toLowerCase	[string]: String to lower case -> string

${1:string}.toLowerCase()

Prefix	Description
bbeo-string-toUpperCase	[string]: String to upper case -> string

${1:string}.toUpperCase()

Prefix	Description
bbeo-string-indexOfElement	[string]: Find index of element -> number

${1:string}.indexOf(${2:e})

Prefix	Description
bbeo-string-includesElement	[string]: Check the existence of an element

${1:string}.includes(${2:e})

Prefix	Description
bbeo-string-length	[string]: Length of string

${1:string}.length

Prefix	Description
bbeo-string-concat	[string]: Concatenate with another string

${1:string}.concat(${2:string})

↥ Back To Top