"elseif" syntax in JavaScript

Question

How can I achieve an elseif in a JavaScript condition?

score 535 · Accepted Answer · edited Oct 18 '20 at 21:09

535

In JavaScript's if-then-else there is technically no elseif branch.

But it works if you write it this way:

if (condition) {

} else if (other_condition) {

} else {

}

To make it obvious what is really happening you can expand the above code using an additional pair of { and }:

if (condition) {

} else {

   if (other_condition) {

   } else {

   }

}

In the first example we're using some implicit JS behavior about {} uses. We can omit these curly braces if there is only one statement inside. Which is the case in this construct, because the inner if-then-else only counts as one statment. The truth is that those are 2 nested if-statements. And not an if-statement with 2 branches, as it may appear on first sight.

This way it resembles the elseif that is present in other languages.

It is a question of style and preference which way you use it.

edited Oct 18 '20 at 21:09

mit

11,083
11
50
74

answered Oct 23 '10 at 19:08

Jeff

21,744
6
51
55

28

When people ask questions like this.. I think it shows a fundamental misunderstanding. With `if` and `else` there really is no need of `elseif`. – mpen Oct 23 '10 at 21:12
15

@Mark, I agree... but it messes me up sometimes because I'm used to languages that have an elseif. I know it's identical, but I wonder what javascript's reason is for leaving it out. I am glad, however, that they didn't use elif, because that's just wrong :) – Jay K Aug 06 '12 at 22:39
16

@JayK: Haha.. PHP has `elseif`, perl has `elsif` (I think), and Python has `elif`.. that kind of annoyed me at first, but... I guess it's kind of cute. It does serve a slight purpose in Python and PHP though, because it wouldn't work with their colon syntax otherwise. – mpen Aug 07 '12 at 05:16
6

@Mark It more shows a misunderstanding of bracketing. Brackets aren't necessary for `if`/`else` blocks, but people are encouraged to use them, so I can understand why this looks incorrect to a new user. – Oct 08 '14 at 05:39
49

@Mark To claim that there is never a reason to use "else if" is incorrect. Else if statements are akin to using "switch", however it will allow for more elaborate comparisons. Switch, of course, allows for very simple comparisons only. So yes, there's definitely good reasons for using else if. – jolsen Apr 20 '15 at 16:29
4

@jolsen I specifically meant `elseif` as a single keyword. There are many uses for `else if`. – mpen Apr 20 '15 at 18:43
1

