Javascript one line If...else...else if statement

Question

I know you can set variables with one line if/else statements by doing var variable = (condition) ? (true block) : (else block), but I was wondering if there was a way to put an else if statement in there. Any suggestions would be appreciated, thanks everyone!

Nested ternary operator is what you are describing. Looks like this answers the question: http://stackoverflow.com/questions/10526739/a-somewhat-painful-triple-nested-ternary-operator — lwalden, Mar 13 '15 at 22:41

score 264 · Accepted Answer · answered Mar 13 '15 at 22:42

264

Sure, you can do nested ternary operators but they are hard to read.

var variable = (condition) ? (true block) : ((condition2) ? (true block2) : (else block2))

answered Mar 13 '15 at 22:42

Gremash

8,158
6
30
44

32

Yeah, in this case `if() { ... } else if() { ... } else { ... }` is probably more readable. – Spencer Wieczorek Mar 13 '15 at 22:43
5

Any ternary operators are hard to read. They're terse and not descriptive. Even non programmers have an idea what if () else () might mean. – Almo Mar 14 '15 at 02:43
Hard to read... unless you use line breaks and indents properly, then it can be quite easy. – General Grievance Feb 05 '22 at 05:55

Qwerty · Answer 2 · 2020-12-04T12:15:27.773

tl;dr

Yes, you can... If a then a, else if b then if c then c(b), else b, else null

a ? a : (b ? (c ? c(b) : b) : null)

a
  ? a
  : b
      ? c
        ? c(b)
        : b
      : null

longer version

Ternary operator ?: used as inline if-else is right associative. In short this means that the rightmost ? gets fed first and it takes exactly one closest operand on the left and two, with a :, on the right.

Practically speaking, consider the following statement (same as above):

`a ? a : b ? c ? c(b) : b : null`

The rightmost ? gets fed first, so find it and its surrounding three arguments and consecutively expand to the left to another ?.

   a ? a : b ? c ? c(b) : b : null
                 ^                  <---- RTL
1.            |1-?-2----:-3|
             ^ <-
2.        |1-?|--2---------|:-3---|
     ^ <-
3.|1-?-2-:|--3--------------------|

result: a ? a : (b ? (c ? c(b) : b) : null)

This is how computers read it:

Term a is read.
Node: a

Nonterminal ? is read.
Node: a ?

Term a is read.
Node: a ? a

Nonterminal : is read.
Node: a ? a :

Term b is read.
Node: a ? a : b

