JavaScript Best Practices — Data and Objects
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:07:49

---
title: JavaScript Best Practices — Data and Objects
published: true
date: 2020-07-18 20:06:50 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8asemicolons-spacing-and-sorting-2/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices%25e2%2580%258a-%25e2%2580%258asemicolons-spacing-and-sorting-2
---

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 = {
  [getKey('bar')]: 1
}

```

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.

![](https://cdn-images-1.medium.com/max/800/0*UZAy8xs0M1DrOyee)Photo by [Mikhail Vasilyev](https://unsplash.com/@miklevasilyev?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

### 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](https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8asemicolons-spacing-and-sorting-2/) appeared first on [The Web Dev](https://thewebdev.info).