How to interpret this conditional branching in JavaScript

August 10, 2022

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?

>Solution :

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.