Nonterminal ? is read, triggering the right-associativity rule. Associativity decides:
node: a ? a : (b ?

Term c is read.
Node: a ? a : (b ? c

Nonterminal ? is read, re-applying the right-associativity rule.
Node: a ? a : (b ? (c ?

Term c(b) is read.
Node: a ? a : (b ? (c ? c(b)

Nonterminal : is read.
Node: a ? a : (b ? (c ? c(b) :

Term b is read.
Node: a ? a : (b ? (c ? c(b) : b

Nonterminal : is read. The ternary operator ?: from previous scope is satisfied and the scope is closed.
Node: a ? a : (b ? (c ? c(b) : b) :

Term null is read.
Node: a ? a : (b ? (c ? c(b) : b) : null

No tokens to read. Close remaining open parenthesis.
#Result is: a ? a : (b ? (c ? c(b) : b) : null)

Better readability

The ugly oneliner from above could (and should) be rewritten for readability as:
(Note that the indentation does not implicitly define correct closures as brackets () do.)

a
  ? a
  : b
      ? c
        ? c(b)
        : b
      : null

for example

return a + some_lengthy_variable_name > another_variable
        ? "yep"
        : "nop"

Bonus: Logical operators

var a = 0 // 1
var b = 20
var c = null // x=> {console.log('b is', x); return true} // return true here!

a
  && a
  || b
      && c
        && c(b) // if this returns false, || b is processed
        || b
      || null

Using logical operators as in this example is ugly and wrong, but this is where they shine...

"Null coalescence"

_{This approach comes with subtle limitations as explained in the link below. For proper solution, see Nullish coalescing in Bonus2.}

function f(mayBeNullOrFalsy) {
  var cantBeNull = mayBeNullOrFalsy || 42                    // "default" value
  var alsoCantBe = mayBeNullOrFalsy ? mayBeNullOrFalsy : 42  // ugly...
  ..
}

Short-circuit evaluation

false && (anything) // is short-circuit evaluated to false.
true || (anything)  // is short-circuit evaluated to true.

Logical operators
Null coalescence
Short-circuit evaluation

Bonus2: new in JS

Proper "Nullish coalescing"

developer.mozilla.org~Nullish_coalescing_operator

function f(mayBeNullOrUndefined, another) {
  var cantBeNullOrUndefined = mayBeNullOrUndefined ?? 42
  another ??= 37 // nullish coalescing self-assignment
  another = another ?? 37 // same effect
  ..
}

Optional chaining

Stage 4 finished proposal https://github.com/tc39/proposal-optional-chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

// before
var street = user.address && user.address.street
// after
var street = user.address?.street

// combined with Nullish coalescing
// before
var street = user.address
  ? user.address.street
  : "N/A"

// after
var street = user.address?.street ?? "N/A"

// arrays
obj.someArray?.[index]

// functions
obj.someMethod?.(args)

Masood · Answer 3 · 2019-06-17T15:11:44.890

17

In simple words:

var x = (day == "yes") ? "Good Day!" : (day == "no") ? "Good Night!" : "";

edited Jun 17 '19 at 15:11

answered May 29 '18 at 13:57

Masood

1,545
1
19
30

score 5 · Answer 4 · answered Mar 13 '15 at 22:45

This is use mostly for assigning variable, and it uses binomial conditioning eg.

var time = Date().getHours(); // or something

var clockTime = time > 12 ? 'PM' : 'AM' ;

There is no ElseIf, for the sake of development don't use chaining, you can use switch which is much faster if you have multiple conditioning in .js

score 5 · Answer 5 · answered May 25 '17 at 18:40

I know this is an old thread, but thought I'd put my two cents in. Ternary operators are able to be nested in the following fashion:

var variable = conditionA ? valueA : (conditionB ? valueB: (conditionC ? valueC : valueD));

Example:

var answer = value === 'foo' ? 1 :
    (value === 'bar' ? 2 : 
        (value === 'foobar' ? 3 : 0));

score 5 · Answer 6 · answered Aug 13 '21 at 04:27

5

if-else:

a = b ? (true block) : (false block)

if-else if-else:

a = b ? (true block) : b = c ? (true block) : (false block)

if:

a = b && (true block)

if-else-if(nested):

a = b ? (true block) : b = c && (true block)

note think so much, just implement and see the results, where a, b and c is variable

answered Aug 13 '21 at 04:27

rajkanani

173
3
5

2

simple is better – Paul Iverson Cortez Jan 26 '22 at 08:24

score 3 · Answer 7 · answered Mar 13 '15 at 22:44

You can chain as much conditions as you want. If you do:

var x = (false)?("1true"):((true)?"2true":"2false");

You will get x="2true"

So it could be expressed as:

var variable = (condition) ? (true block) : ((condition)?(true block):(false block))

score 3 · Answer 8 · edited Jul 17 '19 at 17:33

3

  a === "a" ? do something
: a === "b" ? do something
: do something

edited Jul 17 '19 at 17:33

double-beep

5,031
17
33
41

answered Jul 17 '19 at 17:29

BBB.CCC

31
1

5

Hi, welcome to stack overflow. For a useful answer this reaction needs to be extended. Explain why this is an answer to the question. – Jeroen Heier Jul 17 '19 at 17:48

score 0 · Answer 9 · answered Jan 28 '22 at 10:26

0

if i use code like this

const alpha = a ? a : b ? b : c

it will get

Extract this nested ternary operation into an independent statement.

from so i recommend to use this

const alpha = a || b || c

it works for me

answered Jan 28 '22 at 10:26

HendyCrcs

111
11