Core JS files mixup many declarations way:

var i, j;
var i, j = 'xyz';
var i;
     j = 'xyz';

Suggestion from crockford:
(http://javascript.crockford.com/code.html)

It is preferred that each variable be given its own line and comment. They should be listed in alphabetical order.

    var currentEntry; // currently selected table entry
    var level;        // indentation level
    var size;         // size of table

example from jQuery source:

var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

My suggestion:

var i, j; // keeps all no assigned vars in single line
var k = 'xyz' // assigned vars in single line
var foo = 'xyz' // 

Comments

nod_’s picture

Issue tags: +JavaScript clean-up

I brought up the subject in #1089300: Clean up drupal.js. Might want to cross-post to get some more people here.

I agree with this.

sun’s picture

Title: [Code Standard] Javascript Variable Declarations » Javascript coding standards for variable declarations
Issue tags: +JavaScript, +Coding standards
sun’s picture

Title: Javascript coding standards for variable declarations » JavaScript coding standards for variable declarations

Regardless of what we decide on:

Inline comments have to be located above the remarked line, not behind/next to it on the same line.

jhodgdon’s picture

Title: JavaScript coding standards for variable declarations » [policy, no patch] JavaScript coding standards for variable declarations
droplet’s picture

So far, there's 2 options.

Option 1:

var options;
var name;
var src;
var copy;
var copyIsArray;
var clone;
// comment here
var k = 'xyz';
var array = ['apple', 'orange'];
var object = {
  'a': 'apple',
  'o': 'orange',
};

Cons:
- waste more spaces, eg:

Option 2:

var options, name, src, copy, copyIsArray, clone;
// comment here
var k = 'xyz';
var array = ['apple', 'orange'];
var object = {
  'a': 'apple',
  'o': 'orange',
};

Cons:
- 2 steps to assign a value, eg:

var i, j;
to

var i;
var j = 1;
RobLoach’s picture

jQuery has already figured this out for us. We use jQuery, so lets go with what they recommend, but with two-spaced whitespace of course:

var options, name, src, copy, copyIsArray, clone, // Keep all no assigned vars in single line.
  target = arguments[0] || {}, // Assignments on following lines.
  i = 1,
  length = arguments.length,
  deep = false;
nod_’s picture

The issue i'm seeing there is people not putting "," or ";" at the right place and create leaking vars like crazy. Misplacing a ";" won't crash the thing like in php, it'll just be silent. Unless we force "use strict";

It would be ideal but too error prone.

sun’s picture

It's way too pedantic to enforce a rule for how to write/define variables. All of the options are perfectly legit.

Enforcing alphabetic sorting, separate vars on separate lines, and whatnot is way too specific. Code should always be written in a way that makes sense within the context and for the particular goal.

Coding standards should define how to write code, if you write it in a certain way. Only in very special edge-cases, in which it may technically, organizationally, structurally, or politically matters, coding standards may ask to write code in a certain way. But that's clearly not the case here.

For example, coding standards should say that, if you declare multiple variables on one line, then the line should not exceed 80 chars in total (with commonly known exceptions to the rule). They may also recommend that you start a new line of variable declarations instead of continuing indented on the next line. But they should also clarify how to write the code when continuing to the next line. They may also say that declarations that need a comment should be written as separate variable declarations, so it is clear to which declaration the comment refers to.

nod_’s picture

Status: Needs review » Closed (won't fix)

It's way too pedantic to enforce a rule for how to write/define variables. All of the options are perfectly legit.

At the end of the day, I agree. Let's just make the other issues about js doc move forward.

droplet’s picture

umm..in Drupal World, I'm not sure.

CSS enforcing alphabetic sorting, even enforcing color hex to lower case. we have another issue enforing else if to elseif #1509838: Enforce "elseif" standard.

In my views,

It's closed to CSS.

we suggested this

#forum td.posts,
#forum td.topics,
#forum td.replies,
#forum td.pager {

But not

#forum td.posts, #forum td.topics, #forum td.replies

It's more consistency and reducing the changes during each patches.
for example, I setup my IDE format rule to Option 1. .. used in a option 2 file. it will be a lot of changes in the patch.

sun’s picture

Status: Closed (won't fix) » Active

Closing might have been a bit premature, yes.

At the very least, the docs could point out the high-level coding style parameters, similar to those I gave as examples in #8.

pounard’s picture

Agree with #8 and #9 here. My real opinion is that we should probably follow JSLint, but not everyone seems to want it, so I'd prefer recommendations over strictness as #8 says.

seutje’s picture

feels silly to put var in front of everything, the first "var" is like "here be var statements till ye hit a semicolon"
but it also feels weird to put all no-assignment vars on a single line, isn't that what we have minification for? I usually place my no-assignment ones last, but all on a separate line
I would, however, prefer to set the indentation to variable name, like so:

// comment
var foo = 'foo',
    // comment
    bar = {
      // comment
      'meh' = 'bla',
      // comment
      'bla' = 'meh
    },
    // comment
    baz,
    // comment
    meh;

But this is probably not the most readable format to everyone.

nod_’s picture

Status: Active » Closed (won't fix)

See #9, this is not a useful issue.

seutje’s picture

Status: Closed (won't fix) » Active

So can we at least agree on a recommendation to put in the documentation, because right now it's all random and confusing a lot of people.

seutje’s picture

Does anyone have any objection to putting a recommendation in the doc like the following:

Variable declaration

It is not recommended not to mix assignment and no-assignment variables under a single var statement.
Additionally, it is preferred to use multiple var statements in combination with new-lines to avoid having variables accidentally leak into the global scope.

// confusing
var foo = 'bar', x, y, meh = 'bla';

// error-prone
var foo = 'bar',
    x,
    y,
    meh = 'bla';

// better
var x, y;
var foo = 'bar';
var meh = 'bla';
nod_’s picture

All good for me, maybe add a sentence about comments that should be above the variable, not after, on the same line.

seutje’s picture

I'm fine with adding that, but the docs already state

Comments should be on a separate line immediately before the code line or block they reference.
nod_’s picture

oh ok then, don't mind me :)

nod_’s picture

Status: Active » Closed (duplicate)