Some errors to avoid in JavaScript

Published on December 12, 2019

I was refactoring some legacy JavaScript recently and saw some things I needed to improve.

Here are the things I noticed with some descriptions.

Flattening arrays of objects to custom delimited arrays

I came across a number of arrays that contained flattened objects with custom delimiters.

// What was in the legacy code (wrong way to do this)
 ["myname", 30, "[!d]". "thesecondname", 30]

This was parsed out in for loops to detect each [!d] delimiter. This means the consumer has to understand the custom delimited format and/or assume there is a fixed index length to represent an object. You can store objects in an array and serialise them to json for passing around.

// standard way to do something like this
;[
  {
    name: 'myname',
    age: 30,
  },
  {
    name: 'thesecondname',
    age: 30,
  },
]

Pasting library code in to large domain logic files

I came across some instances of library code for handling date and number parsing pasted in to the middle of a large (5k+ lines) JavaScript file.

This makes it difficult to locate, change or remove later. Better to use npm these days or at least paste the code in to a separate file and load it manually that way. Much easier for the next developer to come along and remove it or change it.

Using strings as boolean flags

// Say you have some sort of settings object like this
settings:{
  NewSaleResetsSalesPerson: "Yes",
  SyncSavedOrders: "Yes"
}

// And now everytime you need to check a setting you have to check the string
if (Settings.FirstRun != "Yes"){...}

Use a boolean for these kinds of flags. If you need to display the boolean as a readable “Yes” somewhere in the UI you should apply that only in the UI.

// settings object using booleans
settings:{
  NewSaleResetsSalesPerson: true,
  SyncSavedOrders: true
}

// And now the value will be truthy and falsey as expected
if (!Settings.FirstRun){
  someUiElement.text("No")
}

Not using the replace method as regex

I noticed the replace method was used repeatedly to replace the same item. It seems like this is done to ensure all instances of the value are replaced. The JavaScript replace function uses regex. You need to specify that you want to replace globally.

// The same replace function is repeated here
if (Utils.HasString(Settings.VehicleName)) {
  if (strSettingsValue.lastIndexOf('Sedan') > 0) {
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    strSettingsValue = strSettingsValue.replace('Sedan', Settings.VehicleName)
    Settings[row['Name']] = strSettingsValue
  }
}

// The equivelant with global replacement would be
if (Utils.HasString(Settings.VehicleName)) {
  if (strSettingsValue.lastIndexOf('Sedan') > 0) {
    strSettingsValue = strSettingsValue.replace(
      '/Sedan/g',
      Settings.VehicleName
    )

    Settings[row['Name']] = strSettingsValue
  }
}

Writing custom date time formatting code

It’s really difficult to get datetime parsing right. Especially for a multiple locale website.

Use a library like date-fns or moment instead of writing custom parsing code.

// date-fns is very light weight and can do some great formatting for you
var ampm = hours >= 12 ? 'pm' : 'am'
var minutes = minutes < 10 ? '0' + minutes : minutes

Overuse of alerts and error messages instead of input validation

I found there were lots of alerts and error messages for input. It can be a much better experience for the customer if they simply cannot enter bad data.

In this example, if they can only tick one item then maybe checkboxes are not the best UI element for this task. Consider a drop down or set of radio buttons.

// numberOfItems is essentially a count of checked checkboxes
if (numberOfItems > 2) {
  alert(
    'Operation can only be conducted on single items.\nUntick all except one.'
  )
}

Using boolean method input parameters

If you have a method that takes a boolean and operates differently based on the boolean, it’s difficult for the reader of the code to understand what the boolean is doing without reading the method source.

It’s better to just have two methods that have names that accurately describe what will happen when you call it.

// This is difficult to understand without knowing how Update works. In this case with true a form is cleared. With false it is not cleared before updating the UI.
MainPanel.Update(true)

// This provides more information about what will happen without having to read the Update method.
MainPanel.ClearAllFormElements()
MainPanel.UpdateFromServer()

If you see these JavaScript anti-patterns in your code, think about refactoring them to make it easier for the next developer.

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building and supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My Universal DevShell tooling will save you 30+ hours of configuring your Windows or Mac dev environment with all the best, modern shell and dev tools.

Get DevShell here: ✨ https://devshell.darraghoriordan.com


Read more articles like this one...

List of article summaries

#engineering

Building an AI generated game with Stable Diffusion and data from Wikipedia

Last week I released a game called Doodle:ai.

In the game you’re shown AI generated images and you have to guess the Wikipedia topic it used to create the game.

#engineering

Easiest way to optimise images for web

Here is how I optimise all pngs and jpgs in a folder for publishing to the web.

#developer-experience

Start tracking DORA metrics for your team in just 15 minutes with Apache Dev Lake

DORA (DevOps Research and Assessment) metrics are an excellent way for engineering organisations to measure and improve their performance.

Up until now, monitoring the DORA metrics across Github, Jira, Azure Devops etc required custom tooling or a tedious manual process.

With Apache Dev Lake you can get beautiful reporting for DORA metrics on your local machine in as little as 15 minutes (honestly!).

From Google Sheets to Grafana
From Google Sheets to Grafana

#engineering

A summary of NDC Sydney 2022 Developer Conference

I attended my first in-person conference for more than 3 years last week! NDC is one of the more well-known developer conferences in Australia and New Zealand. It’s a 5 day conference with 3 days of talks and 2 days of workshops.

There’s so much to learn across all the streams so I try to take notes for each of the talks to quickly reference them later. This post contains all my notes. I’ll add the relevant videos to talks later if they’re released.

A reminder that these notes are just my notes. They’re paraphrased and summarised from what the speaker actually said. Each speakers would have provided must more clarity and went into more detail during their pressos!

Comments