Coding convention in Javascript: use of spaces between parentheses

Question

According to JSHint, a Javascript programmer should not add a space after the first parenthesis and before the last one.

I have seen a lot of good Javascript libraries that add spaces, like this:

( foo === bar )  // bad according to JSHint 

instead of this way:

(foo === bar)   // good according to JSHint 

Frankly, I prefer the first way (more spaces) because it makes the code more readable. Is there a strong reason to prefer the second way, which is recommended by JSHint?

Answer 1

This is my personal preference with reasons as to why.

I will discuss the following items in the accepted answer but in reverse order.

note-one not picking on Alnitak, these comments are common to us all...

note-two Code examples are not written as code blocks, because syntax highlighting deters from the actual question of whitespace only.

I've always done it that way.

Not only is this never a good reason to defend a practice in programming, but it also is never a good reason to defend ANY idea opposing change.

JS file download size matters [although minification does of course fix that]

Size will always matter for Any file(s) that are to be sent over-the-wire, which is why we have minification to remove unnecessary whitespace. Since JS files can now be reduced, the debate over whitespace in production code is moot.

moot: of little or no practical value or meaning; purely academic. moot definition

Now we move on to the core issue of this question. The following ideas are mine only, and I understand that debate may ensue. I do not profess that this practice is correct, merely that it is currently correct for me. I am willing to discuss alternatives to this idea if it is sufficiently shown to be a poor choice.

It's perfectly readable and follows the vast majority of formatting conventions in Javascript's ancestor languages

There are two parts to this statement: "It's perfectly readable,"; "and follows the vast majority of formatting conventions in Javascript's ancestor languages"

The second item can be dismissed as to the same idea of I've always done it that way.

So let's just focus on the first part of the statement It's perfectly readable,"

First, let's make a few statements regarding code.

1. Programming languages are not for computers to read, but for humans to read.
2. In the English language, we read left to right, top to bottom.
3. Following established practices in English grammar will result in more easily read code by a larger percentage of programmers that code in English.

NOTE: I am establishing my case for the English language only, but may apply generally to many Latin-based languages.

Let's reduce the first statement by removing the adverb perfectly as it assumes that there can be no improvement. Let's instead work on what's left: "It's readable". In fact, we could go all JS on it and create a variable: "isReadable" as a boolean.

THE QUESTION

The question provides two alternatives:

( foo === bar )

(foo === bar)

Lacking any context, we could fault on the side of English grammar and go with the second option, which removes the whitespace. However, in both cases "isReadable" would easily be true.

So let's take this a step further and remove all whitespace...

(foo===bar)

Could we still claim isReadable to be true? This is where a boolean value might not apply so generally. Let's move isReadable to an Float where 0 is unreadable and 1 is perfectly readable.

In the previous three examples, we could assume that we would get a collection of values ranging from 0 - 1 for each of the individual examples, from each person we asked: "On a scale of 0 - 1, how would you rate the readability of this text?"

Now let's add some JS context to the examples...

1. if ( foo === bar ) { } ;
2. if(foo === bar){};
3. if(foo===bar){};

Again, here is our question: "On a scale of 0 - 1, how would you rate the readability of this text?"

I will make the assumption here that there is a balance to whitespace: too little whitespace and isReadable approaches 0; too much whitespace and isReadable approaches 0.

example: "Howareyou?" and "How are you ?"

If we continued to ask this question after many JS examples, we may discover an average limit to acceptable whitespace, which may be close to the grammar rules in the English language.

But first, let's move on to another example of parentheses in JS: the function!

function isReadable(one, two, three){};

function examineString(string){};

The two function examples follow the current standard of no whitespace between () except after commas. The next argument below is not concerned with how whitespace is used when declaring a function like the examples above, but instead the most important part of the readability of code: where the code is invoked!

Ask this question regarding each of the examples below...

"On a scale of 0 - 1, how would you rate the readability of this text?"

1. examineString(isReadable(string));

2. examineString( isReadable( string ));

The second example makes use of my own rule

1. whitespace in-between parentheses between words, but not between opening or closing punctuation. i.e. not like this examineString( isReadable( string ) ) ; but like this examineString( isReadable( string )); or this examineString( isReadable({ string: string, thing: thing });

If we were to use English grammar rules, then we would space before the "(" and our code would be...

examineString (isReadable (string));

I am not in favor of this practice as it breaks apart the function invocation away from the function, which it should be part of.

examineString(); // yes; examineString (): // no;

Since we are not exactly mirroring proper English grammar, but English grammar does say that a break is needed, then perhaps adding whitespace in-between parentheses might get us closer to 1 with isReadable?

I'll leave it up to you all, but remember the basic question:

"Does this change make it more readable, or less?"

Here are some more examples in support of my case.

Assume functions and variables have already been declared...

input.$setViewValue(setToUpperLimit(inputValue));

Is this how we write a proper English sentence?

input.$setViewValue( setToUpperLimit( inputValue ));

closer to 1?

config.urls['pay-me-now'].initialize(filterSomeValues).then(magic);

or

config.urls[ 'pay-me-now' ].initialize( fitlerSomeValues ).then( magic );

(spaces just like we do with operators)

Could you imagine no whitespace around operators?

var hello='someting';

if(type===undefined){};

var string="I"+"can\'t"+"read"+"this";

What I do...

I space between (), {}, and []; as in the following examples

function hello( one, two, three ){

return one;

}

hello( one );

hello({ key: value, thing1: thing2 });

var array = [ 1, 2, 3, 4 ];

array.slice( 0, 1 );

chain[ 'things' ].together( andKeepThemReadable, withPunctuation, andWhitespace ).but( notTooMuch );