Javascript nested ternary operator

Question

I'm missing something if someone can please explain it to me. I'm trying to re-write existing code into the ternary operator way. I'm getting the following console error :

Uncaught SyntaxError: Unexpected token }

which I understand there's a condition not properly formatted which I can't seem to find. So I'm not sure what I'm missing or if I maybe misunderstand something in the filter function? Isn't the ? item.verified === true not suppose to automatically return the objects that's true?

var engagement = "social";
var audience = [{ 'verified': true, 'name': 'Steve'},
                { 'verified': false, 'name': 'Phil'},
                { 'verified': true, 'name': 'Jason'}];
let data = [];

data = audience.filter((item) => {
    (engagement === "social") 
    ? item.verified === true
    : (engagement === 'social-crm') 
    ? item.verified === false 
    : (engagement === 'all')
    ? item
})

The syntax that I understand:

data = audience.filter((item) => {
              if (this.engagement === 'social-crm') {
                return item.verified === true;
              } else if (this.engagement === 'social') {
                return item.verified === false;
              } else if (this.engagement === 'all') {
                return item;
              }
});

Here's the fiddle I've been trying to play around with: https://jsfiddle.net/phfilly/ya73e325/7/

"I'm trying to re-write existing code into the ternary operator way." — Don't. As you have noticed, it is hard to understand. Don't make more work for whomever has to maintain your code. They'll hate you for it. That person is likely to be you but 6 months older. — Quentin
– Quentin, Commented Jun 23, 2017 at 8:21
Thanks, I understand and feel the same way. However company wants to incorporate standards and told me to change it #death — Muppet
– Muppet, Commented Jun 23, 2017 at 8:22
Can you change to this data = audience.filter((item) => (engagement === "social") ? item.verified === true : (engagement === 'social-crm') ? item.verified === false : (engagement === 'all')? item : null) — Rahul Singh
– Rahul Singh, Commented Jun 23, 2017 at 8:22
@RobG so in the else I want to return the whole object again. Does that make sense? — Muppet
– Muppet, Commented Jun 23, 2017 at 8:24
A filter function expects a truthy or falsey return value. Returning true or item produces the same result. @Quentin best comment ever :) — Jeremy Thille
– Jeremy Thille, Commented Jun 23, 2017 at 8:30

Renaat De Muynck · Accepted Answer · 2022-03-08 09:43:24Z

Yup. Your syntax isn't right. To understand why your code isn't working, it would help if you were to re-write your if-else statements a bit.

if (this.engagement === 'social-crm') {
    return item.verified === true;
} else if (this.engagement === 'social') {
    return item.verified === false;
} else if (this.engagement === 'all') {
    return item;
}

To this:

if(this.engagement === 'social-crm') { return item.verified === true; }
else {
   if(this.engagement === 'social') {item.verified === false; }
   else {
       if(this.engagement === 'all') {return item;} 
   }
}

Now, ternary operators follow a similar nested fashion.

cond1 ? val1 : ( val2 )

Where val2 => cond2 ? val3 : (val4)

Where val4 => cond3 ? val5 : val6

So, now you can rewrite your expression like this:

this.engagement === 'social-crm' ? item.verified === true : 
    (this.engagement === 'social' ? item.verified === false : 
        (this.engagement === 'all' ?  item : null))

The parenthesis matters here, because it closely mimics the nested if-elses from above.

Also note that for the inner most expression, a return value in the else must be specified. I've set it to null but you can return what you want. Do note this is the actual reason your code was failing. Apologies if the answer was long but I wanted to help you understand nested ternary operators.

Dan Prince · Accepted Answer · 2022-05-18 06:42:35Z

2

A nested ternary operator looks like this:

something = condition ? nested_condition ? value_if_both_conditions_are_true
    : value_if_nested_condition_is_false : value_if_condition_is_false;

This works even without parentheses, but as others have mentioned, it can be hard to read. Especially when multiple conditions are checked, by use of && or || in the condition parts of this example.

edited May 18, 2022 at 6:42

answered May 18, 2022 at 6:41

Dan Prince

213 bronze badges

2 Comments

Shmack Over a year ago

It would be nice to include what happens if they are both false.

Dan Prince Over a year ago

In this example, if both are false, the result is the same as when only the first condition is false

Quentin · Accepted Answer · 2017-06-23 08:23:35Z

1

A ternary operator looks like this:

something = (condition) ? a_value : a_different_value;

You forgot : a_different_value on the last case.

answered Jun 23, 2017 at 8:23

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

wdonet · Accepted Answer · 2025-04-09 17:13:19Z

I know this is a response for an old post but people still get here for guidance so this is my suggestion.

For readability, please avoid nested ternary operator or if-else cases. Do instead:

const engagement = "social";
const audience = [{ 'verified': true, 'name': 'Steve'},
                { 'verified': false, 'name': 'Phil'},
                { 'verified': true, 'name': 'Jason'}];
             
const engagementRules = {
      'social-crm': (item) => item.verified === true,
      'social': (item) => item.verified === false,
      'all': () => true, // Returning item directly is redundant for a filter, true is more appropriate
    }
  
const audienceFilter = (item) => {
  const rule = engagementRules[engagement];
  return rule && rule(item);
}

const result = audience.filter(audienceFilter);
  
console.log(result);

Rahul Singh · Accepted Answer · 2017-06-23 08:24:32Z

0

Try this

You have to have a Condition for the Ternary operator as pointed by @Quentin

data = audience.filter((item) => { (engagement === "social") ? 
item.verified === true : (engagement === 'social-crm') ? 
item.verified === false : (engagement === 'all')? 
item : null})

answered Jun 23, 2017 at 8:24

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

GMKHussain · Accepted Answer · 2022-12-31 14:41:09Z

-2

Deep nesting can write in a simpler way like this for ternary if-else

let userName = 'Amoos'
let isStudent = false
let age = 7


userName 
      ? console.log(`User name: ${userName} 😊`) 
      : console.log('Unknow user');
      isStudent ? console.log("Yes, is student 👨‍🎓") 
                : console.log('No, not a student 👨‍🎓');
                (age<18) ? console.log("Younger 👶")
                         : console.log("Elder 😁")

answered Dec 31, 2022 at 14:41

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript nested ternary operator

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related