JavaScript’s naturally unstructured frame makes it possible to use it in many different ways. However, these ways usually end up being very unreadable. It’s easy to fall into the trap of a tangled, unorganized mess of JavaScript code – especially if you’re a new developer. After all, when you’re under pressure to get the job done and meet your deadlines, it’s natural to ignore the importance of the front end and just focus on “the important part of the application.”

The truth is, unorganized JavaScript can end up representing a large portion of the finished product and, before you know it, you could have a large mess on your hands to maintain or, even worse, someone else to maintain.
 

JavaScript File Structure Best Practices

JavaScript is one of the most flexible languages out there, and with flexibility comes room to do things the wrong way. Frameworks, like Angular and React, can help set your javascript code structure (or Typescript compiled to JavaScript in Angular’s case). Unfortunately, frameworks can’t always be used in your folder structure. Maybe the business would like to stay away from JavaScript frameworks, or maybe they are just overkill. While frameworks are a good idea in theory, they come with a degree of overhead that can introduce other complexities of their own.

So how should you organize your code when you're writing an application with a framework? The trick is to explore the world of ES6 JavaScript and basic code organization. Let’s take a closer look at the 5 ways to organize your JavaScript the right way.
 

1. Comment Your Code

When writing a new function, class, model, constant, or really anything, leave comments behind to help whoever is working on it. Notice that this style of commenting gives you great tooltips in IDE’s like VS Code.
 

 

There is a side benefit that if you’re are using JSDoc style comments, you will get comprehensive, great looking documentation free of charge!
 

2. Use ES6 Classes

ES6 has brought a whole host of features to JavaScript, so make use of them! One of these features is classes, which are probably the best way to organize your business logic.

As you can see in the above screenshot, you can structure your models’ in a way that is very easy and simple to read and is also extendable. Extendability is huge! It means you can have a class that inherits particular properties and functions from the base class. As you can see, the PropertyAddress class actually extends from the Address class. This will help you maintain that great principle DRY (Don’t Repeat Yourself).
 

3. Use Promises in Your Javascript Data Structures

As a junior developer, it is very easy to get into the habit of passing callback functions into other functions. For instance, say you want to fetch a list of employees from the API. Well, you could call that, and pass in a call back function.
 

This, on its own, may look harmless, but what happens when you need to make another call after the employees are done? If you were using callback functions, it could look something like this:
 

Instead, make use of what’s in your toolkit, Promises. This will allow you to chain call back functions in an organized an easy-to-read way. This also allows you to decouple the callback from the function completely, which means the list method no longer has to worry if there is a callback function or not!
 

 

4. Keep Things Separated

When writing JavaScript that is specifically for a “module” that could potentially be reused, put it into its own JavaScript file. Also, if you are writing JavaScript with the intent of performing some functionality that is specific to the page then put it in its own file that is included on the page. Say you’re creating an employee list page, then you could end up with two files: employee.js, and index.js.
 

 

The employee.js file contains all the model-based logic having to do with an employee -- that is not page-specific. The index.js file encompasses things that are specific to that page. This could be something like maintaining a list of employees or what happens when you click an employee.
 

5. Use Constants and Enums

If you find yourself writing the same hardcoded string again and again, you should create a constant for that. Constants are a great way to make things organized and easily changeable later.
 

If you find yourself having a group of logic that all relate, such as types, enums could be really useful for that. Although JavaScript doesn’t really have “enums,” you can create an object and annotate it using something like JSDoc to help keep things in one place and easily visible.
 

 

The Bottom Line

Overlooking the importance of organizing your JavaScript could easily lead to a huge waste of time for other developers down the road. Writing tangled up, hard-to-read, unmaintainable code is one of the worst problems you can leave yourself or another developer with. This is a real problem especially in small companies that don’t have a real process in place or any senior developers to lead the charge.

The good news is that this problem can be solved with the right approach! It’s worth it to take some extra time to learn about what your writing and leave your code in better shape than when you found it.
 

Interested in learning more about application development? Explore BDO Digital's application development services.

---