Robust JavaScript Best Practices

Spread the love

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some best practices we should follow when writing JavaScript code.

Consider Using `try/catch` When Using `JSON.parse`

There’s always a chance that we encounter invalid JSON strings.

So to prevent that from crashing our app when we parse JSON, we should wrap try/catch around our JSON.parse call.

For example, we can write:

try {
  JSON.parse(str);
}
catch(ex) {
  console.error(ex);
}

This way, we won’t crash our app when we try to parse invalid JSON.

Using Classes

Classes are just syntactic sugar above prototypes.

However, it looks more familiar to most people.

And it’s easier to understand than prototypes.

For example, instead of writing:

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

Dog.prototype.speak = function() {
  console.log(this.name);
}

We write:

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

  speak() {
    console.log(this.name);
  }
}

They do the same thing, but the 2nd example makes more sense.

We can definitely consider them when we create constructors.

Using Arrow Functions

Arrow functions are useful because they don’t bind to their own this and it’s shorter.

This means it’s handy for arrow functions.

If we don’t need its own this inside the function, we should use arrow functions.

For instance, we can write:

const foo = (msg) => {
  console.log(msg);
};

or:

const init = (msg) => console.log(msg);

to write them.

This makes dealing with JavaScript functions much easier.

Concatenating Strings and Templating

Tenplate strings are great alternatives to concatenation.

We can interpolate expressions in a string without having complex concatenation expressions.

For instance, instead of writing:

const msg = 'I said, "hello' + firstName + ' ' + lastName + '" to the world.';

We can write:

const msg = `I said, "hello ${firstName} ${lastName}" to the world.`;

It’s much cleaner and it’s also a bit shorter.

Destructuring Arrays and Objects

The destructuring syntax it’s another great JavaSctipt feature.

Before the destructuring syntax existed, destructuring array entries to variables is a lot harder.

We’ve to write:

const arr = [1, 2, 3, 4];
const a = arr[0];
const b = arr[1];
const c = arr[2];
const d = arr[3];

to assign each entry to its own variable.

With the destructuring syntax, it’s much shorter:

const [a, b, c, d] = [1, 2, 3, 4];

With objects, instead of writing:

const obj = { foo: 1, bar: 2, baz: 3 };
const foo = obj.foo;
const bar = obj.bar;
const baz = obj.baz;

We write:

const { foo, bar, baz } = { foo: 1, bar: 2, baz: 3 };

It’s much simpler.

Componentizing Our Code

We can organize our code into modules.

To do that, we just create JavaSctipt files that has export statements.

For example, we can write:

bar.js

export const foo = 66;

Then we can import it by writing:

import { foo } from 'bar';

It’s much easier than using scripts with a bunch of global variables, which can easily be overwritten.

It’s a basic building block of JavaScript apps.

Conclusion

We can use modern JavaScipt constructs like the class syntax, modules, and destructuring to make our lives easier.

Consider Using try/catch When Using JSON.parse