JavaScript
Last updated: 30 Mar 2023 ·
Posted in wiki#notes
Common array operations
// Create an array
const arr = ['Chess', 'Go'] // or
const arr = new Array('Chess', 'Go') // or
const arr = 'Chess, Go'.split(', ')
// Get length of array
arr.length // 2
// Create a string from an array
const arr = ['Chess', 'Go']
arr.join(', ') // "Chess, Monopoly"
arr.toString() // "Chess,Monopoly"
// Get index of item in an array with indexOf()
const arr = ['Chess', 'Go']
arr.indexOf('Chess') // 0
// Check if array contains an item with includes()
const arr = ['Chess', 'Go']
arr.includes('Chess') // true
arr.includes('Monopoly') // false
// Add an item to end of array with push()
const arr = ['Chess', 'Go']
arr.push('Sudoku') // 3 (Returns new length)
arr // ["Chess", "Go", "Sudoku"]
// Add an item to start of array with unshift()
const arr = ['Chess', 'Go']
arr.unshift('Hex') // 3 (Returns new length)
arr // ["Hex", "Chess", "Go"]
// Remove an item from end of array with pop()
const arr = ['Chess', 'Go', 'Sudoku']
arr.pop() // Sudoku (Returns the removed item)
arr // ["Chess", "Go"]
// Remove an item from start of array with shift()
const arr = ['Chess', 'Go']
arr.shift() // Chess (Returns the removed item)
arr // ["Go"]
// Remove multiple items from end of array with splice(count)
const arr = ['Chess', 'Go', 'Hex', 'KenKen', 'Crossword']
arr.splice(-3)
// ["Hex", "KenKen", "Crossword"]
// Removes last 3 items and returns a new array with removed items only
arr // ["Chess", "Go"]
// Remove multiple items from start of array with splice(startIdx, count)
const arr = ['Chess', 'Go', 'Hex', 'KenKen', 'Crossword']
arr.splice(0, 3)
// ["Chess", "Go", "Hex"]
// Removes 3 items starting from index 0 and returns a new array with removed items only
arr // ["KenKen", "Crossword"]
// Replace multiple items in array with splice(startIdx, count, ...items)
const arr = ['Chess', 'Go', 'Monopoly', 'Hex']
arr.splice(-2, 2, 'KenKen', 'Crossword')
// ["Monopoly", "Hex"]
// Removes last 2 items and returns a new array with removed items only
arr // ["Chess", "Go", "KenKen", "Crossword"]
// Merge multiple arrays with concat()
const arr = ['Chess', 'Go']
arr.concat(['Hex', 'Sudoku'])
// ["Chess", "Go", "Hex", "Sudoku"] (Returns a new combined array)
// Reverse an array
arr.reverse() // Reverses array in-place
arr.concat().reverse() // Returns a new reversed clone
[...arr].reverse() // Returns a new reversed clone
// Iterate over an array with for...of
for (const game of arr) {
console.log(game)
}
// Call a function on each element in array with forEach()
arr.forEach((game, idx) => {
console.log(game, idx)
})
// Create shallow copy of array
const arr = ['Chess', 'Go']
const arrCopy = [...arr] // or
const arrCopy = Array.from(arr) // or
const arrCopy = arr.slice()
// Create deep copy of array
const arrDeepCopy = JSON.parse(JSON.stringify(arr)) // or
const arrDeepCopy = structuredClone(arr)
// Flatten an array with flat()
const arr = [0, [1, 3, 5], [2, 4, 6]]
arr.flat() // [0, 1, 3, 5, 2, 4, 6]
Higher order array methods
Higher order functions are functions that can take another function as their argument, return a function when executed, or both. Some useful higher order functions in JavaScript:
find()
Find the first element in an array that passes the test specified by the provided function. If no such element is found, return undefined.
const arr = [3, 5, 11, 13, 50, 21, 67]
arr.find((item) => item % 7 == 0) // 21
arr.find((item, idx) => arr[idx + 1] < item) // 50 (First element that is followed by a smaller value than itself)
arr.find((item) => item > 100) // undefined
map()
Create a new array populated with the results of calling a provided function on every element in the calling array.
const arr = [
{ lang: 'Python', ext: 'py' },
{ lang: 'JavaScript', ext: 'js' },
{ lang: 'Haskell', ext: 'hs' },
]
arr.map((item) => '.' + item.ext)
// Array [".py", ".js", ".hs"]
filter()
Filter down a given array to just the elements that pass the test implemented by the provided function.
const arr = [180, 600, 284, 583, 23, 56, 78]
arr.filter((num) => num % 2 == 0)
// Array [180, 600, 284, 56, 78]
every()
Test whether all the elements in an array pass the test given by the provided function.
const arr = ['Monkey', 'Metal', 'Mobile', 'Orange']
arr.every((item) => item.startsWith('M')) // false
arr.every((item) => item.length >= 5) // true
some()
Test whether at least one element in an array passes the test given by the provided function.
const arr = ['You', 'look', 'beautiful', 'reading', 'this']
arr.some((item) => item == 'beautiful') // true
arr.some((item) => item.includes("ugly") // false
reduce()
Execute a callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. An initial value can be used as the first "return value of previous calculation", otherwise the first element of the array is used as initial value and iteration starts from the second element.
// Calculate the sum of numbers in an array
const arr = [2, 3, 4, 5, 6]
const initialValue = 0 // optional, if omitted the value at index 0 (2) is used and iteration starts from 3, 4...
arr.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
)
// 20
Utils
// Copy string to clipboard
const copyToClipboard = (str) => navigator.clipboard.writeText(str)
// Capitalize a string
const capitalize = (str) => str.replace(/^\w/, (c) => c.toUpperCase())
// or
// str.charAt(0).toUpperCase() + str.slice(1);
// Reverse a string
const reverseString = (str) => [...str].reverse().join('')
// Get random item from an array
const getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)]
// Get random number between min and max (inclusive)
const getRandomNumber = (min, max) =>
Math.floor(Math.random() * (max - min + 1) + min)
// Get unique values from an array
const getUniqueValues = (arr) => [...new Set(arr)]
// Get sum of numbers in an array
const getSum = (arr) => arr.reduce((a, b) => a + b)
// Get average of numbers in an array
const getAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length
// Get key from value in an object
function getKeyByValue(object, value) {
return Object.keys(object).find((key) => object[key] === value)
}
// Sequence generator
const range = (start, stop, step) =>
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
range(0, 4, 1) // [0, 1, 2, 3, 4]
range(2, 9, 2) // [2, 4, 6, 8]
Shuffle an array
[*]
// Durstenfeld shuffle
// Shuffles array in-place
const shuffleArray = (arr) => {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[arr[i], arr[j]] = [arr[j], arr[i]]
}
}
// Simple shuffle (Not properly distributed and inefficient)
// arr.sort(() => 0.5 - Math.random())
Format a date string
[Intl.DateTimeFormat, toLocaleDateString]
const formatDate = (dateString) => {
const options = {
weekday: 'short',
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}
return new Intl.DateTimeFormat('en', options).format(dateString)
// or
// new Date(dateString).toLocaleDateString('en-US', options);
}
// Usage
formatDate('1987-07-27T12:34:56') // Mon, Jul 27, 1987, 12:34:56
Format a number
const formatNumber = (number) => {
const options = {
notation: 'compact',
compactDisplay: 'short',
}
return new Intl.NumberFormat('en', options).format(number)
}
// Usage
formatNumber(123456) // 123K
formatNumber(456789012) // 457M
Convert seconds to HH:MM:SS
const secToHHMMSS = (sec) => {
let hours = Math.floor(sec / 3600)
sec %= 3600
let minutes = Math.floor(sec / 60)
let seconds = Math.floor(sec % 60)
hours = hours < 10 ? `0${hours}` : `${hours}`
minutes = minutes < 10 ? `0${minutes}` : minutes
seconds = seconds < 10 ? `0${seconds}` : seconds
return `${hours}:${minutes}:${seconds}`
}
Unix time to/from UTC
function unixToUTC(unixTime) {
return new Date(unixTime * 1000).toISOString()
}
function utcToUnix(utc) {
return Math.floor(Date.parse(utc) / 1000)
}
// Usage
unixToUTC(1234567890) // 2009-02-13T23:31:30.000Z
utcToUnix('2009-02-13T23:31:30.000Z') // 1234567890
Leap year checker
const isLeap = year => ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)
// or
const isLeap = year => new Date(year, 1, 29).getDate() === 29 // checks if February has 29 days
Padding a string
'abc'.padStart(10) // " abc"
'abc'.padStart(10, 'foo') // "foofoofabc"
'abc'.padStart(6, '123465') // "123abc"
'abc'.padStart(8, '0') // "00000abc"
'abc'.padEnd(10) // "abc "
'abc'.padEnd(10, 'foo') // "abcfoofoof"
'abc'.padEnd(6, '123456') // "abc123"
'abc'.padEnd(1) // "abc"
Generate a random date between two dates
function randomDate(start, end) {
const first = new Date(start).getTime();
const last = new Date(end).getTime();
return new Date(first + Math.random() * (last - first)).toISOString().split('T')[0];
}
// Usage
randomDate('2010-04-08', '2025-12-04')
Node.js/npm
# List all user installed packages
npm list -g --depth=0
Redirect to another website
[*]
<!-- With HTML `<meta>` tags (not recommended by W3C) -->
<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />
// With JavaScript
window.location = 'http://new-website.com' // or one of these
window.location.href = 'http://new-website.com'
window.location.assign('http://new-website.com')
window.location.replace('http://new-website.com')
Get location information from URL
const url = new URL('https://example.org:3000/path/?q=keyword#id')
console.log(url)
/*
{
href: "https://example.org:3000/path/?q=keyword#id",
origin: "https://example.org:3000",
protocol: "https:",
host: "example.org:3000",
hostname: "example.org",
port: "3000",
pathname: "/path/",
search: "?q=keyword",
hash: "#id",
...
}
*/
// To get the same information for current URL, you can also use `window.location`
Bookmarklet template
javascript:(() => {
// code goes here
})();
Misc
- The expression
(x = 5, "foo")assigns5toxand evaluates tofoo. - You can write large numbers in JS using underscores like this:
1_000_000. This is equivalent to1000000and is easier to look at.