JavaScript Best Practices — Objects and Useless Constructors

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

In this article, we’ll look at the use of useless property keys and useless constructors in classes.

No Useless Computed Property Keys in Objects and Classes

Since ES6, we can name dynamic property keys in our objects and classes.

They’re denoted by brackets and we can put in strings, numbers or symbols in it to create computed property names.

For instance, we can write the following code to add dynamic computed property keys as follows:

let foo = 'fo' + 'o';
class A {
  [foo]() {}
}

In the code above, we have the foo variable which is used as a dynamically computed method key in our A class.

This allows us to create keys that are derived from other sources. With this, we can create dynamic member keys from strings that are created from various sources like template strings, concatenation, combining strings and numbers, etc.

Anything that returns strings, numbers, or symbols can be used as computed property keys.

Likewise, we can use dynamic property keys with objects. For instance, we can write the following code to create a dynamic property for an object:

let foo = 'fo' + 'o';
const obj = {
  [foo]() {}
}

In the code above, we created the obj object with the foo dynamic property key so that we can create a computed property key that uses a string that’s created by concatenating 2 strings.

With this syntax, it’s easy to create useless dynamic property keys like the following:

const obj = {
  ['foo']() {}
}

In the code above, we have the ['foo'] dynamic property key. This isn’t very useful since the string is constant. Therefore, we don’t need extra brackets.

And since the string is a valid identifier, we don’t need the quotes. Therefore, we can just rewrite it as follows:

const obj = {
  foo() {}
}

We removed the extra symbols that we don’t need and get the same result as before.

Likewise, we can do the same with class members. If we have the following class:

class A {
  ['foo']() {}
}

Then we can rewrite it as follows:

class A {
  foo() {}
}

We eliminated the brackets and the quotes since foo is a valid method identifier.

Likewise, we can do the same with numerical property keys in objects. Instead of writing:

const obj = {
  [0]: 1
}

We can write:

const obj = {
  0: 1
}

We didn’t need brackets to create a property that has numerical keys.

No Unnecessary Constructor

In JavaScript classes, we don’t always have to provide our own constructor. If we only want an empty constructor, then we don’t have to provide it ourselves.

For instance, if we have the following class:

class Foo {
  constructor() {}
}

Then we don’t need the constructor in the Foo class as the JavaScript interpreter will provide it for us.

Instead, we can write the following code:

class Foo {}

We can replace an empty constructor, then we don’t need to provide it in order to be able to instantiate our class.

For child classes, we don’t have to provide a constructor that calls super if the parent constructor is an empty constructor.

For instance, instead of writing the following code for the Bar class, we can write the following instead:

class Foo {}

class Bar extends Foo {
  constructor() {
    super();
  }
}

Instead, we can just write:

class Foo {}

class Bar extends Foo {}

We only need to call super if we want to pass in arguments to the parent constructor.

Therefore, we need it if we have a parent constructor that takes arguments as follows:

class Foo {
  constructor(a) {
    this.a = a;
  }
}

class Bar extends Foo {
  constructor(a) {
    super(a);
  }
}

If we don’t want to set the value of this.a from the child constructor, then we can also skip the constructor implementation as follows:

class Foo {
  constructor(a) {
    this.a = a;
  }
}

class Bar extends Foo {}

Therefore, we don’t need to implement constructor ourselves in JavaScript classes as an empty default constructor is provided if we didn’t provide anything.

Conclusion

We shouldn’t use the computed property syntax in a useless. If our computed property is constant and it’s not derived from combining other pieces of data, then we don’t need it.

Also, we shouldn’t add empty constructors in our JavaScript classes. We don’t need it if our constructor has no content.

We also don’t have to provide a constructor for a child class if we don’t want to call the parent constructor from it.