Javascript useful code snippets

Javascript useful code snippets

I summarize several useful Javascript/Typescript code snippets.

  • Get the last element from an array. Note: in the future, you can use Array Relative Indexing arr.at(-1) once the proposal is finalized.
arr.slice(-1)[0]
  • Optional array element.
[
	cond && elm, // include elm only when cond is truthy
	elm1,
].filter(Boolean)

This is very useful when you want to join a list of class names conditionally.

export const joinClassNames = (...classNames: ReadonlyArray<string | boolean | undefined>) => classNames
	.filter(Boolean)
	.join(' ')

I published a package for this, named jcls.

  • Conditional object property.
const a = {
    ...val && {val},
    key1: 'value1'
}
  • Create an object from an array of properties.
const obj = Object.fromEntries(['key1', 'value1'], ['key2', 'value2'])
  • Avoid ESLint warnings when you only import types from a dev or nested dependency package. Use import type.
ESLint: 'history' should be listed in the project's dependencies. Run 'npm i -S history' to add it(import/no-extraneous-dependencies)
import type {Location, LocationDescriptor, LocationState} from 'history'
  • Check if the running environment is browser or others.
export const isBrowser = typeof window === 'object'
  • Sort an array immutably.
arr.slice().sort()

Or use the recently introduced Array.prototype.toSorted().

  • Sort an array in numerical order. Note: the default comparison function casts values to a string and compares them in lexigraphy order.
arr.slice().sort((a, b) => a - b)
  • Replace all occurrences of needle to replacement in haystack. Note: if you are using NodeJS >= 15.x, use String.replaceAll.
haystack.split(needle).join(replacement)
Buy Me A Coffee