Beginner’s rules for writing cleaner javascript

Disclaimer: This is for beginners if you have written more than ten thousand lines of javascript in your life ( or even less ) you will already know all the stuff I’ve written below.

Writing and learning javascript can get messy. Especially when you are writing something like jQuery you can tend to throw the code for every single event with DOM one after the another. ( I have done that too, A LOT ). In the end, your code will be a list of jQuery event handlers.

When I began with Javascript and jQuery, I have done the same thing too. I will see the elements in the page, then check which events are associated with which element — Boom I have a list of jQuery events in my javascript file.

Later I identified one of the key things in becoming a better developer is to break down your code into logical components that are independent, and can do a single thing (most of the time).

Thanks to the internet and other Javascript gurus out there — I never had a shortage of resources when I set out on the mission to write clean Javascript.

Here are few rules that you can follow to write clean, modular javascript.

The approach I follow is called Object Literal Model. There are a number of patterns that can be followed, Object Literal Model is one of the basic approaches — There is a fantastic resource to learn in depth about Javascript patters written by Addy Osmani — Learning JavaScript Design Patterns.

1. Separating Logical Components (Modular code)

Break your web page into smallest possible components which are mostly independent and can work on its own. Just like dividing a book into chapters.

If a module you identified does more than one task then it’s not a module, split it. A module does one thing and does it properly.

2. No global variables

No Global Variables — There is no need to use the global variable if your modules are completely independent. Many times you might need to use one global variable for the entire app and that is understandable. But using many global variables will eventually slow down the app and can make debugging harder — if global variables with the same name are used in multiple files you are going to have a really bad time finding it out.

One of the simplest ways to avoid using global variables is to wrap your code in a self-executing anonymous function or closures.

3. DRY — Don’t Repeat Yourself

Straight and simple. No code duplication, Even if it’s just a line for the sake of readability it will be good if you follow DRY principle strictly.

Whenever you come across a repeating block put them inside a function, and reuse the function. Duplicate functions can be a pain in the ass when you are debugging the code you wrote a long time ago.

4.Least possible DOM manipulations — ( lesser $ symbols in jQuery)

Efficient DOM usage comes from DOM caching. Always, always cache your DOM element whenever you are repeatedly accessing it.

Bad code:

function foo(){
  var name = $("#form").find(".name").val();
  var age = $("#form").find(".age").val();
}

Good code:

function foo(){
 var $form = $("#form"); //cached
 var name = $form.find(".name").val();
 var age = $form.find(".age").val();
}

Whenever there is a repeated reference to a DOM variable cache it. It’s also a good practice prefix such variables with $ for easy identification of DOM variables.

5.Unbind everything you bind

This is simple and direct. Whatever be the events you bind to an element in the DOM, unbind it when you are done with it. This avoids memory leak.

Bonus:

Few resources that helped me become a better developer:

10 Interview Questions Every JavaScript Developer Should Know

The Two Pillars of JavaScript

The Two Pillars of JavaScript — Pt 2: Functional Programming

getify/You-Dont-Know-JS

Eloquent JavaScript

Learning JavaScript Design Patterns

So if you don’t already know this, try implementing them next time you create an app.