Why ternary operator in JS with multiple statements is not working?

Question

I know ternary operator with multiple statements works in React/JavaScript with:

condition ? (statement1,statement2,...) : (statement);.

Explored to get to know how it works.

Following is my code which is causing an error:

localProducts[productFoundAt].qty > 0 ? (localProducts[productFoundAt].qty-- , localCartedProducts[iterator].qty++) : alert("More quantity not available");

Error:

./src/reducers/reducer.js Line 26:21: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error.

Similar code with if/else is working fine:

if (localProducts[productFoundAt].qty > 0) {
    localProducts[productFoundAt].qty--;
    localCartedProducts[iterator].qty++
} else {
    alert("More quantity not available");
}

What I am doing wrong here? Thanks for the help. Also why similar code working here?

let a = 10;
let b = 10;

a==b ? (a-- , b--):alert("Hello World");
console.log(a);
console.log(b);

Those operands of the comma operator are expressions, not statements. — Bergi
– Bergi, Commented Jan 29, 2020 at 14:01
The error looks like it's coming from ESLint, not JavaScript. — Pointy
– Pointy, Commented Jan 29, 2020 at 14:03
Your linter is complaining because you shouldn't use the conditional operator when you don't need an expression as the result anywhere. Just write proper readable code, using the if statement! — Bergi
– Bergi, Commented Jan 29, 2020 at 14:03
@ZainUlAbideen EsLint doesn't say it's not valid, it complains that it is bad style. That's exactly the job of a linter. — Bergi
– Bergi, Commented Jan 29, 2020 at 15:12

Muhammad Zeeshan · Accepted Answer · 2020-01-29 14:07:35Z

1

That's a valid syntax. It is just an es-lint error which you can ignore by adding the following line:

/* eslint-disable no-unused-expressions */
localProducts[productFoundAt].qty > 0 ? (localProducts[productFoundAt].qty-- , localCartedProducts[iterator].qty++) : alert("More quantity not available");

Hope this works for you.

answered Jan 29, 2020 at 14:07

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zain Ul Abideen Over a year ago

Thanks buddy, it's working fine. Can you please help me understanding the reason?

Muhammad Zeeshan Over a year ago

We just bypassed the rule of es-lint that was producing the warning.

Zain Ul Abideen Over a year ago

I know why it worked, but I wanna know why it was not working given that it was a valid statement?

Drew Reese Over a year ago

It was working! Lint rules are established to catch common areas of code that are easy to create baked in bugs, or lead to less readable code, or any other number of reasons. It is very opinionated. Somewhere in a lint config that rule is configured to be an error. You can modify it to only be a warning (so builds succeed), remove the rule all together, or keep it and add the disable override for those times when want to use a ternary like that.

Collectives™ on Stack Overflow

Why ternary operator in JS with multiple statements is not working?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related