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
8. Make use of shorthand notation (Object Literals)
9. Use Strict Mode to catch silent errors
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.
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
13. Shorten conditionals with falsy values
- the Boolean false
- NaN (not a number)
- ' '
- " "
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