## Re: Ternary Indentation Question

Expand Messages
• ... I would right it this way: function test(x) { ~~~~ use strict ; ~~~~return x === 1 ~~~~~~~~? one ~~~~~~~~: x === 2 ~~~~~~~~? two ~~~~~~~~: x === 3
Message 1 of 8 , Jan 18, 2012
--- In jslint_com@yahoogroups.com, "spence.randall@..." <randall@...> wrote:
>
> Given the following example code:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1 ? 'one' :
> ~~~~~~~~x === 2 ? 'two' :
> ~~~~~~~~~~~~x === 3 ? 'three' :
> ~~~~~~~~~~~~~~~~x === 4 ? 'four' : 'zero';
> }

I would right it this way:

function test(x) {
~~~~'use strict';
~~~~return x === 1
~~~~~~~~? 'one'
~~~~~~~~: x === 2
~~~~~~~~? 'two'
~~~~~~~~: x === 3
~~~~~~~~? 'three'
~~~~~~~~: x === 4
~~~~~~~~? 'four'
~~~~~~~~: 'zero';
}

The placement of ? and : makes it easier to read them as then and else if.
• ... I would write it this way: function test(x) { ~~~~ use strict ; ~~~~return x === 1 ~~~~~~~~? one ~~~~~~~~: x === 2 ~~~~~~~~? two ~~~~~~~~: x === 3
Message 2 of 8 , Jan 18, 2012
--- In jslint_com@yahoogroups.com, "spence.randall@..." <randall@...> wrote:

> Given the following example code:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1 ? 'one' :
> ~~~~~~~~x === 2 ? 'two' :
> ~~~~~~~~~~~~x === 3 ? 'three' :
> ~~~~~~~~~~~~~~~~x === 4 ? 'four' : 'zero';
> }

I would write it this way:

function test(x) {
~~~~'use strict';
~~~~return x === 1
~~~~~~~~? 'one'
~~~~~~~~: x === 2
~~~~~~~~? 'two'
~~~~~~~~: x === 3
~~~~~~~~? 'three'
~~~~~~~~: x === 4
~~~~~~~~? 'four'
~~~~~~~~: 'zero';
}

The placement of ? and : makes it easier to read them as then and else if.
• ... If both the if part and the else part had nested expressions, having all in the same indentation level would be confusing. This example has all the
Message 3 of 8 , Jan 18, 2012
On 01/18/2012 01:57 PM, douglascrockford wrote:
>
> --- In jslint_com@yahoogroups.com
> <mailto:jslint_com%40yahoogroups.com>, "spence.randall@..."
> <randall@...> wrote:
> >
> > Given the following example code:
> >
> > function test(x) {
> > ~~~~'use strict';
> > ~~~~return x === 1 ? 'one' :
> > ~~~~~~~~x === 2 ? 'two' :
> > ~~~~~~~~~~~~x === 3 ? 'three' :
> > ~~~~~~~~~~~~~~~~x === 4 ? 'four' : 'zero';
> > }
>
> I would right it this way:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1
> ~~~~~~~~? 'one'
> ~~~~~~~~: x === 2
> ~~~~~~~~? 'two'
> ~~~~~~~~: x === 3
> ~~~~~~~~? 'three'
> ~~~~~~~~: x === 4
> ~~~~~~~~? 'four'
> ~~~~~~~~: 'zero';
> }
>
> The placement of ? and : makes it easier to read them as then and else if.
>
If both the 'if' part and the 'else' part had nested expressions, having
all in the same indentation level would be confusing. This example has
all the nesting on the 'if' part, it is not the most generic case.
>
>

[Non-text portions of this message have been removed]
• ... ~~~~ use strict ; ~~~~return x === 1 ~~~~~~~~? one ~~~~~~~~: x === 2 ~~~~~~~~? two ~~~~~~~~: x === 3 ~~~~~~~~? three ~~~~~~~~: x === 4 ~~~~~~~~?
Message 4 of 8 , Jan 18, 2012
--- In jslint_com@yahoogroups.com <mailto:jslint_com%40yahoogroups.com> ,
douglascrockford wrote:

--- In jslint_com@yahoogroups.com <mailto:jslint_com%40yahoogroups.com> ,
"spence.randall@..." <randall@...> wrote:

> Given the following example code:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1 ? 'one' :
> ~~~~~~~~x === 2 ? 'two' :
> ~~~~~~~~~~~~x === 3 ? 'three' :
> ~~~~~~~~~~~~~~~~x === 4 ? 'four' : 'zero'; }

> I would write it this way:

> function test(x) {
~~~~'use strict';
~~~~return x === 1
~~~~~~~~? 'one'
~~~~~~~~: x === 2
~~~~~~~~? 'two'
~~~~~~~~: x === 3
~~~~~~~~? 'three'
~~~~~~~~: x === 4
~~~~~~~~? 'four'
~~~~~~~~: 'zero';
}

> The placement of ? and : makes it easier to read them as then and else if.

If the point is clarity, this is much clearer:

