How to interpret this conditional branching in JavaScript

Question

this.orientation = this.props.orientation
  ? this.props.orientation == 'horizontal'
    ? 'row'
    : 'column'
  : 'column';

May I know how I interpret this conditional branching? Got this code somewhere else from the web. I did read this https://javascript.info/ifelse#multiple but I still can't understand it.

From my understanding is that this.props.orientation which the orientation is retrieved from the parent. If this.props.orietation == 'horizontal' then return column? Then else if this.props.orientation =='row' then return column?

It is not really "conditional branching" but a Conditional Operator "ternary"; but I digress.. — Mark Schultheiss, Aug 10 '22 at 20:14
Oh, thanks for the information given! Glad to clarify my error. — Marcus, Aug 10 '22 at 20:23
Does this answer your question? [How do you use the ? : (conditional) operator in JavaScript?](https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript) — Andreas is moving to Codidact, Apr 30 '23 at 05:03

score 1 · Accepted Answer · edited Aug 10 '22 at 20:22

1

Inserting parentheses will make things clearer.

this.orientation = this.props.orientation ?
(this.props.orientation == 'horizontal' ? 'row' : 'column') :
'column';

If this.props.orientation is not null or empty, it returns either 'row' or 'column' based on its value compared to "horizontal" ('row' if true, 'column' otherwise). If it is null or empty, it returns 'column' as a default.

edited Aug 10 '22 at 20:22

Mark Schultheiss

32,614
12
69
100

answered Aug 10 '22 at 20:16

scatter

903
7
24

How to interpret this conditional branching in JavaScript

1 Answers1