JavaScript Best Practices — Data and Objects

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 practices when working with different types of data and objects.

Primitive Types

There’re different kinds of primitive types in JavaScript. They’re strings, numbers. booleans. null, undefined. symbol, and bigint.

The symbol data type is new to ES6, so we should make sure that we convert them to ES5 code. It can’t be polyfilled so it must be converted to code that’s compatible with the platforms we’re targeting in the final build artifact.

Bigint is also new and can’t be polyfilled. If we use it, we should also transpile it to something that’s compatible with our targeted platforms in the final build artifact.

Use const Instead of var

const lets us define constants in JavaScript code. It’s available since ES6. Once it’s defined, it can’t be assigned to a new value. However, the assigned value is still mutable.

It’s also block-scoped so that we can only access constants inside the block. Unlike variables declared with var , it’s not hoisted so we can reference it before it’s defined.

var is also function scoped, so it can be accessed outside the block.

Therefore, const is better than var .

If we don’t need to reassign something to a different value, then use const .

Otherwise, use let .

We can use them as follows:

const a = 1;
let b = 1;
b = 2;

We should never write something like the following in our code:

var c = 1;

Objects

When we create new objects, we should use the object literal syntax instead of the Object constructor. It’s much shorter and does the same thing.

They both create objects that inherit from the Object constructor.

For instance, instead of writing:

const obj = new Object();

In the code above, we used the new operator with the Object constructor to create an object, which isn’t necessary.

We write the following instead:

const obj = {};

Using the constructor makes us type more characters that we don’t need in our code.

Using Computed Property Names with Creating Dynamic Property Names

Since ES6, we can have dynamic property names in the objects we define. We define computed property keys with brackets around our computed key.

For instance, we can write the following code to do that:

const getKey = (k) => {
  return `foo ${k}`;
}
`
const obj = {

}

In the code above, have a getKey function that’s used to return a computed key that we put into the obj object to be used as a property key.

This way, we define an object with computed property keys the shortest and clearest way possible.

This is better than using the bracket notation after the object is defined. For instance, we wouldn’t want to write:

const getKey = (k) => {
  return `foo ${k}`;
}
`
const obj = {};
obj[getKey('bar')] = 1;

because it’s longer and we have to write obj multiple times.

Photo by Mikhail Vasilyev on Unsplash

Use the Object Method Shorthand

Another great ES6 feature is the object method shorthand. It allows us to create a method without using the function keyword.

In the old way, we create a method within an object as follows:

const cat = {
  name: 'james',
  greet: function() {
    return `hi ${this.name}`;
  }
}

In the code above, we used the function keyword to define the greet method within the cat object.

The better way to do it is with the object method shorthand as follows:

const cat = {
  name: 'james',
  greet() {
    return `hi ${this.name}`;
  }
}

The code above does the same thing as the previous example, but we omitted the function keyword.

We can also do the same thing for generator functions. Instead of writing:

const foo = {
  gen: function*() {
    yield 2;
  }
}

We write:

const foo = {
  * gen() {
    yield 2;
  }
}

They both have the gen generator method, but we omitted the function keyword in the second example.

Conclusion

We should use ES6 features whenever possible. Good features that we should use include the object method shorthand, computed property keys if we need dynamically generated object key names, and the const keyword.

If we use new data types like symbols and bigints, we should make sure that they work in the platforms that we’re targeting.

The post JavaScript Best Practices — Data and Objects appeared first on The Web Dev.