Using non-alphanumeric characters in CSS
Libraries like Tailwind CSS use special characters in their class names. We can use them in our own classes by escaping them.
Read full articleSplitting arrays by a condition
JavaScriptAll snippets in this category →
Posted on July 16, 2020We can split arrays in two based on a condition. Everything that matches the condition goes into the first result, everything that doesn’t goes into the second result.
// an array we want to split into two arrays based on a condition
const names = ["Michael", "Jim", "Dwight", "Pam", "Ryan"]
// accepts array and function returning `true` or `false` for each element
const partition = (array, callback) => {
const matches = []
const nonMatches = []
// push each element into array depending on return value of `callback`
array.forEach(element => (callback(element) ? matches : nonMatches).push(element))
return [matches, nonMatches]
}
// destructure matches as `shortNames` and non-matches as `longNames`
const [shortNames, longNames] = partition(names, name => name.length <= 3)
// ⇒ shortNames: ["Jim", "Pam"]
// ⇒ longNames: ["Michael", "Dwight", "Ryan"]
const [evenLength, oddLength] = partition(names, n => n.length % 2 === 0)
// ⇒ evenLength: ["Dwight", "Ryan"]
// ⇒ oddLength: ["Michael", "Jim", "Pam"]// an array we want to split into two arrays based on a condition
const names = ["Michael", "Jim", "Dwight", "Pam", "Ryan"]
// accepts array and function returning `true` or `false` for each element
const partition = (array, callback) => {
const matches = []
const nonMatches = []
// push each element into array depending on return value of `callback`
array.forEach(element => (callback(element) ? matches : nonMatches).push(element))
return [matches, nonMatches]
}
// destructure matches as `shortNames` and non-matches as `longNames`
const [shortNames, longNames] = partition(names, name => name.length <= 3)
// ⇒ shortNames: ["Jim", "Pam"]
// ⇒ longNames: ["Michael", "Dwight", "Ryan"]
const [evenLength, oddLength] = partition(names, n => n.length % 2 === 0)
// ⇒ evenLength: ["Dwight", "Ryan"]
// ⇒ oddLength: ["Michael", "Jim", "Pam"]// an array we want to split into two arrays based on a condition
const names = ["Michael", "Jim", "Dwight", "Pam", "Ryan"]
// accepts array and function returning `true` or `false` for each element
const partition = (array, callback) => {
const matches = []
const nonMatches = []
// push each element into array depending on return value of `callback`
array.forEach(element => (callback(element) ? matches : nonMatches).push(element))
return [matches, nonMatches]
}
// destructure matches as `shortNames` and non-matches as `longNames`
const [shortNames, longNames] = partition(names, name => name.length <= 3)
// ⇒ shortNames: ["Jim", "Pam"]
// ⇒ longNames: ["Michael", "Dwight", "Ryan"]
const [evenLength, oddLength] = partition(names, n => n.length % 2 === 0)
// ⇒ evenLength: ["Dwight", "Ryan"]
// ⇒ oddLength: ["Michael", "Jim", "Pam"]// an array we want to split into two arrays based on a condition
const names = ["Michael", "Jim", "Dwight", "Pam", "Ryan"]
// accepts array and function returning `true` or `false` for each element
const partition = (array, callback) => {
const matches = []
const nonMatches = []
// push each element into array depending on return value of `callback`
array.forEach(element => (callback(element) ? matches : nonMatches).push(element))
return [matches, nonMatches]
}
// destructure matches as `shortNames` and non-matches as `longNames`
const [shortNames, longNames] = partition(names, name => name.length <= 3)
// ⇒ shortNames: ["Jim", "Pam"]
// ⇒ longNames: ["Michael", "Dwight", "Ryan"]
const [evenLength, oddLength] = partition(names, n => n.length % 2 === 0)
// ⇒ evenLength: ["Dwight", "Ryan"]
// ⇒ oddLength: ["Michael", "Jim", "Pam"]Continue reading
Creating number ranges
We can create a sequence of numbers by spreading the keys of one array into another array. We can then change that range any way we like.
Read full articleTransforming flat arrays into object arrays
If an array contains flat values, we can turn them into objects where they become a property’s value.
Read full articleSplitting arrays into X elements and “the rest”
When a feature calls for the first five photos from a list and a link that says “27 more photos”, we can split the list into these two blocks.
Read full articleInverting Boolean functions
We can create a helper function that makes functions return their Boolean opposite. This can be useful in the shorthand syntax for array methods.
Read full articleCalculating the sum of an array of numbers
We can reduce an array of numbers into a single value that represents the sum of its values, without needing a traditional for-loop.
Read full article