So, you have a handle on writing JavaScript, but how do you go from practice to real problem solutions? How do you alter your JS code to make it simpler and easier to read? If you work on a team, it’s important to write simple code. Since you’re not working in a vacuum, your programs must be easy to follow by your team members. Everyone loves clean code! Learning how to make JavaScript as painless as possible is an invaluable skill sure to make you an office favorite. Today, we’ll go over 15 best practice tips to help simplify your JavaScript and make it easily understandable by other developers.

‍

1. Declare and initialize your variables at the top

Nothing disrupts readability like a late declaration. Just as it’s easier to take out all your tools before starting a job, it’s simpler to declare all variables before getting into the nitty-gritty of your function. This gives easy access should we need to tweak any name or value later down the line. While on the topic of variables, it’s best practice to initialize your variables at the time of creation so you and your team can ensure none are left undefined.

‍

2. Build modular, specialized function

No one function should have to do it all, for both efficiency and readability’s sake. Instead, when designing functions, consider a single task that it should accomplish and write it to complete that task only. Name the function to match that task.

This makes the code easier for others to read. The function will inherently be simpler and less extensive if only working toward one task. Further, it allows you and your team to lift this function to another program should you need it later. Even with just the passed variable names and function titles, we get a clearer understanding of where to find certain tasks in the second version below.

‍

3. Recognize and remove duplicate code

Similar to our last example, you should look out for instances in your code where you have identical lines of duplicate code. In cases like these, you should move the duplicated code into a function and call the function in all the instances that it was used before. This reduces visual clutter and aids in debugging later as the team can look at the one function rather than its multiple usage sections.

‍

4. Comment your code often

Comments are a great way to summarize a code fragment’s purpose, saving your fellow developers the time it would take to determine it on their own. It also allows them to catch possible mistakes if the code does not complete the task it is commented to complete. In general, it’s best to leave one comment on every function. If you’re unsure if you should leave a comment, just do it! It can always be deleted later if it’s too much clutter.

‍

5. Beware of recursion overuse

Be mindful of nesting recursive functions too many levels. While capable of solving many problems, nesting is notoriously difficult to understand at a glance.

To avoid confusion, be mindful of where recursive functions can be pulled out of their nested place without significant runtime cost and do so whenever possible. If you have 3+ levels of nested functions, chances are your fellow developers will have a hard time following it.

‍

6. Be efficient with DOM manipulations

Accessing the DOM is essential for getting the most out of your program, but doing so repeatedly causes visual clutter and will slow down the program. Instead, access it once and cache it for later use in a variable. From then on, you can access that variable instead of the DOM directly. This process is cleaner and more efficient.

‍

7. Avoid global variables at all costs

In JavaScript, variables have a scope in which they can be used, either global or local. These scopes decide where in your code these variables are defined or can be accessed. Global variables can be defined anywhere in the program and exist outside of functions. Local variables are only visible within the function it is defined.

If there are a local variable and a global variable with the same name, JavaScript will prioritize the local variable and ignore the global variable. Global variables should still be avoided, as they can accidentally overwrite window variables resulting in errors. Further, having many global variables will slow down your program since they are not deleted until the window is closed, whereas local variables are deleted once the function is completed.

‍

8. Make use of shorthand notation (Object Literals)

When designing objects or arrays in JavaScript, line space can be saved by opting for shorthand notation. This is accomplished by setting the properties or cells of an object or array during declaration rather than after. This saves you having to identify which object or array you’re setting for on each line, making the section easier to read. While this may seem like a small change, it can save a lot of eye strain for your team as the objects and arrays get more complex.

‍

9. Use Strict Mode to catch silent errors

JavaScript is a very forgiving language compared to other hardcoded languages like C++ and Java. While helpful for getting code to run without throwing errors, this leniency can lead to silent errors that pass without correction. This can also lead to inconsistent behavior if JavaScript can resolve the silent error in multiple ways.

To bypass this, opt into Strict Mode. This setting makes two major changes:

• Silent errors that would previously make it past the compiler now throw errors, allowing you to fine-tune your code before it reaches your team members.
• Fixes mistakes that prevent JavaScript from optimizing your code
• JavaScript Strict Code programs often run faster than their “sloppy” counterparts

To opt into strict mode, add the line'use strict'; either at the top of your script section (if you want the whole section to be strict) or before the desired function (if only certain sections should be strict).

‍

10. Set default values

When creating objects, you can set default values for some or all properties of the object. Doing so ensures the values of each attribute are not undefined. It also demonstrates what type of data is expected for that attribute. Additionally, by not setting default values for certain properties, you can communicate to your team that those values are not required for the object to function correctly.

Above, not all properties will have a unit number, but all will have the other four properties, which are populated with the data type expected. To demonstrate this, we leave unit blank.

‍

11. Use template literals to combine strings

Putting strings together is a pain, especially when combining strings and variables. To make this process simpler, you can use template literals (marked by backticks), which take both a string and variable.

‍

12. Solve existence testing with includes

Testing the existence of a value within an array is a common problem. Thankfully, JavaScript comes with a special array method, includes(), which will return a Boolean if the array contains the searched value. Rather than searching the array, this method provides an efficient, easy-to-read solution.

‍

13. Shorten conditionals with falsy values

In JavaScript, there are many values that are equivalent to false across multiple types of variables. This includes:

• the Boolean false
• null
• 0
• NaN (not a number)
• ' '
• " "

In JavaScript, equivalent == means that the two objects share the same values, but they may not be the same type. Identical === means that the two objects are both the same type and same value. But how is this useful?

Well, instead of creating separate variables to hold Booleans, you can instead use the above as default values to report false if nothing overwrites it. Consider this example, you need to check if a given employee has equipment training (equipmentTraining). This machine only requires the lowest level of training, the level of training is unimportant.

As a result, our if statement checks if equipmentTraining still has a falsy value, the default ' '. If it does, the if statement executes and returns that the employee is not authorized. If equipmentTraining contains any string other than the default, it will have a truthy value and therefore not execute the if statement.

‍

14. Sharing methods with inheritance

Inheritance concerns a way of sharing properties or methods between classes. This is done using the super tag to allow the constructor in FlashCoupon to access the parent constructor in Coupon. In doing so, you enhance the readability of your code by only defining the methods once (in the parent class). This makes your code to be more modular since inheritor classes can be specialized for a given task.

Notice that the top code box establishes a parent class, Coupon, the properties and methods of which are shared to FlashCoupon as seen by FlashCoupon calling the getExpirationMessage method on its final line.

‍

15. Write shorter loops with array methods

For our final tip, we’ll dive into the complexity of array optimization. Loops are a common way to create and populate arrays. However, they cause a lot of clutter and can be hard to read due to the number of lines required. Instead, you can use array methods to accomplish similar effects as for loops with only a fraction of the lines. Take this for loop for example. Instead of the above code, we can get the same effect from three lines below by making use of the map method. This method creates an equivalently sized array with only the prices property. We then get float values of that price using the parseFloat.

‍

Wrapping up and resources

The quest for cleaner code is an ongoing journey since best practices are constantly evolving with the language. This process is part of the fun of software development, and learning best practices demonstrates true mastery over a programming language. To get a great head start on learning more best practices and tricks to simplify your JavaScript code, check out Pragmatic Programmer’s extensive, hands-on course Simplifying JavaScript: A Handy Guide for Software Engineers. By the end, you’ll be a productive, modern JavaScript developer.