Fetching data asynchronously in useEffect
To asynchronously fetch data in a React component using hooks, we can define and then call an asynchronous function inside of useEffect.
Read full articleCounting letters in a string
JavaScriptAll snippets in this category →
Posted on July 10, 2020To know how often each letter appears in a string, we can turn it into a dictionary. Each letter becomes a key in that dictionary, while each value is the number of occurrences of the letter.
const string = "Supercalifragilisticexpialidocious"
// split the string into an array of individual letters
const result = string.split("")
// turn all letters into lowercase
.map(letter => letter.toLowerCase())
// walk through all letters and build a dictionary as you go
.reduce((dictionary, letter) => ({
// take the result after the previous step into the new result
...dictionary,
// increment the existing counter (or 0 for new entries) for this letter
[letter]: (dictionary[letter] ?? 0) + 1
}), {})
console.log(result)
// ⇒ {
// a: 3, c: 3, d: 1, e: 2, f: 1, g: 1, i: 7, l: 3,
// o: 2, p: 2, r: 2, s: 3, t: 1, u: 2, x: 1
// }const string = "Supercalifragilisticexpialidocious"
// split the string into an array of individual letters
const result = string.split("")
// turn all letters into lowercase
.map(letter => letter.toLowerCase())
// walk through all letters and build a dictionary as you go
.reduce((dictionary, letter) => ({
// take the result after the previous step into the new result
...dictionary,
// increment the existing counter (or 0 for new entries) for this letter
[letter]: (dictionary[letter] ?? 0) + 1
}), {})
console.log(result)
// ⇒ {
// a: 3, c: 3, d: 1, e: 2, f: 1, g: 1, i: 7, l: 3,
// o: 2, p: 2, r: 2, s: 3, t: 1, u: 2, x: 1
// }const string = "Supercalifragilisticexpialidocious"
// split the string into an array of individual letters
const result = string.split("")
// turn all letters into lowercase
.map(letter => letter.toLowerCase())
// walk through all letters and build a dictionary as you go
.reduce((dictionary, letter) => ({
// take the result after the previous step into the new result
...dictionary,
// increment the existing counter (or 0 for new entries) for this letter
[letter]: (dictionary[letter] ?? 0) + 1
}), {})
console.log(result)
// ⇒ {
// a: 3, c: 3, d: 1, e: 2, f: 1, g: 1, i: 7, l: 3,
// o: 2, p: 2, r: 2, s: 3, t: 1, u: 2, x: 1
// }const string = "Supercalifragilisticexpialidocious"
// split the string into an array of individual letters
const result = string.split("")
// turn all letters into lowercase
.map(letter => letter.toLowerCase())
// walk through all letters and build a dictionary as you go
.reduce((dictionary, letter) => ({
// take the result after the previous step into the new result
...dictionary,
// increment the existing counter (or 0 for new entries) for this letter
[letter]: (dictionary[letter] ?? 0) + 1
}), {})
console.log(result)
// ⇒ {
// a: 3, c: 3, d: 1, e: 2, f: 1, g: 1, i: 7, l: 3,
// o: 2, p: 2, r: 2, s: 3, t: 1, u: 2, x: 1
// }Continue reading
Using the ternary operator in assignment and return
We can use the ternary operator in places where doing the same thing with if-else-branches would take a lot more code.
Read full articleMapping over objects
With this helper function, we can map over objects and change each of their values like we would do with arrays.
Read full articleMath with Infinity
Infinity is just a number, dude. Most calculations JavaScript lets us do with Infinity will still return Infinity. Some no longer return numbers.
Read full articleDestructuring props in styled-components
When using styled-components in React, we can use destructuring to make our components more readable.
Read full articleGetting random elements from arrays
We can use the value returned by Math.random() to get a random element from an array.
Read full article