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/

Answer 1

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.