JavaScript helper snippets

array.js

// Find first value matching a condition
arr.find(e => someCondition(e))
// e.g.
[12, 5, 8, 130, 44].find(i => i > 100) // 130
[7, 3, 9, 5, 6, 1].find(i => i % 2 == 0) // 6

// Remove FIRST occurrence of value from array
let index = arr.indexOf(value)
if (index > -1) {
  arr.splice(index, 1)
}

// Remove ALL occurrences of value from array
arr = arr.filter(item => item !== value)

// Custom sort
arr.sort((a, b) => {
  return parseFloat(a.price) - parseFloat(b.price)
})

cookies.js

function setCookie(name, value, days) {
  let expires = ''
  if (days) {
    let date = new Date()
    date.setDate(date.getDate() + days)
    expires = '; expires=' + date.toUTCString()
  }
  document.cookie = encodeURIComponent(name) + '=' + (encodeURIComponent(value || '')) + expires + '; path=/'
}

function getCookie(name) {
  let nameEq = encodeURIComponent(name) + '='
  let cookies = document.cookie.split(';')
  let match = cookies.find(cookie => cookie.trimLeft().startsWith(nameEq))
  return match ? decodeURIComponent(match.substring(nameEq.length)) : undefined
}

function removeCookie(name) {
  setCookie(name, '', -1)
}

dom.js

document.documentElement

document.body

document.head || document.querySelector('head')

elem.dataset.someDataAttr

elem.id

elem.classList.add('some-class')
elem.classList.remove('some-class')
elem.classList.contains('some-class')
elem.classList.toggle('some-class')

// Value of <input> or <textarea>
textArea.value

// Plain-text content
elem.textContent

// Hide element
elem.style.display = 'none'

// Delete element
elem.remove()

// Append child
parent.appendChild(elem)

// Prepend child
parent.insertBefore(elem, parent.childNodes[0])

// Wrap element
let wrap = document.createElement('div')
elem.parentNode.replaceChild(wrap, elem)
wrap.appendChild(elem)

// Insert before
other.parentNode.insertBefore(elem, other)

// Insert after
other.parentNode.insertBefore(elem, other.nextSibling)

// Replace tag
var d = document.createElement('div')
d.innerHTML = elem.innerHTML
elem.parentNode.replaceChild(d, elem)

// For each
Array.from(document.querySelectorAll('selector')).forEach((element, index) => {
  console.log(index, element)
})

format.js

// Format a number
const num = 1e6
num.toLocaleString() // Dependant on the user's OS
num.toLocaleString('en') // '1,000,000'
num.toLocaleString('de') // '1.000.000'
num.toLocaleString('fr') // '1 000 000'
num.toLocaleString('ar-EG') // '١٬٠٠٠٬٠٠٠'
// More options: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Syntax

// Format a date
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
date.toLocaleString() // Dependant on the user's default locale and time zone
date.toLocaleString('default', {timeZone: 'UTC'}) // Dependant on the browser's default locale
date.toLocaleString('en-US', {timeZone: 'UTC'}) // '12/20/2012, 3:00:00 AM'
date.toLocaleString('en-GB', {timeZone: 'UTC'}) // '20/12/2012, 03:00:00'
date.toLocaleString('ja-JP', {timeZone: 'UTC'}) // '2012/12/20 3:00:00'
date.toLocaleString('ko-KR', {timeZone: 'UTC'}) // '2012. 12. 20. 오전 3:00:00'
// More options: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#Syntax

date.toISOString() // '2012-12-20T03:00:00.000Z'

regex.js

// Defining a regex pattern
let r = /\b1([a-z])\b/gi
// or
let r = new RegExp('\\b1([a-z])\\b', 'gi')

'1a 1b'.match(r) // ['1a 1b', 'a', 'b']
r.test('1m') // true
'...ok...'.replace(/\.+$/, '') // '...ok'
'...ok...'.replace(/^\.+/, '') // 'ok...'
'...ok...'.replace(/^\.+|\.+$/, '') // 'ok'