JavaScript snippets from around the web
This is a dump of all the snippets I have collected over the last 18 months or so, that I’m going to document here so it’s probably going to be a mess but it’s mainly for my reference so 😛
Arrays
Straight from Wes himself.
🔥 The Array .some()
Method is super handy for checking if at least
one item in an array meets what you are looking for
const user = {
name: 'Dave',
permissions: ['USER', 'CREATE_ITEM'],
}
// check if the user is either admin or can delete in item
const canDelete = user.permissions.some(p =>
['ADMIN', 'DELETE_ITEM'].includes(p)
)
// canDelete is false
// check if a user is either admin or can create in item
const canCreate = user.permissions.some(p =>
['ADMIN', 'CREATE_ITEM'].includes(p)
)
// canDelete is true
On the same note .every()
is great for checking every item in an
array meets what you are looking for.
const people = [
{ name: 'Dave', age: 42 },
{ name: 'Sue', age: 26 },
{ name: 'India', age: 9 },
]
const canEveryoneDrink = people.every(p => p.age >= 18)
// false
const canSomeoneDrink = people.some(p => p.age >= 18)
// true
const howManyDrinkers = people.filter(p => p.age >= 18).length
// 2
Via Addy Osmani
Get the unique values of an array in JS. Use ES2015 Set()
and
...rest
to discard duplicate values.
const uniqueArray = arr => [...new Set(arr)]
uniqueArray([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 0, 0, 10, 10])
// Array(9) [ 1, 2, 3, 4, 5, 6, 7, 0, 10 ]
uniqueArray([
'London',
'Manchester',
'Cambridge',
'London',
'Greater London',
'London',
'Manchester',
])
// Array(4) [ "London", "Manchester", "Cambridge", "Greater London" ]
Array.from()
accepts another .map
arguments. Useful for calling
each element of a created array.
const year = new Date().getFullYear()
const totalYears = 5
Array.from('web')
// Array(3) [ "w", "e", "b" ]
Array.from(Array(totalYears), (_, i) => year + i)
// Array(5) [ 2019, 2020, 2021, 2022, 2023 ]
Array.from({ length: totalYears }, (_, i) => year + i)
// Array(5) [ 2019, 2020, 2021, 2022, 2023 ]
Async await
const getAsyncStuff = async name => {
try {
const response = await fetch(
`https://api.github.com/users/${name}`
)
return await response.json()
} catch (err) {
console.error(err)
}
}
🔥 4 Ways to handle the double promise with fetch() and async+await
const url = 'https://api.github.com/users/spences10'
async function go() {
// 1. tac a promise onto the end
const p1 = await fetch(url).then(data => data.json())
// 2. double
const p2 = await (await fetch(url)).json()
// 3. capture promise in a variable
const data = await fetch(url)
// then convert it on another line
const p3 = await data.json()
// 4. create a utility function
const p4 = await getJSON(url)
}
// use ... spread to get all arguments
function getJSON(...butter) {
// then spread into the fetch function
return fetch(...butter).then(data => data.json())
}
go()
There's a reactions leaderboard you can check out too.
Analytics Information