How does this nested ternary operator work using javascript?

Question

I am trying to understand what does this nested ternary operator mean using javascript?

below is the code,

const columns = !isUser1Readable
    ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
    : !isUser2Readable
    ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
    : allColumns;

what i have understood?

seems like if isUser1Readable evaluates to false it filters allcolumns array such that it doesn't contain column from columnIdsUser1

if isUser1Readable is true and isUser2Readable is false then filters allcolumns array such that it doesn't contain column from columnIdsUser2

But when does allColumns is assigned to columns?

Could someone help me understand what this nested ternary operator does above. Thanks.

allColumns is assigned to columns only when isUser1Readable is true and isUser2Readable is also true. — evolutionxbox
– evolutionxbox, Commented Sep 13, 2021 at 11:59

trincot · Accepted Answer · 2021-09-13 11:59:07Z

2

but when does allColumns is assigned to columns?

In the remaining case, i.e. where both isUser1Readable and isUser2Readable are true.

The chained ternary expression can be interpreted as an if ... else if ... else sequence:

let columns;
if (!isUser1Readable) {
    columns = allColumns.filter(column => !columnIdsUser1.includes(column.id));
} else if (!isUser2Readable) {
    columns = allColumns.filter(column => !columnIdsUser2.includes(column.id));
} else {
    columns = allColumns;
}

answered Sep 13, 2021 at 11:59

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2021-09-13 12:00:08Z

The conditional operator¹ is greedy. The expression is clearer with indentation:

const columns = !isUser1Readable
    ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
    : !isUser2Readable
        ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
        : allColumns;

If !isUser1Readable is true, columns is assigned the result of allColumns.filter(column => !columnIdsUser1.includes(column.id)).
Otherwise
- If !isUser2Readable is true, columns is assigned the reuslt of of allColumns.filter(column => !columnIdsUser2.includes(column.id))
- Otherwise, columns is assigned allColumns.

but when does allColumns is assigned to columns?

When both !isUser2Readable and !isUser2Readable are false.

¹ Although people frequently call it "the ternary operator," it's actually just a ternary operator (an operator accepting three operands). It's currently JavaScript's only ternary operator, but that could change. It's name is "the conditional operator."

Yves Kipondo · Accepted Answer · 2021-09-13 12:05:24Z

As the ternary operator is define like this

condition ? exprIfTrue : exprIfFalse

Condition: is the condition which is checked
exprIfTrue: is the code which is process in case the Condition is evaluate to true
exprIfFalse: is the code which is process in case the Condition is evaludate to false

The code which you provide can be refactor like this

let allColumns = [];
if(!isUser1Readable) {
    allColumns = allColumns.filter(column => {
        return !columnIdsUser1.includes(column.id);
    });
} else if (!isUser2Readable) {
    allColumns = allColumns.filter(column => {
        return !columnIdsUser2.includes(column.id);
    });
}else {
    columns = allColumns;
}

You can learn more about Conditional (ternary) operator

customcommander · Accepted Answer · 2021-09-13 12:39:59Z

0

I quite like using nested conditional operators in expressions but I find that authoring style does matter to improve readability. (Although YMMV.)

This is how I would have written it:

const columns =
  ( !isUser1Readable ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
  : !isUser2Readable ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
                     : allColumns);

Which reads as:

const columns =
  (      if !X : do A
  : else if !Y : do B
               : otherwise do C)

So allColumns is returned if and only if both booleans (X & Y) are true meaning that the first two checks will both evaluate to false.

answered Sep 13, 2021 at 12:39

customcommander

19.3k6 gold badges70 silver badges96 bronze badges

Collectives™ on Stack Overflow

How does this nested ternary operator work using javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related