Fire tips

Destructuring the console object

Just as we can destructure all other objects, we can destructure functions like log() and warn() directly out of the console object.

Getting the largest number from an array

To find the largest value in an array of numbers, we can spread that array into Math.max() instead of manually iterating over it.

Checking if something is an array

We cannot use the typeof operator in JavaScript to check if something is an array or not. Luckily, there is a helper function on the Array prototype for that.

Catching unknown keys in lookup tables

Lookup objects can replace long if-else branches and switch statements. We can make them more resilient by checking if a value exists for a given key.

Quickly finding objects in large arrays

Finding an object with a specific property is slow in large arrays. We can speed this operation up significantly by transforming the array to a lookup object.

Splitting arrays into X elements and “the rest”

When a feature calls for the first five photos from a list and a link that says “27 more photos”, we can split the list of photos into these two blocks.

Math 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.

Relative timestamps with Intl

With JavaScript’s built-in formatter for relative timestamps, we can build strings like “2 months from now” without having to use third party libraries.

Extracting floats from strings

By combining regular expressions and parseFloat, we can create a helper function that extracts all float values from a text input.

Mapping array values with constructors

Syntactic sugar on the Array prototype’s map function and type constructors being functions allow us to quickly map values from one type to another.

Removing duplication with ternary operators

The ternary operator can be used at many levels. The further we move it into a statement, the more duplication it can save us.

Replacing all matches in a string

The String prototype’s replace function only replaces the first occurrence of a substring by default. We can extend that with a global flag on the expression.

Making function parameters required

Regular JavaScript has no concept of required parameters. We can use default parameter values to emulate this feature.

Redundant comparisons to true or false

Assignment operators shorthand

Removing the largest number from an array

In JavaScript, we can remove the largest value from an array of numbers in two steps: we first need to find that number, then we can filter it from the array.

Sorting arrays by object properties

Short-circuiting Boolean expressions

Quickly removing values from an array

Extracting complex logic to named functions

Freezing objects for immutability

Padding strings

Clamping values in an array

Building objects from nested arrays

Russian roulette

Getting the array item with the largest given property

Removing specific values from an array

Counting all array elements that match a condition

Composing functions to run in sequence

Mapping over objects

Flat arrays to object arrays

Spongebobifying strings

Conditionally modifying array elements

The optional-chaining operator

Grouping array elements by a property

Exclusive OR

Filtering arrays to unique values

Getting the last element from an array

The exponentiation operator

Merging arrays

Flattening nested arrays

Shuffling arrays

Inverting Boolean functions

Splitting strings by lengths

Destructuring values returned by functions

Filtering falsy values from arrays

Combining arrays pairwise

Plucking properties from object arrays

Getting random elements from arrays

Splitting arrays by a condition

Getting the intersection of two arrays

Converting numerical arrays into relative fractions

Merging many objects

Picking object properties

Getting properties from objects that match a condition

Counting letters in a string

Sorting numbers

Checking if every array element matches a condition

Splitting arrays into chunks

By combining map and slice, we can write a helper function to split large arrays into many similarly sized blocks. This is useful for features like pagination.

Calculating sums

Logging as objects

Creating utility classes with Sass

Using the ternary operator in assignment and return

Array methods shorthand

Destructuring in assignment

The nullish-coalescing operator

Rewriting switch statements to lookup objects

Removing duplication with higher-order functions

Counting months from zero

Switching between functions with a ternary operator

Error handling with try-catch

Accessing object properties with bracket notation

Splitting strings

Omitting optional else-branches

When the if-branch already returns, we can omit the keyword else. The execution will only go beyond the if-branch if it doesn’t apply anyways.

Passing parameters as a single object

Implicit return in arrow functions

Hiding repetition with helper functions

Interpolation in template literals

Namespacing styled-components

To improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.

Creating state-selectors in utility-first CSS

Descriptive variables instead of complex conditions

Using Boolean prefixes for variables

Creating number ranges

Implicit object return in arrow functions

Combining arrow functions in styled-components

Destructuring props in styled-components

Using non-alphanumeric characters in CSS

Comparing to null with double-equals