JS do this
frontend es6 Javascript
Javascript DO THIS not That
DO THIS | NOT THAT | Comments | ||
---|---|---|---|---|
{React.Children.toArray(someData.map(item => <div> hello</div>))} | someData.map(item=>(<div key={Math.random()}> hello </div>}) | manually assigning Keys on Children | ||
const simon ={ age:32}; delete simon.age | const {age, ...newSimon} = simon | deleting from an object as this mutates the original object, instead generate a new one | ||
const nums = [ null,2 ,4]; nums.filter(Boolean); | This will remove all the nulls as null return false aka Falsey Bouncer | |||
JSON.stringify(someObject, null,2) | this will add some spacing when printing the object | |||
const createUser = ({username, date}); createUser({username:'asd', date:'10-10-2000'} | createUser('Simon', '01-01-2001') | first one is more extendable and easier to read | ||
const unique = [... new Set(numbers)] | easy way to dedup | |||
if (True) { debugger;} | force browser to stop | |||
someFunction && someFunction(); | someFunction?.(); | conditional execution | ||
const isRequired = () =>{ throw Error('Arguement is required');} | const userName = (username = isRequired())=> {} | forces parameters, null is considered a valid value | ||
console.trace or console.table or console.log('%c test', 'color:red;'); | console.log | formatted logging | ||
class Foo {} export {Foo}; import {Foo} from './Foo' | export default Foo; | shy away from default export | ||
async function doSomething(){}; doSomethingAsync(); | (async function doSomething(){})(); | avoid anonymous invokation IIFE | ||
const element = document.getElementById('id'); element.scrollIntoView({behavior: "smmoth"}); | scroll smoothly into view | |||
scripts: { "preinstall": "", "postinstall" : ""} | this will run before running and post run so you dont need to execute commands manually | |||
Object.entries(someObj).forEach([key,value]) =>{ console.log(key,value)} | iterate over both key and value | |||
let price =0; const defaultPrice = price_1 ?? 10; console.log(defaultPrice); //0 | `let price =0; const defaultPrice = price_1 | 10; console.log(defaultPrice); //10` | 0 in JS is falsey but that might not be what we want in the behavior, using ?? (nullish coalescing will only return falsey if null or undefined) | |
const fs = require("fs/promises"); await fs.writeFile; ... | const fs = require("fs") | import node fs promise rather than just fs, most modules has promisified versions ie: module/promises | ||
commonJS:require module.exports ES6: import export | require vs import. import are more customizable when importing. import can by async. require is only sync |
- Deconstructing
- Spreading
- Interpolation
- Async Wait