6 JavaScript Best Practices that you should know

2013-08-22

Although basic JavaScript programming would be sufficient for developing small websites, following the best practices of JavaScript programming, would help in improving the websites maintainability and performance. Listed below some of the JavaScript best practices that would be useful in almost every JavaScript program that you write.

1. Load JavaScript files deferred

One common practice that is followed by many developers is to place the JavaScript code or link to an external JavaScript file within the head section of the HTML page. The problem here is, when a page is loaded, the browser first loads the entire JavaScript code before processing the actual HTML code. Hence the page load time would get increased, which is definitely something that we need to avoid.

It was a good practice to add the JavaScript code before the closing body tag, which will allow the page to be rendered in the browser, before loading the JavaScript files.

Today's best practice is to use deferred loading using the defer attribute. You can place your script tag back in the head where it should be:

<head>
  ...
  <script src="js/jquery.min.js" defer></script>
  <script src="js/app.js" defer></script>
</head>

Both these files will be downloaded and parsed asynchronously while the browser keeps loading the page. Then when the page is loaded, the browser will run the scripts in document order.

2. Always enclose conditional statements with {}:

We often tend to write single line conditional statements without the enclosing braces, as follows.

if (someCondition)
  result = true;
else
  result = false;

This is a bad practice, since it would make the code less readable and if some other person tries to modify the code, they might add additional statements within the conditional statement, without noticing the missing braces. This will break the functionality and sometimes results in errors that would take a long time to identify and fix.

3. Reduce DOM access as much as possible:

Access to DOM elements is costly and it is always going to cost you some performance. So minimize the access to DOM elements by avoiding unnecessary code. For example,

for(var i=0; i<5; i++) {
  var element = document.getElementById(“id”);
  //someLogic
}

Instead of accessing the DOM elements with each iteration, place the variable declaration outside the loop and access the DOM only once.

var element = document.getElementById(“id”);
for(var i=0; i<5; i++) {
  //someLogic
}

4. JavaScript Semicolons:

Most modern browsers will not complain if you do not use semicolons at the end of each statement. But this practice has affected many developers when some browsers were unable to execute the code without semicolons. This is considered to be a bad practice, since the browsers will never tell you that it expects a semicolon. Hence you will be spending long hours to crack this small but painful issue. Using semicolons also improves the readability of your code.

5. Function calls can be slower:

JavaScript comes in with a lot of built in functions like any other scripting language. But sometimes these function calls are slower than the primitive operations. For instance, if you want to find the lowest of two numbers, you can do it using the JavaScript method as follows.

var lowest = Math.min(x, y);

Instead, we can perform the same logic using primitive operations, which would be much faster.

var lowest = x < y ? x :y;

6. String Concatenation:

We normally use the string concatenation operator “+” several times within the same statement, to concatenate many strings.

var result = "Hi "™ + name + "€˜, how are you?"€™;

The above statement would result in the creation of intermediate strings before the final value is stored in the result variable.

A faster approach would be,

var buffer = ["hi ", name];
buffer.push(", how are you?");
var result = buffer.join("");

These are some of the Javascript best practice scenarios that you would come across more often. Some additional scenarios will be covered in the upcoming articles.