Topic on Manual talk:Coding conventions/JavaScript

Whitespace inside of square brackets

12
Fomafix (talkcontribs)

What is the coding convention for whitespace inside of square brackets?

var array = ['foo', 'bar'];

or

var array = [ 'foo', 'bar' ];
Mattflaschen (talkcontribs)

None should be used adjacent to the brackets (i.e. the first is correct). The only exception I can think of is when there's a line break immediately after the first bracket (generally used for a long list, or at least a long item).

This post was posted by Mattflaschen, but signed as Superm401.

Jdforrester (WMF) (talkcontribs)

I think this is outdated – I believe that the rule is now you always have spaces when creating an array, but never when accessing:

Right
var array = [ 'foo', 'bar' ];
array[0].print();
Wrong
var array = ['foo', 'bar'];
array[ 0 ].print();
Danwe (talkcontribs)

+1 - This seems much more consistent with the space rules for normal brackets ( and ).

Santhosh.thottingal (talkcontribs)

I doubt whether we need to avoid space while accessing it. When in doubt I usually refer https://contribute.jquery.org/style-guide/js/#arrays-and-function-calls since that is the closest convention to MediaWiki(double quotes vs single quote being major difference). According to that, conventions for white spaces in arrays and function calls

Right

array = [ "*" ];
array = [ a, b ]; 
foo( arg ); 
foo( "string", object ); 
foo( options, object[ property ] ); 
foo( node, "property", 2 );

This also makes it consistent with rules for normal brackets-(). "When a function has parameters, there should be a space on the inside side of both parentheses, for both function definitions and function calls."

I think we need to decide on this and update the Manual. I see square brackets used with and without white space in our codebase(example). Thanks.

Amire80 (talkcontribs)

I agree with Santhosh - consistency with all kinds of brackets and with the jQuery conventions is a good thing.

Just to be sure - this also includes constructs such as array[ i ], right? So

  • array[ i ] - correct
  • array[i] - incorrect
Danwe (talkcontribs)

Would be consistent. Also, array[ 0 ].

Jdforrester (WMF) (talkcontribs)
Technical 13 (talkcontribs)

I'll note that what WMF has for a coding convention is exactly the opposite to what JSlint thinks it should be. It's a real pain to have to JSlint my code to meet other stuff and then have to go back and manually add the MWF CC reguarding whitespace. I propose that either an alternative to JSlint be made available for WMF coding conventions or that the coding conventions be made to comply with the JSlint the rest of the world uses. Thanks for reading and I look forward to responses.

Jdforrester (WMF) (talkcontribs)

Use jscs with the "wikimedia" preset and you'll be great.

Technical 13 (talkcontribs)

What's jscs? Is it a plugin for Notepadd++? Where do I DL it or find documentation on it?

Jdforrester (WMF) (talkcontribs)

jscs == JavaScript Code Style checking module: http://jscs.info/

We use it at Wikimedia to automatically spot violations of the coding conventions. Each repo has it's own configuration, but over time we're slowly converging each repo to compliance with the complete set of the coding conventions that we have.

I've never heard of "Notepad++" but I assume it's a text editor you choose to use. I don't know if it has a jscs plugin; the editor I use (Atom) does, which is very useful.