Maintainable JavaScript — Constructor Names and Strings

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by improving naming.

Constructors and Classes

Constructors are used for creating objects.

They’re functions that are called with the new operator.

The class syntax is syntactic sugar for constructors.

JavaScript’s standard library has many built-in constructors like Object or RegExp .

They all have Pascal case, and this is the convention that we should follow with our own constructors.

Instead of someName , we write SomeName for a constructor.

Constructor names are typically nouns since they create objects of a given type.

For instance, we can write:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`hello ${this.name}`);
};

or:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`hello ${this.name}`);
  }
}

Person starts with upper case so we can tell them apart from other entities like variables and functions.

Following this convention makes the code easier to read.

Errors are also easier to spot.

Almost all JavaScript style guides like Airbnb, Google, etc. all recommend this casing for constructors and classes.

Literal Values

JavaScript code can have various kinds of literal values.

They include strings, number, booleans, null or undefined .

It also has object and array literals.

Booleans can only be true and false so we don’t need to set our own conventions for them.

The other kinds of values need some convention so they stay consistent and reduce confusion.

Strings

Strings can be delimited with single or doubles or backticks.

Single or double quotes delimit traditional strings.

While backticks delimit template literals.

There’re no difference between single and double quotes for strings.

Traditional strings can only be concatenated if we want to create string that has other kinds of expressions in them.

So we can write:

const greeting = 'hello ' + name;

Concatenation is hard to work with when we have multiple expressions.

Making multiline strings is also harder than with traditional strings since we’ve to add the newline characters ourselves.

For instance, we can write:

const greeting = 'hellon' + name;

So if we want to create string with many lines, then we’re going to confused.

We can still use them for short strings.

To make them easy to work with, we stick with either single or double quotes everywhere.

We shouldn’t use the “ sign to create multiline strings since it’s a non-standard syntax and doesn’t work on all engines.

So we shouldn’t write things like:

let longStr = "The quick brown fox jump
 over the dog.";

We have a long string with a “ .

This isn’t a standard.

What we should do is to use a template literal top create our strings.

They can have expressions in them and we don’t have to do any special to create multiline strings.

For example, we can write:

const greeting = `hello ${name}`;

to embed the value of name variable in the string.

And to create a multi-line string, we just write:

let longStr = `The quick brown fox jump
 over the dog.`;

The string will be returned with the new line intact.

Conclusion

We can make creating strings easier with template literals.

Constructors and classes are Pascal case.