JavaScript Mistakes — Spaces and Useless Code

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we look at how to eliminate useless characters that may break code.

Irregular Whitespace Characters

There’re whitespace characters that aren’t considered whitespaces in all places. Therefore, we may get Unexpected token errors.

Also, it’s not shown in modern browsers, which makes code hard to visualize properly.

Line separators are also invalid characters within JSON which cause more parse errors.

The full list of irregular characters is here.

Characters with Multiple Code Points in Character Class Syntax

Characters with multiple code points, like U+2747 aren’t allowed in strings. We should use characters which are composed of single code points like regular alphanumeric characters and punctuation symbols in our strings.

Calling Global Object Properties as Functions

Some global object properties like Math , JSON , and Reflect shouldn’t be called functions since only their methods are meant to be called and properties are meant to be accessed.

For instance, the following are invalid:

let math = Math();
let json = JSON();

The correct way to use the objects above are to access their properties:

let pi = `Math.PI;
let obj = JSON.parse('{}');`

Using Object.prototypes Builtins Directly

Some methods from the Object.prototype like hasOwnProperty , isPrototypeOf , and propertyIsEnumerable aren’t meant to be called directly by the instance.

For instance, the following are incorrect:

let bar = {};
let foo = {};
const hasBarProperty = foo.hasOwnProperty("bar");
const isPrototypeOfBar = foo.isPrototypeOf(bar);
const barIsEnumerable = foo.propertyIsEnumerable("bar");

They’re meant to be called as follows:

let bar = {};
let foo = {};
const hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
const isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
const barIsEnumerable = Object.prototype.propertyIsEnumerable(foo, "bar");

Extra Whitespaces in Regular Expressions Literals

Multiple whitespaces are hard to read. It’s hard to tell how many whitespaces are inside the regex. Therefore, we should use single whitespace and then specify the number of whitespaces we’re intending to match.

For instance, instead of writing:

const re = /a   b/;

We should write:

const re = /a {3}b/;

Returning Values from Setters

Setters’ return value is ignored even if it’s there. Therefore, the return value is useless inside the setter. It also creates more chances for error.

This applies to object literals, class declarations and expressions, and properties descriptors in Object.create , Objecr.defineProperty , Object.defineProperties and Reflect.defineProperty.

For instance, we should return values in the following code:

class Person {
  set firstName(value) {
    this._firstName = value;
    return value;
  }
}

or:

const person = {
  set firstName(value) {
    this._firstName = value;
    return value;
  }
}

or:

const Person = class {
  set firstName(value) {
    this._firstName = value;
    return value;
  }
}

or:

let person = {};
Object.defineProperty(person, "firstName", {
  set(value) {
    this._firstName = value;
    return false;
  }
});

Instead, we should remove the return statements from the examples above as follows:

class Person {
  set firstName(value) {
    this._firstName = value;
  }
}

or:

const person = {
  set firstName(value) {
    this._firstName = value;
  }
}

or:

const Person = class {
  set firstName(value) {
    this._firstName = value;
  }
}

or:

let person = {};
Object.defineProperty(person, "firstName", {
  set(value) {
    this._firstName = value;
    return false;
  }
});

Sparse Arrays

Empty slots in arrays are allowed in JavaScript. Array literals with only commas inside are valid. However, they may be confusing to developers.

For instance, the following arrays may be confusing to developers:

const items = [, ];
const strs = ["foo", , "bars"];

Instead, we should write the following:

const items = [];
const strs = ["foo", "bars", ];

We can have trailing commas.

Template Literal Placeholder Syntax in Regular Strings

Regular strings shouldn’t have template literal placeholders since they don’t work in regular strings and it’s easy for developers to mistaken them for template strings.

For instance, the following are probably mistakes:

"Hello ${name}!";
'Hello ${name}!';
"Sum: ${1 + 2}";

Instead, we should write:

`Hello ${name}!`;
`Sum: ${1 + 2}`;

Conclusion

There’re lots of characters that shouldn’t be in JavaScript code even though some may be allowed. Irregular whitespace characters shouldn’t be present in code. Characters made up of multiple code points shouldn’t in JavaScript strings.

Global objects shouldn’t be called directly. Only their properties are meant to be accessed.

Excess spaces in regex strings and literals, so they shouldn’t be included. Also, returning values in setters are useless, so they shouldn’t be added.

Multiple consecutive commas are allowed in JavaScript array literals, but they’re confusing to developers, so they probably should be avoided.