JavaScript Best Practices — Code Organization

JavaScript is a very forgiving language. It’s easy to write code that runs but has issues in it.

In this article, we’ll look at how we should organize our JavaScript code.

Statements That Must Be in a Specific Order

We should organize code that must be run in a specific order so that the dependencies are obvious.

For instance, we can write the code that needs to be run first by writing something like:

const subtotal = calcSubtotal();
const taxes = calcTaxes(subtotal);
const total = subtotal + taxes;

With the code above, we know that we need to calculate the subtotal before we can use that to calculate the taxes.

Then we need both to calculate the total.

Also, the parameter for calcTaxes is subtotal so that we know that we know subtotal is a dependency for calcTaxes .

Document Unclear Dependencies with Comments

If dependencies aren’t clear, then we need to clarify them with comments.

For instance, if we didn’t have the parameter for calcTaxes , then we may have to explain that in the comments.

We may write:

/*
 1. calculate subtotal
  2. calculate taxes
  3. calculate total
 */
const subtotal = calcSubtotal();
const taxes = calcTaxes();
const total = subtotal + taxes;

Check for Dependencies with Assertions or Error-Handling Code

If our sequence of code have dependencies, then we want to check for them before we move on to the next step.

For instance, we may want to write assertions or error handling code to check if the required values are available before proceeding.

We may write something like:

const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
  let area = length * width;
}

We check that length and width are 0 or bigger before we calculate the area by multiplying length and width .

If we’re writing a Node app, we may also use the assert module to check the conditions that we want to check instead.

Making Code Read from Top to Bottom

If we have code where the order does matter, then we can make the code read from the top and bottom.

This way, we can read the code easily without jumping up and down the page.

For instance, we may write something like:

travelData.calcQuarterlyRevenue();
salesData.calcQuarterlyRevenue();
marketingData.calcQuarterlyRevenue();

travelData.calcAnnualRevenue();
salesData.calcAnnualRevenue();
marketingData.calcAnnualRevenue();

This way, we can read them in sequence by grouping the quarterly calculations together and the annual ones together.

Grouping Related Statements

Grouping related statements are also important. Putting related statements together lets us read them together.

Reading unrelated code that overlaps with each other is hard because we’ve to jump around to read it.

Conclusion

We should organize our code in a way so that we don’t have to jump around the page to read our code.

Also, we should group related statements together so that we can read related statements together.

Assertions and error handling code should also be added so that we know what’s required to run the code that comes after the assertions.