I run performance test jsperf for three simple if else statements with same logic:

test if1:

var a = "1";
if (a == "1") {
  a = "1"
} else {
  a = "2"
}

test if2:

    var a = "1";
    if (a == "1")
      a = "1"
    else
      a = "2"

test if3:

var a = "1";
a == "1" ? a="1" : "2";

Can someone tell me why test if1 is fastest of three?

The first time i pare test if1 with test if2 and test if1 was faseter. After i check test if1 with test if3 and test if1 was faster again. Now i pare all of them and test if2 was faster.

All three together

tested on Chrome 34.0.1847

I run performance test jsperf for three simple if else statements with same logic:

test if1:

var a = "1";
if (a == "1") {
  a = "1"
} else {
  a = "2"
}

test if2:

    var a = "1";
    if (a == "1")
      a = "1"
    else
      a = "2"

test if3:

var a = "1";
a == "1" ? a="1" : "2";

Can someone tell me why test if1 is fastest of three?

The first time i pare test if1 with test if2 and test if1 was faseter. After i check test if1 with test if3 and test if1 was faster again. Now i pare all of them and test if2 was faster.

All three together

tested on Chrome 34.0.1847

• javascript
• performance
• if-statement

• 2 how many iterations did you run? how big was the difference? – jalynn2 Commented May 16, 2014 at 12:28
• Can you give a link to the actual jsperf test? Which one performs the fastest may also depend a lot on which browser is used. – p.s.w.g Commented May 16, 2014 at 12:36
• 1 Maybe because there is significantly less backtracking for piler in #1. Other two don't use delimiters for statements and piler has to backtrack to connect related statements with conditional. Again, this is just theory. – Akash Commented May 16, 2014 at 12:37
• Why do you even care? Does this solve any problem? Do you have performance issues? What makes you think the style of the conditional might be responsible? – Tomalak Commented May 16, 2014 at 12:37
• 1 Tried running the test cases you provided several times - every time a different one is fastest. This is statistical error - they're the same – Leeor Commented May 16, 2014 at 12:48

2 Answers 2

Did you run them many times to see if you consistently get the same results?

Even if you do, they're probably a very tiny difference. Such a difference would never make a practical difference in the overall performance of a full system. Trying to optimize through trivial syntax changes like these would be a very bad case of premature optimization which can make your code harder to read, and is a waste of time because it won't give you any real benefits.

Now I hope you understand that your question is actually a "wrong question", but in case you still want an answer as to why the first test performs fastest (if it really does), that would depend on some deep details of the JavaScript engine executing the code. JS engines are very plex nowadays, with huge amounts of optimization, so you can't really tell e.g. what CPU instructions will be emitted for a piece of code. In the next minor update of Chrome, the other tests could suddenly bee faster due to some change somewhere in Chrome's JS engine.

There is no meaningful performance difference in your three cases--the difference is on the order of 1%.

Note that in the third case, you are failing to set a to "2", but instead merely returning "2".

The presence or absence of brackets is highly unlikely to have any significant impact on performance, or more likely no impact whatsoever. It's a one-time, parse-time issue. The ternary form, your third case, is in essence logically identical to the first two cases. In fact, most minifiers would turn your cases 1 and 2 into a ternary operator.