JavaScript Best Practices — Reducing Headaches

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.

Use === to Test Equality

=== is the best operator for testing equality.

The type and value are both checked to test for equality.

== converts the value according to its own rules before doing the comparison.

For example, we can write:

1 === '1'

returns false .

But:

1 == '1'

returns true because of the automatic data type conversion.

Likewise, we can use !== to check for inequality.

For example, we can write:

1 !== '1'

which returns true .

And:

1 != '1'

returns false for the same reason.

It’s easier to work with !== and === .

Include All Semicolons

We should put semicolons at the end of statements to avoid the JavaScript interpreter inserting them automatically for us.

This reduces the chance of errors since we’re in control.

Use ESLint

ESLint is the most popular linter for JavaScript.

We should use it to lint our code to catch errors and find formatting issues with our code.

It’ll pick up bad code so that we can fix them.

Also, it comes with many plugins for TypeScript and various style guides.

Use a Namespace

We should namespace our variables to avoid name collisions.

Instead of writing:

let price = 5;

We write:

let namespace = {};  
namespace.price = 5;

This way, we segregate the variable by putting the value in the namespace.

Avoid Using Eval

eval is definitely bad since it runs code from a string.

This is a security issue and prevents any kind of optimization from being done.

Debugging is also very hard since the code is in a string.

Use Decimals Cautiously

We should be careful with decimal operations.

For instance if we have:

0.1 + 0.2

it won’t return 0.3 as we expect.

Instead, we get:

0.30000000000000004

This is because floating-point numbers are represented with binary numbers.

The conversions between the 2 number systems mean that floating-point arithmetic won’t be exact.

We should, therefore, round them to the number of decimal places that we want to return.

Start Blocks on the Same Line

Blocks should start on the same line as the keyword.

For example, instead of writing:

if(environment === 'testing')   
{  
   console.log('testing');  
}   
else   
{  
   console.log('production');  
}

We should write:

if (environment === 'testing') {  
  console.log('testing');  
} else {  
  console.log('production');  
}

We can avoid errors in some cases avoid statements like:

return  
{  
   age: 15,  
   name: 'james'  
}

The object isn’t returned since it’s considered to be separate from the return statement.

Instead, we write:

return {  
  age: 15,  
  name: 'james'  
}

so we return the object.

Use Explicit Blocks

We should delimit blocks explicitly with curly braces.

This way, we won’t have any confusion on where a block starts or ends.

For example, instead of writing:

if (i > 3)  
  doWork();

We write:

if (i > 3) {  
  doWork();  
}

Now we won’t have any confusion with the blocks.

Conclusion

We can follow some basic best practices to reduce headaches.