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.

Fictional phone numbers

When working with phone number based authentication, you can use phone numbers from North America (+1) in the 555-0100 through 555-0199 range with any area code for local or test development purposes.

These numbers have been reserved by the North American Numbering Plan for fictional purposes and will not be in use by any actual organization or individual.

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']

Horizontal slide transitions in Svelte

Svelte provides a couple of useful transitions out of the box, but my favourite has always been the slide. In v3.56, a horizontal variant was introduced through the axis property.

Here’s an example of a searchbar interaction that utilizes it. Click the search icon and start typing:

The code for this component can be found here.

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.

When DB indexes should be avoided

• Indexes should not be used on small tables.
• Indexes should not be used on columns that return a high percentage of data rows when used as a filter condition in a query’s WHERE clause.
  • For instance, on a status column that has enum-like string values such as 'ACTIVE' and 'DISABLED'.
• Indexes should not be used on columns that contain a high number of NULL values.
  • This can be alleviated by using a partial index that omits those values.
• Indexes should not be used on columns that are frequently manipulated.

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