function test(x) {
~~~~'use strict';
~~~~var y = 'zero';
~~~~switch(x) {
~~~~~~~~case 1:
~~~~~~~~~~~~y = 'one';
~~~~~~~~~~~~break;
~~~~~~~~case 2:
~~~~~~~~~~~~y = 'two';
~~~~~~~~~~~~break;
~~~~~~~~case 3:
~~~~~~~~~~~~y = 'three';
~~~~~~~~~~~~break;
~~~~~~~~case 4:
~~~~~~~~~~~~y = 'four';
~~~~~~~~~~~~break;
~~~~~~~~default:
~~~~~~~~~~~~y = 'zero';
~~~~~~~~~~~~break; // Technically not needed
~~~~}
~~~~return y;
}

After making this change, JSLint will note that "switch" and "case" should
be at the same indentation level.

Rob
• ... case is not a statement. It is a switch level. You should take JSLint s advice.
Message 5 of 8 , Jan 18, 2012
--- In jslint_com@yahoogroups.com, "Rob Richardson" <erobrich@...> wrote:
> function test(x) {
> ~~~~'use strict';
> ~~~~var y = 'zero';
> ~~~~switch(x) {
> ~~~~~~~~case 1:
> ~~~~~~~~~~~~y = 'one';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 2:
> ~~~~~~~~~~~~y = 'two';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 3:
> ~~~~~~~~~~~~y = 'three';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 4:
> ~~~~~~~~~~~~y = 'four';
> ~~~~~~~~~~~~break;
> ~~~~~~~~default:
> ~~~~~~~~~~~~y = 'zero';
> ~~~~~~~~~~~~break; // Technically not needed
> ~~~~}
> ~~~~return y;
> }
>
> After making this change, JSLint will note that "switch" and "case" should
> be at the same indentation level.

case is not a statement. It is a switch level. You should take JSLint's advice.
• ... Thanks Rob, I agree switch makes more sense, but the question was on the indention expected, not the function itself. I just quickly created that one to
Message 6 of 8 , Jan 18, 2012
--- In jslint_com@yahoogroups.com, "Rob Richardson" <erobrich@...> wrote:
>
> --- In jslint_com@yahoogroups.com <mailto:jslint_com%40yahoogroups.com> ,
> douglascrockford wrote:
>
> --- In jslint_com@yahoogroups.com <mailto:jslint_com%40yahoogroups.com> ,
> "spence.randall@" <randall@> wrote:
>
> > Given the following example code:
> >
> > function test(x) {
> > ~~~~'use strict';
> > ~~~~return x === 1 ? 'one' :
> > ~~~~~~~~x === 2 ? 'two' :
> > ~~~~~~~~~~~~x === 3 ? 'three' :
> > ~~~~~~~~~~~~~~~~x === 4 ? 'four' : 'zero'; }
>
> > I would write it this way:
>
> > function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1
> ~~~~~~~~? 'one'
> ~~~~~~~~: x === 2
> ~~~~~~~~? 'two'
> ~~~~~~~~: x === 3
> ~~~~~~~~? 'three'
> ~~~~~~~~: x === 4
> ~~~~~~~~? 'four'
> ~~~~~~~~: 'zero';
> }
>
> > The placement of ? and : makes it easier to read them as then and else if.
>
> If the point is clarity, this is much clearer:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~var y = 'zero';
> ~~~~switch(x) {
> ~~~~~~~~case 1:
> ~~~~~~~~~~~~y = 'one';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 2:
> ~~~~~~~~~~~~y = 'two';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 3:
> ~~~~~~~~~~~~y = 'three';
> ~~~~~~~~~~~~break;
> ~~~~~~~~case 4:
> ~~~~~~~~~~~~y = 'four';
> ~~~~~~~~~~~~break;
> ~~~~~~~~default:
> ~~~~~~~~~~~~y = 'zero';
> ~~~~~~~~~~~~break; // Technically not needed
> ~~~~}
> ~~~~return y;
> }
>
> After making this change, JSLint will note that "switch" and "case" should
> be at the same indentation level.
>
> Rob
>

Thanks Rob, I agree switch makes more sense, but the question was on the indention expected, not the function itself. I just quickly created that one to illustrate JSLint's message.

-Randall
• ... I was under the impression that a line that starts with the return statement should end with a semicolon, in order to not give the interpreter a chance to
Message 7 of 8 , Jan 18, 2012
> I would write it this way:
>
> function test(x) {
> ~~~~'use strict';
> ~~~~return x === 1
> ~~~~~~~~? 'one'
> ~~~~~~~~: x === 2
> ~~~~~~~~? 'two'
> ~~~~~~~~: x === 3
> ~~~~~~~~? 'three'
> ~~~~~~~~: x === 4
> ~~~~~~~~? 'four'
> ~~~~~~~~: 'zero';
> }
>
> The placement of ? and : makes it easier to read them as then and else if.

I was under the impression that a line that starts with the return
statement should end with a semicolon, in order to not give the
interpreter a chance to mess it up.

I can't test it in IE6 right now, but isn't it conceivable that a dull
browser would turn the above function into "return x===1;"?

Or does the "'use strict';" prevent that sort of misguided benevolence?
Your message has been successfully submitted and would be delivered to recipients shortly.