Categories
JavaScript Best Practices

JavaScript Best Practices — Spaces, Commas, and Testing

Spread the love

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at how to properly space out the JavaScript code, adding commas in the right places, and testing.

Avoid Multiple Empty Lines

We shouldn’t have multiple empty lines in our code.

They’re useless and they take up space.

For instance, instead of writing:

const x = 1;


const y = 2;

We write:

const x = 1;
const y = 2;

Commas

Comma placement can also make our code easier or harder to read, so we should think about where they should be placed.

No Leading Commas

We should never have leading commas.

So instead of writing the following:

const story = [
    foo
  , bar
  , baz
];

We write:

const story = [
  foo, bar, baz
];

We may get syntax errors with leading commas.

Add Trailing Commas

Trailing commas make diffs cleaner and make rearranging the key-value pairs of an object easier.

So we should add them.

For instance, instead of writing:

const obj = {
  foo: 1
}

We write:

const obj = {
  foo: 1,
}

Semicolons

Semicolon placement is significant in JavaScript. Therefore, the meaning of the code may change depending on how they’re placed.

Add Semicolons Manually

We should add semicolons manually to avoid the JavaScript interpreter doing it for us.

If we let the interpreter do it, then it may be inserted in a place that we don’t expect.

Therefore, we should add them ourselves.

Instead of writing:

const arr = [1, 2, 3].map(x => x * 9)

We write:

const arr = [1, 2, 3].map(x => x * 9);

Type Casting & Coercion

Data type casting and coercion is often an issue with JavaScript when we let the interpreter do it.

Therefore, we should deal with data type conversions ourselves.

We should use the String , Number , and Boolean to do the conversions ourselves.

For instance, we can create a string by writing:

const str = String(1)

Note that there’s no new operator used. This will ensure that we return a string primitive value instead of an object.

Standard Library

There are some functions that are leftover from the past that we shouldn’t use anymore.

Use Number.isNaN Instead of isNaN

The global isNaN function does data type coercion before checking for NaN .

However, Number.isNaN checks for NaN as-is.

Therefore, we should use Number.isNaN instead of isNaN .

For instance, instead of writing:

isNaN('1.2')

We write:

Number.isNaN('1.6');

Number.isNaN(‘1.6’); returns false since it isn’t NaN .

Use Number.isFinite Instead isFinite

Like isNaN , isFinite tries to convert non-numbers to numbers before checking if it’s finite.

Therefore, instead of writing:

isFinite('5');

which returns true for the string, we should instead write:

Number.isFinite('5');

which returns false since '5' is a string.

Testing

We should write tests to make sure that we didn’t break anything.

To make writing tests easier, we should use pure functions, which minimizes mutations and side effects.

If we have too many mocks, then they make our tests weaker since they don’t test with real data.

Jest is a good test framework that we can use for writing and running tests.

100% test coverage is a great goal to strive or even though it might not be practical to reach it.

When we fix bugs, we should add some tests to make sure that our bug stays fixed.

Conclusion

We should add tests to our code to make sure that we didn’t break anything.

Spaces and commas should be added to improve readability.

Whenever we try to check for NaN or if a number if finite, use the methods in the Number object to do that.

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 *