New option in JSLint for multiple var declarations

Yesterday evening as I was putting to bed a few changes to this blog’s JavaScript (that would provide fodder for my continuing series on functional JavaScript), I decided to update the version of JSLint I was using in Sublime Text. When I had done so, suddenly my JavaScript file produce a huge slew of warnings that had not been there before. Whaaaat?

OK, first things first. If you are using the Sublime-JSLint package in Sublime Text, it’s a good idea to update it on a regular basis. There’s only one file to change – jslint.js – so it’s pretty easy. You need to visit Doug Crockford’s GitHub repository for JSLint and download the latest jslint.js into C:\Users\<username>\AppData\Roaming\Sublime Text 2\Packages\JSLint to replace the existing one. You’re not quite done yet since  you have to add a small piece of code right at the end of the file (after the commented-out nodejs exports statement) to allow the JSLint package to find and use it.

// ... jslint code ... //

/*node module.exports = jslint;*/

if (exports && typeof exports === 'object') {
    module.exports = jslint;
}

Save, restart Sublime Text, and you’re using the latest and greatest JSLint to check your JavaScript code when you save a JS file.

So, last night when I did this after a couple of months of using an older version, I was horrified to see that my pristine no-warnings code was producing a gazillion errors. I’m sure you know that feeling of panic: what did I screw up now?

Well, for me and my code it turned that Crockford switched a recommendation around. Prior to (get this) January 14 this year – so a couple of weeks ago, ladies and gentlemen – JSLint’s recommendation for declaring multiple variables in a function was to put them all at the top of the function in one var statement, separated by commas, terminated with a semicolon:

jQuery(function ($) {
  "use strict";

  var
    markdownConverter,
    gapi = window.gapi,
    addthis = window.addthis,
    Attacklab = window.Attacklab,
    helper,
    // etc etc

Suddenly, though, all that changed as Crockford continues to push support for ECMAScript 6 (the es6 option in JSLint) where var is frowned upon and let and const are encouraged. The problem with var is that variables declared using it are hoisted to the top of the enclosing function; this doesn’t happen with let or const. Which, incidentally, is why JSLint has always forced the recommendation that variables are declared at the top of a function, so you are not compromised by a variable declared later on. So the preference is to use let. This has the added feature that it is scoped, not by function, but by the C-style block scope (essentially scope being defined by braces).

Also – and I’m not sure why this particular recommendation is now in force – the requirement is for one variable declaration per statement. As Crockford puts it in (the current version of) the help file:

A name should be declared only once in a function. It should be declared before it is used. It should not be used outside of the block in which it is declared. A variable should not have the same name as a variable or parameter in an outer function. Do not mix var and let. Declare one name per statement.

Unfortunately he doesn’t say why that last clause (“Declare one name per statement.”) is there.

There are a couple of things you can do. First, obviously, is to change your code to declare one variable per statement. Which, eventually, as I touch files to incorporate new features and functionality, is what I shall do; after all it makes refactoring your code a lot easier. For example, the above code would then look like this:

jQuery(function ($) {
  "use strict";

  var markdownConverter;
  var gapi = window.gapi;
  var addthis = window.addthis;
  var Attacklab = window.Attacklab;
  var helper;
  // etc etc

The other way is to use the new two-week-old multivar option. Prior to this, I used this JSLint declaration at the top of my JS files:

/*jslint white this browser*/

and now I’ve added multivar:

/*jslint white this multivar browser*/

which I shall remove as and when I update the file.

So multivar comes to the rescue until I change the code properly.

  Loading links to posts on similar topics...

1 Response

#1 windows 10 audio crackling said...

23-Jul-18 9:48 AM

The work needs to be done where the high-level language needs the proper work which can be the more valuable part where you will get the new option for the jslint.

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

•  Emphasize with italics: surround word with underscores _emphasis_
•  Emphasize strongly: surround word with double-asterisks **strong**
•  Link: surround text with square brackets, url with parentheses [text](url)
•  Inline code: surround text with backticks `IEnumerable`
•  Unordered list: start each line with an asterisk, space * an item
•  Ordered list: start each line with a digit, period, space 1. an item
•  Insert code block: start each line with four spaces
•  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...

Name (required) Mail (will not be published) (required) Website Response Submit

Preview of response