// jsconfig.json
{
"compilerOptions": {
"jsx": "react"
}
}
February 18th, 2022
The native way in VS Code to find references of a function is to right-click the function's name and choose Find All References. But this won't work for JSX files.
An easy fix can be to create a jsconfig.json
in the project root with this snippet.
const user = {
id: 42,
name: 'Son Goku',
email: 'son@goku.db'
}
for(const prop in user) {
console.log(`${prop}: ${user[prop]}`)
}
/*
output:
'id: 42'
'name: Son Goku'
'email: son@goku.db'
*/
August 1st, 2021
prop
isn't a property, but the string representation of the property key. This way we're able to acces the property value by usering the bracket notion user[prop]
.
This loop can be applied on arrays, because they are literally objects, but it's not recommended. The right order can't be guaranteed.
// the magical function
async function promiseHandler(promise) {
try {
const data = await promise;
return [data, null]
} catch(error) {
console.error(error);
return [null, error]
}
}
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Resolve')
}, 1000)
})
const getDataFromAPI = async () => {
const [data, error] = await promiseHandler(promise)
// output: 'data' 'Resolve'
console.log('data', data)
// output: 'error' null
console.log('error', error)
}
getDataFromAPI()
June 17th, 2021
To avoid stuffing our functions with try-catch blocks when working with asynchronous code, we use a function (promiseHandler()
) which always returns an array containing the data for a resolved or the error for a rejected promise.
function flattenObject(objectTree) {
const flatObject = {};
if (!objectTree) {
return flatObject;
}
Object.keys(objectTree).forEach((rootKey) => {
if (Object.prototype.hasOwnProperty.call(objectTree, rootKey)) {
// flatten deep nested objects
if (typeof objectTree[rootKey] === 'object') {
const deepObject = flattenObject(objectTree[rootKey]);
Object.keys(deepObject).forEach((deepKey) => {
if (Object.prototype.hasOwnProperty.call(deepObject, deepKey)) {
flatObject[`${rootKey}.${deepKey}`] = deepObject[deepKey];
}
});
} else {
flatObject[rootKey] = objectTree[rootKey];
}
}
});
return flatObject;
}
const person = {
Name: 'Goku',
Attack: {
Special: {
Name: 'Kame Hame Ha',
Power: '4000'
},
Final: {
Name: 'Genkidama',
Power: '> 9000'
},
}
}
/*
returns:
{
Name: 'Goku',
'Attacks.Special.Name': 'Kame Hame Ha',
'Attacks.Special.Power': '4000',
'Attacks.Final.Name': 'Genkidama',
'Attacks.Final.Power': '> 9000'
}
*/
flattenObject(person)
July 27th, 2020
A function which executes itself (so called recursion) is a good way to flatten an object of any depth.
This algorithm uses two forEach()
loops: One for the root layer of the current object and one for it's properties.
At first, the outer loop will copy the property and it's values into flatObject
. If the value is an object itself, the second loop will start.
The inner loop copies the nested object into the flatObject
. The keys of the nested objects will be merged to a dot-notation key like key1.key2
.
<!DOCTYPE html>
<html>
<body>
<input id="awesomeInput" value="2" />
<script>
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
setTimeout(() => {
let awesomeInput = $('#awesomeInput');
awesomeInput.value = 10;
}, 5000);
</script>
</body>
</html>
July 26th, 2020
We created a new $
and $$
function on the window
object via bind()
. This way our newly created functions will be the shortcuts for the querySelector
and querySelectorAll
method.
The example updates the value of the input from 2 to 10 after 5000 ms by using our jQuery-like selector.