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.
<script>
var x = 5;
</script>Build modular, specialized functions
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.
function table (columns, rows, item){
creates table and searches it for the passed item
}
// compared to
function createTable (columns, rows){
//creates table
}
function searchTable (table.length, item) {
//searches table for the passed item
}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.
<script>
var x = 5;
var y = 6;
var x = x*2
var y = y*2
</script>
<script>
var x = 5;
var y = 6;
function double (value){
return value*2;
}
double (x);
double(y);
</script>
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.
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.
function1 (a,b){
function2{
function3{
//this is too hard to follow and can likely be solved another way
}
}
}