O.C. Coding #1: Effective Variables in JavaScript

Welcome to the first edition of OCC (Obsessive-Compulsive Coding), a name chosen for this post that talks about good coding practices and tricks used in real-world applications. The topics here are not limited to JavaScript alone, but can be applied across different languages as well.

Of course, the author does not impose these concepts on you, nor does he imply that these concepts are the best ways to do things. These are merely suggestions based on the author’s own experiences.

Readability & Efficiency

I have seen a lot of code in the past that underutilize the power of variables and how it greatly contributes to having readable and efficient code. Readability becomes very important especially for applications that need to be maintained or updated frequently. It is as important as writing fast code that gets the job done while using minimal system resources. For example, let us take a look at this JS function that fetches an element and assigns a value to its value attribute:

document.getElementById(elementId).value = newValue;


So what is wrong here? Well, nothing - technically that is. This gets the element with the ID elementId and assign its value attribute as newValue. For simplicity, we assume all elements are accessible, so we do not include element validation (as this is another compulsion and will be discussed in future editions of OCC). Now, let us extend this where we assign multiple values to the element’s attributes:

document.getElementById(elementId).width = width;
document.getElementById(elementId).height = height;
document.getElementById(elementId).name = name;
document.getElementById(elementId).value = value;


Again, nothing wrong here but if we look closely, we can say this peice of code is not in its “greatest” form. As I mentioned before, there are two things to look out for here: readability and efficiency. For the sake of illustration, let us say we have to assign values to more than one element. Following the trend of the code above would give us a lot of document.getElementById(… statements, which in the long-run would make our code look cluttered thus, hard to read and understand. Another thing to consider is efficiency. In the example above, we actually make four calls to getElementById()! Not very efficient.

var is Your Best Friend

Let us see how assigning the returned element to a variable with a descriptive name (read this to know more) will address the problems of the code above. Consider this alternative:

var element = document.getElementById(elementId);
element.width = width;
element.height = height;
element.name = name;
element.value = value;


At first glance, we can pretty much tell what this code does. Get the element by it’s ID, set it to a variable, and assign the respective values to its width, height, name, and value attributes. Anyone who hasn’t seen this code before, or even seen a JS function altogether could easily “interpret” this code and understand what it does before even actually using it. Notice also, how we only call getElementById() once, which executes faster than the original function.

Conclusion

Always use descriptive variables whenever possible, especially when referencing values.with.very.long.notations to make your code easy to understand or “re-understand”. Proper use of variables can save you precious CPU cycles to allocate for more important tasks. It will cost your code additional lines, but the advantage you gain is far better than a slight increase in line count. Happy coding!