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
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. Promises Are Your Friend
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
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.
The Bottom Line
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.