Categories
JavaScript Best Practices

JavaScript Best Practices — Styles

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.

Stick to a Strict Coding Style

We should stick to a consistent coding style for consistency.

This will reduce confusion and make our code portable between environments.

Use Strict Mode

Strict mode stops us from doing many things we shouldn’t do with javascript code like assigning values to values like undefined or null .

Also, we can’t multiple parameters with the same name.

The with statement is also not allowed with strict mode.

arguments and eval also can’t be modified.

These are very good changes that comes with strict mode.

So we should always use it.

Fortunately, strict mode is enabled by default with modules.

Use Linting

We should use ESLint for linting.

It’ll help us stick to a strict coding style.

Also, it can be used to check for errors and security issues.

Read Code Style Guides

Airbnb, Google, and other companies have their own style guides.

There’s also the Standard.js style guide, which we can follow.

There’re ESLint plugins to add those rules to our set of linting rules.

For instance, Airbnb has one.

Avoid Global Variables

We should definitely avoid using global variables.

They may be overwritten by anything so we should avoid them.

One exception is that we need to use global variables built into browsers like window or document so we can work with them.

However, we definitely shouldn’t define our own.

So we write nothing like:

window.x = 1;  
x = 2;

Prioritize Access to Local Variables

We should define variables that are in local scope as much as possible.

This is possible with block scope keywords like let or const .

They are only available within the block, so we won’t have any confusion with where they’re available.

We can use them by writing:

let x = 1;  
const y = 2;

Declarations on Top

If we’re declaring variables, we would keep them on top to make them easier to find.

It also reduces the chance that we declare them again accidentally.

Initialize Variables

We should initialize variables so that we won’t forget to do that later.

For example, we should write:

let x = 1;

This isn’t a problem with const since it’s always declared with a value.

Make Identifiers Understandable

If we’re creating variables, objects, functions, etc., we should make the names understandable so that we can work with them.

For instance, instead of writing:

let a, b, c, asdf;

We write names like:

let numApples, numOranges;

Use === Comparison

We should use === for comparisons since it doesn’t convert the type of the variable to something different before comparing them.

== does automatic data type conversion and the rules are complex, so we should avoid that.

Likewise, we should use !== for inequality comparisons for the same reason.

It’s not worth saving one character.

Conclusion

We should use strict style and === for comparisons.

Enabling strict mode is also a great idea.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *