JavaScript Best Practices — Property Names and Semicolons

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 best ways to add properties to objects and adding semicolons to our JavaScript code.

Quotes Around Object Literal Property Names

We should add quotes around object literal property names only when the property isn’t valid as property name if it’s not written as a string.

For instance, we don’t put quotes around the property of the following object because the property name is a valid identifier.

If we have the following object:

const foo = {
  a: 1
};

Then we don’t need quotes around a since a is already a valid identifier name in JavaScript.

In JavaScript, identifiers are case-sensitive and can contain Unicode letters, $ , _ and digits. However, a valid JavaScript identifier may not start with a digit.

If we want to name a property with an identifier that breaks any of the rules outlined above, then we need to put them around quotes so that they’re written as strings.

For instance, if we want to have a property name that has a space between 2 words, we can write the following code:

const foo = {
  'foo bar': 1
};

In the code, we have the foo object, which has the property 'foo bar' , which has to be in quotes because of the space between foo and bar .

Then we can only access it by using the bracket notation as follows:

foo['foo bar']

to get the value of the property.

Therefore, if it’s a valid identifier, then we don’t need quotes around the property name. Otherwise, we do, and we can only access it with the bracket notation.

Consistent Use of Backticks, Double, or Single Quotes in Strings

Out of all 3 string delimiters, the backtick is the most versatile since we can use it to create both template strings and regular strings.

Template strings let us interpolate expressions into out string instead of having to concatenate expressions with multiple substrings

Interpolation is just much easier to read and type than string concatenation. The amount of the code we’ve to write is much less since we don’t need the concatenation operator everywhere.

For instance, we instead of writing:

const baz = 1;
const foo = 'foo ' + baz + ' bar';

We can instead write the string above as a template string as follows:

const baz = 1;
const foo = `foo ${baz} bar`;

In the code above, we put in the expression baz into the template string instead of concatenating.

Reading and typing template strings are both easier.

With template strings, we don’t always have to interpolate expressions, we can just create a regular string like:

const foo = `foo bar`;

Also, we can use both single and double quotes within our string without having to escape it with a backslash.

For instance, we can write the following code to use single and double quotes together as a character in a string rather than a string delimiter:

const foo = `'foo' "bar"`;

This is another advantage of using backticks as string delimiter since single and double quotes are used more in sentences and clauses. However, backtick isn’t a commonly used English punctuation symbol.

Therefore, backticks are great as a string delimiter. It’s even better since we use backticks to create JavaScript template strings which can have JavaScript expressions interpolated in it.

Single and double quotes are good for quoting text.

Photo by Lukáš Vaňátko on Unsplash

Adding Our Own Semicolons is Better than Automatic Semicolon Insertion (ASI)

When we write JavaScript code, we should always write out the semicolons explicitly instead of relying on the automatic semicolon insertion capability to insert them for us automatically.

ASI doesn’t always insert them in the place that we want it to. For instance, if we have the following code:

const foo = () => {
  return
  {
    name: "foo"
  }
}

Then it’s going to be interpreted as:

const foo = () => {
  return;
  {
    name: "foo"
  };
}

Therefore when we call foo , it’s going to return undefined .

We probably don’t want that, so we should put in the semicolons ourselves as follows:

const foo = () => {
  return {
    name: "foo"
  };
}

Conclusion

We only need quotes around property names for property names that aren’t valid JavaScript identifier names.

Backticks is the best string delimiter since it can create template strings and regular string and leave single and double quotes as quote delimiters instead of string delimiters.

The post JavaScript Best Practices — Property Names and Semicolons appeared first on The Web Dev.