JavaScript Best Practices — Variables, Arrays, and Objects

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at how to format file source code for readability.

Also, we should make our lives easier by making the best use of recent JavaScript features.

Array Literals

We should be careful when we create array literals.

The spacing and indentation should be consistent.

Use Trailing Commas

Trailing commas should be added so that we can rearrange them easier.

For instance, we should write:

const values = [
  'first',
  'second',
];

Don’t Use the Array Constructor

We should never use the Array constructor.

It acts differently when we pass in one argument and we pass in more than one argument.

If we have one argument, then it returns an array with the number of empty slots.

If there’s more than one argument, then it returns an array with the arguments in it.

Instead, we should use array literals.

For instance, we write:

const arr = [1, 2, 3];

instead of:

const arr = new Array();

or:

const arr = new Array(1);

or:

const arr = new Array(1, 2, 3);

Non-Numeric Properties

We shouldn’t have non-numeric properties ion an array other than length .

Instead, we should use a Map on an object.

Arrays aren’t meant for storing key-value pairs.

Destructuring

We can use arrays on the left-hand side to destructure the entries.

Also, a final rest element may be included.

For instance, we can write:

const [a, b, c, ...rest] = getArray();

or:

const [, ,a, b] = getArray();

Spread Operator

The spread operator can be used to make shallow copies of arrays or merged entries from multiple arrays into one.

For instance, we can write:

const copy = [...foo];

instead of:

const copy = Array.prototype.slice.call(foo);

And:

const merged = [...foo, ...bar];

instead of:

const merged = foo.concat(bar);

Object Literals

There are things to consider when we’re defining and using object literals.

Use Trailing Commas

We should use trailing commas and a line break between the final property and the closing brace.

For instance, we can write:

const foo = {
  a: 1,
  b: 2,
}

This way, each key-value pair is consistent and we can rearrange them easier.

Don’t Use the Object Constructor

We shouldn’t use the Object constructor.

We just have to write extra code to use the Object constructor to create objects without extra benefits.

Instead, we should use object literals.

For instance, we can write:

const foo = {
  a: 1,
  b: 2,
}

Don’t Mix Quotes and Unquoted Keys

We shouldn’t mix quoted and unquoted keys unless.

For instance, we shouldn’t write:

{
  height: 2,
  'maxHeight': 43,
}

Instead, we write:

{
  'height': 2,
  'maxHeight': 43,
}

or:

{
  height: 2,
  maxHeight: 43,
}

Method Shorthand

We should use the method shorthand in classes or objects instead of the function keyword.

They do the same thing.

For instance, instead of writing:

const foo = {
  bar: function() {
    return 'bar;;
  },
};

We write:

const foo = {
  bar() {
    return 'bar;;
  },
};

Likewise, we can do the same with class methods, we write:

class Foo {
  bar() {
    //...
  }
}

Shorthand Properties

We can use shorthand properties in object literals.

For instance, we write:

const foo = 1;
const bar = 2;
const obj = {
  foo,
  bar,
};

Object Destructuring

Like arrays, we can destructure objects.

For instance, we can write:

function foo(bar, {
  num,
  str = 'some default'
} = {}) {
  //...
}

This way, we separate the 2nd argument, which should be an object into separate variables.

However, we shouldn’t nest destructured variables too deeply.

For instance, we may want to think twice if we write:

function foo(bar, {
  num,
  baz: {
    str = 'some default'
  }
} = {}) {
  //...
}

The more nesting is our code, the harder it is to read.

Enums

We can create constant objects that act like enums.

To do that, we have upper case keys in an object. The object should be assigned to a const variable.

Also, the variable name should be PascalCase.

For instance, we can write:

const LengthUnit = {
  METER: 'meter',
  FEET: 'feet',
};

Conclusion

We should use new features in JavaScript to make our lives easier.

They include destructuring, let and const .

Also, we should define arrays and objects with array and object literals respectively as much as possible.