JavaScript
npx code-complexity . --limit 20 --sort ratio
- https://www.kevinpeters.net/the-fastest-way-to-understand-new-code-bases
In JavaScript typeof null
is "object".
Deep JS - https://exploringjs.com/deep-js/
Libraries
Validation
See comparison here: https://github.com/colinhacks/zod#comparison
- https://github.com/validatorjs/validator.js
- https://github.com/hapijs/joi
- Express middleware: https://github.com/arb/celebrate
- https://github.com/jquense/yup
- https://github.com/colinhacks/zod
- https://github.com/typestack/class-validator (uses decorators)
- https://github.com/gcanti/io-ts
JSON (eg JSON request and responses):
JSDoc
TC39
ECMAScript Language Specification: https://tc39.es/ecma262/
ECMAScript Proposals: https://github.com/tc39/proposals
==
vs ===
and !=
vs !==
There is also Object.is()
that "does no type conversion and no special handling for NaN, -0, and +0 (giving it the same behavior as === except on those special numeric values)" source
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
https://stackoverflow.com/a/55822553/4034572
null == undefined // true
null === undefined // false
null != undefined // false
null !== undefined // true
console
Spec: https://console.spec.whatwg.org/
Use %i (integer), %f (float), %s (string) for type conversions: https://twitter.com/addyosmani/status/1535706659128868864
- Use console.log() like a pro: Hacker News - Article
- Advanced console.log Tips & Tricks: Hacker News - Article
- Debugging JavaScript: Beyond console.log(): https://suze.dev/blog/debugging-javascript-beyond-console-log/
CSS style
console.log(
'%cSome Text',
'color: red; font-size: 30px; background-color: yellow;'
)
- How do I create formatted javascript console log messages? - https://stackoverflow.com/questions/22155879/how-do-i-create-formatted-javascript-console-log-messages
- Console.log with CSS Style - https://dev.to/annlin/consolelog-with-css-style-1mmp
console.group
https://developer.mozilla.org/en-US/docs/Web/API/Console/group
console.group('label')
console.log(...)
console.log(...)
console.groupEnd()
console.time
console.time('label')
// ...
console.timeLog('label')
// ...
console.timeEnd('label')
Print objects to the console preserving undefined
This is for React Native.
/**
* Use it to print objects to the console preserving undefined values.
* Usage: `console.log('User', prettyPrint(user))`.
* From https://stackoverflow.com/a/50100175/4034572.
*/
export function prettyPrint(object: any): string {
return JSON.stringify(
object,
(k, v) => (v === undefined ? '__undefined' : v),
2
).replace(/"__undefined"/g, 'undefined')
}
Object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
delete
operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
Object.entries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
const user = {
name: 'Joe',
age: 42,
}
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`)
}
Object.assign()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Can be used to copy an object changing a property without modifying it.
Eg to toggle 'complete' of an object in a Redux reducer without modifying it:
const newTodo = Object.assign({}, todo, {complete: !todo.complete})
This creates a new object , merges all the properties of the 'todo' object into this new object, and then overrides the 'complete' property. The original 'todo' object is not modified, so the reducer is pure.
structuredClone
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
Note that it also works with arrays.
See https://www.linkedin.com/feed/update/urn:li:activity:7086378041525825536/
Conditionally add field
const user = { name: 'Pere' }
if (condition) {
user.age = 42
}
const user = {
name: 'Pere',
...(condition && { age: 42 }),
}
Error
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
Error('message')
and new Error('message')
is the same.
When Error is used like a function -- without
new
, it will return anError
object. Therefore, a mere call toError
will produce the same output that constructing anError
object via thenew
keyword would. source
Rethrow an error but with a different message: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Error#rethrowing_an_error_with_a_cause
Handle errors in a simple, stable, consistent way: https://github.com/ehmicky/modern-errors
AbortController
https://developer.mozilla.org/en-US/docs/Web/API/AbortController
https://stackoverflow.com/a/65805464/4034572
String
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
Regex
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Regex syntax cheatsheet: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet
https://devdocs.io/javascript-regexp/
Name capture groups: https://twitter.com/addyosmani/status/1386031624232456194
In TypeScript use the type RegExp
.
RegExp.prototype.test()
function isValidEmail(email: string): boolean {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ // From https://stackoverflow.com/a/9204568/4034572
return regex.test(email)
}
RegExp.prototype.exec()
const regex = /abcd/gi
const string = 'something'
regex.exec(string)
// returns an array with the matches or null
String.prototype.match()
const regex = /abcd/gi
const string = 'something'
string.match(regex)
// returns an array with the matches or null
Dates
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
Date format
https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
Date.prototype.toLocaleDateString() at MDN
toLocaleString
options: https://www.jsman.net/manual/Standard-Global-Objects/Date/toLocaleString
new Date(search.date).toLocaleDateString() // 5/27/2021
new Date(search.date).toLocaleDateString('es-ES') // 27/5/2021
Intl.DateTimeFormat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
Important: does not work on React Native Android. You get the error "Can't find variable: Intl". See solutions at https://stackoverflow.com/questions/56943813/using-intl-properly-in-android-react-native-app. Update November 2022: Hermes does support Intl, see https://hermesengine.dev/docs/intl. Hermes is the default since 0.70 - see https://reactnative.dev/blog/2022/09/05/version-070#hermes-as-default-engine and https://reactnative.dev/blog/2022/07/08/hermes-as-the-default. On Expo, since SDK 47 - see https://blog.expo.dev/expo-sdk-47-a0f6f5c038af.
Example from https://stackoverflow.com/a/3552493/4034572:
export function formatDate(dateNumber: number): string {
const dateObject = new Date(dateNumber)
const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(
dateObject
)
const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(
dateObject
)
const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(
dateObject
)
return `${day} ${month} ${year}`
}
formatDate(1583495987)
returns 19 Jan 1970
.