Why does the jQuery source use the comma operator for variable assignment so much?

Question

Here’s an excerpt from the start the jQuery source code (1.7.1):

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$,


    // ...continues...


    // [[Class]] -> type pairs
    class2type = {};

The code is a series of variable assignments, all joined by the comma operator. As I understand the comma operator, it evaluates the expressions before and after it, and returns the value of the latter one.

As the chain of variable assignments isn’t being assigned to anything, it struck me that the code could be rewritten with semicolons in place of the commas, without changing how it operates. E.g.

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    }; /* <----- semicolon */

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery; /* <----- semicolon */

    // Map over the $ in case of overwrite
    _$ = window.$; /* <----- semicolon */

    // ...and so on.

1. Would the code have the same effect if rewritten with semicolons like this, or am I missing something?

2. If it would have the same effect, what are the style reasons for writing it with commas? (I know, for example, that Crockford doesn’t like the comma operator (see near the bottom), although I don’t know why.)

Answer 1

No. commas separate var declarations, all using first var prefix. E.g.:

var a = 1, // local
    b = 2; // local


var a = 1; // local
    b = 2; // global!

In order to achieve the same effect, write it this way:

var a = 1; // local
var b = 2; // local

Answer 2

Personally I think this is pure bad habit deformation and influence from the main language of the creator. The code becomes really hard to read and brings confusion. Especially when used in conjunction with a modular pattern where, in jQuery they declare everything on literal objects. jQuery seems to have forgotten how to declare a function constructor to instantiate a class or this simply does not apply to jQuery style.

The code will have the same effect if written with semicolon if you add a var in front of each variable:

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    }; /* <----- semicolon */

    // Map over jQuery in case of overwrite
    var _jQuery = window.jQuery; /* <----- semicolon */

    // Map over the $ in case of overwrite
    var _$ = window.$; /* <----- semicolon */

    // ...and so on.

If you omit the VAR you will create or overwrite a global variable.

Answer 3

I think this to comply with JSLint rules.

JSLint wants variable declarations separated by a comma rather than a semi-colon.

I'm not sure why Crockford denouces the comma operator when his tool encourages it. The message itelf reads:

Combine this with the previous 'var' statement.

Answer 4

I think this has several reason: one efficiency, second code tidiness and third variable scoping.

reason 1: if you specify: var var1,var2,var3; , the engine knows you're passing a list of variables because you're preceding the list with the "var" keyword. if you would do

var var1;
var var2;
var var3;

the engine would look at the var keyword, understand it's defining variables and then look at the argument. i guess looping through a list is better than re-evaluating var every time

reason 2: For me it's much more readable to read a list separated by commas than looking at equal sign somewhere in the code.

reason 3: note that var defines the variable inside the scope of a function. if you don't preceed with var you'll be defining the variables in the global scope.

p.s - jslinters like jshint often complain if you have multiple vars inside a scope rather than one list of variables....

cheers