Pseudo pattern matching in JavaScript

One of my favourite parts of Elixir is pattern matching. Here’s an example:

1def weather_advisory(temperature) when temperature >= 100 do
2  "Scorching hot! Stay hydrated and find shade."
3end
4
5def weather_advisory(temperature) when temperature >= 50 do
6  "Pleasant weather. Enjoy the day!"
7end
8
9def weather_advisory(_temperature) do
10 "Chilly. Grab a jacket before going out."
11end

By inverting a switch statement it’s possible to implement something similar in Javascript:

1function weatherAdvisory(temperature) {
2  switch(true) {
3    case temperature >= 100:
4      return "Scorching hot! Stay hydrated and find shade."
5
6    case temperature >= 50:
7      return "Pleasant weather. Enjoy the day!"
8
9    default:
10      return "Chilly. Grab a jacket before going out."
11  }
12}

While this is a relatively simple use-case and could be replaced with if/else blocks, I’ve found this approach to provide better clarity of the conditional logic.

New Immutable Array Methods in ES2023

1. with changes an array element at a given index without modifying the original:

   javascript

   1const original = ['Hello', 'World'];
   2const modified = original.with(1, 'There');
   3
   4console.log(original); // outputs: ['Hello', 'World']
   5console.log(modified); // outputs: ['Hello', 'There']

2. toSorted and toReversed respectively sort and reverse an array without modifying the original:

   javascript

   1const original = [6, 4, 7];
   2const sorted = original.toSorted();
   3const reversed = original.toReversed();
   4
   5console.log(original); // outputs: [6, 4, 7]
   6console.log(sorted);   // outputs: [4, 6, 7]
   7console.log(reversed); // outputs: [7, 4, 6]

3. toSpliced inserts, changes and/or replaces elements in an array without modifying the original:

   javascript

   1const original = ['Jan', 'March'];
   2const modified = original.toSpliced(1, 0, 'Feb');
   3
   4console.log(original);  // outputs: ['Jan', 'March']
   5console.log(modified);  // outputs: ['Jan', 'Feb', 'March']

Distinguishing between arrays and objects in JavaScript

Contrary to what you’d expect, typeof [1, 2, 3] returns 'object' in JS.

If you need to distinguish between the two, for cases like dynamic component rendering from JSON in React, you’ll need to use the following approach:

1const variable = [1, 2, 3];
2
3if (Array.isArray(variable)) {
4  console.log('variable is an array');
5} else if (typeof variable === 'object') {
6  console.log('variable is an object');
7}

For the dynamic rendering case, it’s worth remembering that typeof null also outputs 'object' and might need to be handled as well.

An empty string is falsy in JavaScript

Instead of using aString.length > 0 to verify if a string has a valid value, you can use the string as the conditional itself.

This is due to an empty string '' being considered falsy in JavaScript:

1function isNotEmpty(aString) {
2  return Boolean(aString)
3}
4
5isNotEmpty('Hello, World!') // outputs: true
6isNotEmpty('') // outputs: false

The other falsy JavaScript values are:

1. false
2. null
3. undefined
4. 0
5. NaN