Nobody would design a language where you had to write `if X { ... } else { if Y { ... } else { if Z { ... } else { ... } } }` because, seriously, *yuck.* (Well, maybe something from the INTERCAL family would go there.) Single-keyword `elseif` (however it's spelled) tends to go along with mandatory block delimiters on all control structures, but I hear Swift has that with a special exception for `else if`. To sum up, there's always some way to do a chain of else-ifs, and the way it's spelled is just one of those annoying little variations you have to memorize for each language. – zwol Apr 20 '15 at 21:49
4

Mark displays inexperience with other languages and language design by raising his eyebrows at a question that would be normal to ask for people experienced in many languages. It's fine for Hari to ask this even if, as with many other questions, he could have googled it first. :) In many languages, elseif serves (and is implemented) as a compact switch/case statement. JS lacks that, and substitutes an unwieldy switch statement that makes no-one happy. – Henrik Erlandsson Nov 02 '15 at 15:10
@HenrikErlandsson Adding the space (or at least not deleting the space) makes **_me_** happy. `else if` is alive and well in JavaScript, and is identical to `elseif` in other languages. Extra brackets are not required, but whatever _blows your hair back_. – Reversed Engineer Feb 16 '16 at 12:08
4

It also helps to understand why this works. If you leave off the `{}`'s for an `if`/`else` statement in javascript, the parser applies this to the next statement only. So: `else if {...}` is the same as `else { if {...} }`. – Meekohi Jul 12 '17 at 15:42
In Python `elif` is valuable mostly because the `else` clause _must_ be indented. Repeated use of `else: if` therefore pushes what is essentially sequential logic over towards the right. – holdenweb Jan 08 '19 at 19:39
wow 13 years in and just learned this... buried in phps elseif – drooh Jun 20 '19 at 20:57

score 53 · Answer 2 · edited Apr 12 '18 at 20:22

53

Just add a space:

if (...) {

} else if (...) {

} else {

}

edited Apr 12 '18 at 20:22

Inanc Gumus

25,195
9
85
101

answered Oct 23 '10 at 19:07

jMyles

11,772
6
42
56

Tamlyn · Answer 3 · 2016-09-28T17:24:30.217

36

You could use this syntax which is functionally equivalent:

switch (true) {
  case condition1:
     //e.g. if (condition1 === true)
     break;
  case condition2:
     //e.g. elseif (condition2 === true)
     break;
  default:
     //e.g. else
}

This works because each condition is fully evaluated before comparison with the switch value, so the first one that evaluates to true will match and its branch will execute. Subsequent branches will not execute, provided you remember to use break.

Note that strict comparison is used, so a branch whose condition is merely "truthy" will not be executed. You can cast a truthy value to true with double negation: !!condition.

edited Sep 28 '16 at 17:24

answered Oct 31 '14 at 14:16

Tamlyn

22,122
12
111
127

This is not functionally equivalent AFAIK. What you can put in the conditions is much more limited, and `switch (true)` doesn't even make sense. – zwol Apr 20 '15 at 21:52
2

I admit it looks weird at first but it is equivalent. The condition can be anything you like (including function calls or whatever) and if it evaluates to `true` then that case will be met - exactly like `else if`. – Tamlyn Apr 21 '15 at 07:47
5

Oh, I see what you're doing now. That's pretty darn clever. (I added a paragraph explaining how it works, so that I could retract my downvote.) – zwol Apr 21 '15 at 15:46
1

This is a very simple, clean and elegant solution for condition lists with more than 1 "else if" condition – Steve Goossens Nov 23 '15 at 21:02
4

Not completely equivalent if the conditions don't return booleans, e.g. `if([]) alert('a')` produces the alert but `switch(true){case []:alert('a')}` doesn't. That's because `[]` is a truthy value but not equal to `true`, as @zwol explained in [this edit](http://stackoverflow.com/revisions/26676790/2). – Oriol Mar 27 '16 at 22:05
And this solution has the advantage to be ESlint friendly. – Thomas Vuillaume Mar 21 '17 at 14:10
I have never and will never use a `switch (true)` block in any of my projects in any language because there is no advantage in doing so. There is no performance gain since every condition encountered still has to be evaluated and the syntax will always be less concise that a classic `if - else if - else` block. To avoid repeating myself: https://stackoverflow.com/questions/2765981/javascript-switchtrue#comment111571809_2765998 – mickmackusa Jul 25 '20 at 22:24

skube · Answer 4 · 2019-01-19T14:41:47.563

13

Actually, technically when indented properly, it would be:

if (condition) {
    ...
} else {
    if (condition) {
        ...
    } else {
        ...
    }
}

There is no else if, strictly speaking.

(Update: Of course, as pointed out, the above is not considered good style.)

edited Jan 19 '19 at 14:41

answered May 12 '14 at 20:06

skube

5,867
9
53
77

1

You can, and you should, write this `if (condition1) { ... } else if (condition2) { ... } else { ... }`. – zwol Apr 20 '15 at 21:50
4

In essence when using `else if` you are actually omitting the optional block `{...}`. I was referencing based on [EMCAScript](http://www.ecma-international.org/ecma-262/5.1/#sec-12.5) and [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#Description).. – skube Apr 21 '15 at 14:49
13

In terms of the formal grammar of the language, you are correct, but your answer might give people the incorrect impression that `else { if ... }` is good style. – zwol Apr 21 '15 at 15:47
1

What zwol said. There is what you (skube) meant.. And then there is what you said. – Gerard ONeill Jan 18 '19 at 18:07

IdemeNaHavaj · Answer 5 · 2013-04-12T05:35:38.110

6

if ( 100 < 500 ) {
   //any action
}
else if ( 100 > 500 ){
   //any another action
}

Easy, use space

edited Apr 12 '13 at 05:35

answered Apr 11 '13 at 16:22

IdemeNaHavaj

2,297
1
12
10

score 2 · Answer 6 · answered Mar 23 '17 at 13:39

Conditional statements are used to perform different actions based on different conditions.

Use if to specify a block of code to be executed, if a specified condition is true

Use else to specify a block of code to be executed, if the same condition is false

Use else if to specify a new condition to test, if the first condition is false

score 1 · Answer 7 · answered Aug 09 '19 at 04:57

1

x = 10;
if(x > 100 ) console.log('over 100')
else if (x > 90 ) console.log('over 90')
else if (x > 50 ) console.log('over 50')
else if (x > 9 ) console.log('over 9')
else console.log('lower 9')

answered Aug 09 '19 at 04:57

zloctb

10,592
8
70
89

score 0 · Answer 8 · answered Dec 27 '18 at 10:23

0

You are missing a space between else and if

It should be else if instead of elseif

if(condition)
{

} 
else if(condition)
{

}
else
{

}

answered Dec 27 '18 at 10:23

codemirror

3,164
29
42

"elseif" syntax in JavaScript

8 Answers8

Linked

Related