JSLint

Posted at 12:28 pm on January 28th, 2009

Filed in:

A couple colleagues have asked me about the ways things are arranged in Clumpy.js. So now that I’m sitting in bed, doped up on painkillers after having my wisdom teeth removed, it’s obviously the perfect time to write a blog post about JSLint, Douglas Crockford’s JavaScript Verifier Code Quality Tool.

The question was why I first declare the names of all my functions using var, and then start assigning functions to them. This is a pattern I adopted about six months ago, before which JSLint had a long history of hurting my feelings whenever I wanted to do things like this:

var one;

function two () {
    /* snip */
    three();
}

function three () {
    /* snip */
    if (one) {
        two();
    }
}

It would tell me:

Problem at line 8 character 16: ‘three’ was used before it was defined.

And of course if I reversed the order of the functions, I’d get this:

Problem at line 10 character 14: ‘two’ was used before it was defined.

What’s a poor sap to do? I knew there was nothing wrong with recursive references like this, so I had always just ignored that warning. After all, I wasn’t trying to impress JSLint, I knew what I was doing, and that error message wasn’t really explained.

But whenever I find myself breaking rules that I don’t fully understand, I keep mulling it over until something clicks. Finally, I realized what JSLint was trying to tell me: Not that I couldn’t have two functions that used each other, but that I had to declare each one before I used a reference to it. So, I changed the above into this:

var one, two, three;

two = function () {
    /* snip */
    three();
};

three = function () {
    /* snip */
    if (one) {
        two();
    }
};

And with that, JSLint and I were ecstatic.

What I didn’t expect, though it seems obvious now, was how greatly this would improve the readability of my programs later, after I’d forgotten how they worked. In JavaScript, functions are just objects stored in regular variables, so it’s good to have all the declarations right there in one place.

And that’s just one of the many ways JSLint can improve your life. If you haven’t tried it, go do it now! This is the best advice you’ll get all day.

10 Responses

  1. Hatem Nassrat said:

    Thank you my friend. This drove me crazy. I just now found out the right way to declare the function handle before writing the implementation.

    February 28th, 2009 at 4:18 pm
  2. Pirkka Hartikainen said:

    Thanks, this helped me out too! I couldn't figure out what was so bad about not having my functions declared in a certain (and impossible to reach) order.

    May 7th, 2009 at 5:45 am
  3. Thanks for the awesome tip...i've been racking my brain trying to get my perfectly working scripts to validate with jslint haha

    June 2nd, 2009 at 4:46 pm
  4. Thanks, this helped me get a better perspective on the JSLint error. I think I am going to restructure my code to use variable declarations like you describe here.

    September 20th, 2009 at 9:16 am
  5. peter said:

    I disagree. I think what you are suggest might be useful, but you are in a sense tricking jslint.
    Douglas Crockford says that he expects functions to be defined before they are used (note the function, not the variable)

    Also newer functional languages such as f sharp also demand that functions are defined before they are used

    August 25th, 2010 at 3:29 pm
  6. Peter, what do you disagree with?

    How would you suggest we go about writing two functions that recursively call each other? It is necessary for one function to be placed before the other in code; therefore, the invocation of one of the two functions must take place at a position in the file that is earlier than the position at which that function is defined.

    How is it done in F Sharp?

    August 25th, 2010 at 4:49 pm
  7. peter said:

    Thomas,

    Unfortunately, I don't know.
    I came to this site looking for an answer to that very question

    F sharp has a construction called "and" where you declare function a and function b joined by "and", thus informing the compiler that function a will recursively call function b and vice versa

    However I haven't figured out how to deal with the (simpler) case you describe where function a needs to call function b and vice versa in a non recursive way

    Perhaps you join both functions together using some higher order function.

    If anyone has any ideas I would be grateful to hear them

    August 27th, 2010 at 2:35 pm
  8. peter said:

    I guess I was taking the meaning of recursive too literally. It looks like in f sharp a function marked as recursive does not have to call itself.

    The code below does what we want, ie calling the f2 function before it is defined.
    let rec f1 () =
    printfn "in f1"
    f2()
    and f2 () =
    printfn "in f2"

    If you add a line at the end calling f1() from f2 it also works and forms and unending loop

    But I don't know how to do the equivalent in javascript

    August 27th, 2010 at 7:08 pm
  9. Thanks. I didn't fully understand the issue until reading your post. Made it very clear.

    September 12th, 2011 at 8:05 pm
  10. Good stuff. Reading the post and the comments was very enlightening.

    November 20th, 2011 at 5:17 pm

Leave a Comment

  • Formatting
    • No HTML. Any code you enter will display as that code.
    • If you are putting code in your reply in order to present the code itself, you can use these special HTML comments for formatting:
      Inline: <!--code-->...<!--/code-->
      Block: <!--pre-->...<!--/pre-->

© Thomas Peri