Hey, I'm writing a book too :) Click the link below to preorder and save ;)
»» Get the Only Reference You'll "ever" Need on JavaScript Engineering Interviews, Now! ««
April 30th in Discussion by .

That’s Why I’m Loving JSLint!

I love JSLint

I love JSLint... and I love NY ;)

While code-reviewing o2.js modules, I realized that I had done a serious mistake.
… well, actually my “serious” mistake, turned out to be a “not that serious” caveat ;)


redux:
Özgür, has pointed out, in his comments, that the usage of the variable o2, before its declaration was not a big deal in this particular example.

Hence I’m striking out the incorrect parts of this post — keeping them “for historical reasons”.

This double-checking pattern below that I had been using in the beginning of each and every single module, was incorrect was a manifestation of variable usage before declaring it, which is a bad coding habit.

//create an o2 namespace if not alraedy created
if(typeof o2 == 'undefined') {
	var o2= {};
}

because The definition would be hoisted like this:

var o2;
if(typeof o2 == 'undefined') {
	o2 = {};
}

which makes it behave totally against its intended meaning.

The second thing I realized was that I was not using JSLint for a while.

Normally JSLint would have immediately reported the issue as a “Variable is used before declaration” warning.

It’s purely my laziness :D

Ah, I Also Love Aptana ;)

I strongly suggest Aptana to anyone who takes JavaScript development serious.

Yes, I love JSLint :)

One thing I love more than JSLint, if any, within my JavaScript development arsenal is Aptana. One of the dozen of reasons I love Aptana is that it has builtin JSLint support: it can lint your code, real-time, as you type ;)

Aptana is an excellent and free IDE for developing a multitude of languages. But imho, where it shines is JavaScript, since there aren’t many JavaScript integrated development environments around.

The only downside of Aptana, is its intense memory consumption (around 500Kb on my PC). But it’s worth evey byte of that memory ;)

Just In Time JSLint Validation in Aptana

To enable Aptana‘s just in time JSLint validation, you need to update a JavaScript validation preference, from the window/preferences menu, as shown in the picture below:

Aptana JSLint Validation Setup

Aptana JSLint Validation Setup


And then you are good to go: All your JavaScript files will be validated “as you type”.

After validating all the files, I’ve found other bugs big and little, mixed together :)

Show Love to JSLint

Better to fix bugs while you are coding, then to see them propagate to the production code.

JavaScript is a loose-typed and extremely sloppy language. Tools like JSLint are here to bring an order to it.

The more you love JSLint, you’ll find out that the lesser it hurts your feelings ;)

You can click here, to get the source code of the linted and bugfixed version of o2.js (15.1Kb zipped archive) »»

…

What tools and “IDE”s do you use to sanitize your JavaScript?
Do you have any suggestion?
Feel free to share :)

It's me: Volkan! Jack of all Trades, Samurai of JavaScript ;) Since 2003, I’ve been doing front-end development on client-heavy AJAX web applications. Currently, I'm a JavaScript Hacker at "SocialWire". Before that I was a VP of Technology at "GROU.PS", a well-known do-it-yourself social networking platform that allows people to come together and form interactive communities around a shared interest or affiliation. Before that, I was a JavaScript Engineer at "LiveGO", a globally known social mash-up. Before that, I was the CTO of a business network ("cember.net") which was acquired by Xing AG for around 4.2M Euros. See my linkedin profile to find more about me; I also share worth-following bits an pieces on twitter.

VIsit Volkan Özçelik's website

4 Comments

  • Reply Ozgur . October 5, 2011 .

    I am really confused with that hoisted stuff. You just changed

    if(typeof o2 == ‘undefined’) {
    var o2= {};
    }

    to

    if(typeof o2 == ‘undefined’) {
    window.o2= {};
    }

    aren’t these identical anyway?

    • Reply Volkan Özçelik . October 5, 2011 .

      @Ozgur

      Thanks for your comment.

      You’re not alone :) Hoisting is a nasty deamon ;) .

      Let me try to explain step by step.

      The intention of the code:

      if(typeof o2 == ‘undefined’){
      var o2 = {};
      }

      is to define a fresh o2 namespace, if it has not been defined beforehand; and leave the namespace intact if it has been define before (possibly in a script file included before this file).

      Let’s say we have file1.js:

      // file1.js
      var o2 = {
      gizmo : function(){}
      };

      and file2.js:

      // file2.js
      if(typeof o2 == ‘undefined’){
      var o2 = {};
      }

      The if in file2.js will always evaluate true
      (even if we define an o2 namespace in file1.js)
      and o2.gizmo will evaluate to “undefined”, which is what we do not want.

      The JavaScript interpreter sees the code

      if(typeof o2 == ‘undefined’){
      var o2 = {};
      }

      as

      // Interpreter: override o2 namespace and set o2 to undefined:
      var o2;
      // Interpreter: this will always be true no matter what:
      if(typeof o2 == ‘undefined’){
      o2 = {};
      }

      So it’s not me, changing the code; it’s how the code is seen by the JavaScript runtime ;) .

      Hope this makes things a little more clear.

      Cheers.

  • Reply Ozgur . October 5, 2011 .

    Thanks for your quick reply Volkan.

    I think you are wrong [ I confirmed this on #javascript and by checking myself ]

    // file2.js
    if(typeof o2 == ‘undefined’){
    var o2 = {};
    }

    doesn’t shadow o2 in

    // file1.js
    var o2 = {
    gizmo : function(){}
    };

    Your code snippet is similar to the following, isn’t it?

    var o2= {gizmo:function(){}};
    var o2;
    if(typeof o2==”undefined”)
    { o2={}; }

    in this case, var o2; doesn’t redefine o2 to “undefined”. I hope I am wrong.

    Cheers.

    • Reply Volkan Özçelik . October 5, 2011 .

      Hi Ozgur,

      Your argument is pretty solid.

      So solid that, this blog post may need a rewrite :)

      May be I had something else in my mind while I was scribbling this post, I don’t know.

      Since o2 is already defined and initialized in file1.js, the fact that it’s hoisted in file2.js does not re-initialize it to undefined.

      Thanks for showing me I’m wrong.

      I’ll update the post accordingly.

      Mea culpa :)

      Volkan.

Leave a Reply





o2.js _
Fork Ribbon