Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript - Ternary Operator with Multiple Statements

Tags:

javascript

Is this valid JavaScript? I saw an example where someone used commas in the ternary operator conditions, and it was marked as an error in my editor, and the example didn't run in Chrome. However, it did run in Firefox. Once I converted all the ternary statements to if/else statements, the app ran on Chrome.

a!==b ? (a=1, b=2) : (a=2, b=1) 

Edit:

This is the actual statement in the code:

a!==0?b<0?(h=b/a,e=h-1,f=-2*b+2*a*e,i=-2*b+2*a*h,d=2*h*a-2*b-2*a):(h=b/a,e=h+1,f=2*b-2*a*e,i=2*b-2*a*h,d=-2*h*a+2*b):d=h=e=f=i=0 
like image 913
Steve Avatar asked Jul 13 '11 11:07

Steve


People also ask

Can we use multiple statements in ternary operator?

Yes, we can, but with one proviso… There is no block demarcation so that action should be simple, else it would be better to abstract it away in a function and call the function from the ternary. Something we commonly see is console.

Can ternary operator have 3 conditions?

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is falsy.

How do you perform multiple operations in a ternary operator?

You can use the comma operator to execute multiple expressions in place of a single expression: arr[i] % 2 === 0? (evenCount++, totalCount++) : (oddCount++, totalCount++); The result of the comma operator is the result of the last expression.

How do you write multiple statements in JavaScript?

JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.


1 Answers

Yes, it's valid, and it runs fine in Chrome:

var a, b, c;    a = 6;  b = 7;  c = a !== b ? (a = 1, b = 2) : (a = 2, b = 1);  console.log("a = " + a);  console.log("b = " + b);  console.log("c = " + c);

I'm not saying it's a remotely good idea in code humans are meant to read. :-) I expect jamietre is correct in the comments when he/she says it looks like the result of minification.

The comma operator is a binary operator (an operator accepting two operands). It evaluates its left-hand operand (thus causing any side-effects it has, such as assignment), throws that result away, then evalutes its right-hand operand (thus causing its side-effects if any) and takes that result as its result value. If you have multiple comma operators in a row, the overall expression is evaluated in order, left-to-right, with the final result being the value resulting from the right-most operand evaluation.

And of course, you know the conditional operator (a ternary operator — one accepting three operands) is used to pick one of two sub-expressions to evaluate, on the basis of an initial expression.

So that line is very...expressive...what with a total of seven* different expressions inside it.

So in that example, the result of the overall expression is 2 if a !== b initially, or 1 if a === b initially, with the side-effects of setting a and b.

It's the side effects that make it, in my view, a questionable choice. And of course, there's no reason to use the comma operator if the left-hand operand doesn't have side effects.


* Yes, seven of 'em packed into that overall ternary:

  • a !== b
  • the first comma expression
  • a = 1
  • b = 2
  • the second comma expression
  • a = 2
  • b = 1

Re your edit with the actual statement, that one works too:

function test(a) {      var b = 7,          d = 1,          e = 2,          f = 3,          g = 4,          h = 5,          i = 6;            a!==0?b<0?(h=b/a,e=h-1,f=-2*b+2*a*e,i=-2*b+2*a*h,d=2*h*a-2*b-2*a):(h=b/a,e=h+1,f=2*b-2*a*e,i=2*b-2*a*h,d=-2*h*a+2*b):d=h=e=f=i=0;            console.log("a = " + a);      console.log("b = " + b);      console.log("d = " + d);      console.log("e = " + e);      console.log("f = " + f);      console.log("g = " + g);      console.log("h = " + h);      console.log("i = " + i);  }    test(0);  test(1);
.as-console-wrapper {    max-height: 100% !important;  }

But wow, I hope this is minified, because if a person wrote that, they must really have a thing against anyone who's supposed to maintain it later... ;-)

like image 168
T.J. Crowder Avatar answered Oct 08 '22 00:10

T.J. Crowder