How to write robust JavaScript code

JavaScript has syntax that is so liberal since JavaScript developers can do all kinds of crazy and wonderful things at the same time.

There are few tricks for writing robust JavaScript code, catching those who grow up in more restrictive class based programming systems.

Hide from the global scope

Put your code inside closures to hide from global “scope” or don’t use global namespace to define variables

function(){ 
 local_scope=1;
}

Technically, all JavaScript functions are closures. The advice in here is to define variables inside functions, and not to “pollute” the global namespace.

Don’t modify Object class prototype

JavaScript object also inherits the properties of another object, called “prototype”. The

methods of an object are typically inherited properties, and this “prototypal inheritance” is a key feature of JavaScript.

If you modify JavaScript objects prototype, this is may be considered a bad practice. Why? Well, it depends, this may be the anti-pattern in case other code relay on that original prototype. However, sometimes this feature is essential, for so called JavaScript inheritance. So in general, it depends on case.

Don’t use JavaScript inline

This is not considered as flexible. However, this also depends on case.

Make sure DOM is ready

Make your events are bombed once the document model is ready. You have these two notations, and the second is $(document).ready shorthand.

$(document).ready(function(){
 $('#mybutton').on('click', function(){
 alert('Hello World!');
 });
});
$(function(){
 $('#mybutton').on('click', function(){
 alert('Hello World!');
 });
});

Use var for global variables

Variables in JavaScript can be global or local.

Global are those variables declared in JavaScript, outside of a function.

Variables declared in JavaScript inside a function can be both global and local.

When a variable is declared inside a function, without the  var keyword, it will be local.

If you declare a variable with var it is global, regardless of where you defined it.

This will make your JavaScript code more robust.

Use Strict mode

Strict mode in JavaScript is more robust. It defines a subset of the language. There are no silent errors, not global objects leakage, and static scoping rules are applied. Also in strict mode you cannot delete the variable:

delete x; // cannot work

Insert Semicolons

Common sense.

Try not to use eval

There are many bugs that you can achieve using the eval. If there is a workaround not to use it, do not use it. Also note that passing strings rather than functions to either setTimeout or setInterval as this triggers the use of eval() internally.

Avoid document.write()

When you can use native DOM document.createElement.

document.write if not used right can overwrite your page, while document.createElement cannot.

tags: & category: -