JavaScript: Is the `if / else` statement faster than the conditional statement in?

Question

Consider the following two pieces of code:

var adj=0>grip.y?0<grip.x?0:-180:0<grip.x?-360:-180;

and

var adj;    
if (grip.y < 0) {   
    if (grip.x > 0)
        adj = 0;
    else
        adj = -180;
}
else {      
    if (grip.x > 0)
        adj = -360;
    else
        adj = -180;
}

They both produce the same result, but which is faster?

Micro-optimalisation, don't bother. If you care, create a benchmark on http://jsperf.com/ — Rob W, Oct 17 '12 at 16:27
there will be little to none difference, use the more readable one. — richardtz, Oct 17 '12 at 16:28
They are both implemented as a branch if condition is true. No difference in performance. But only one is easier to read. Guess which one? — Amir Raminfar, Oct 17 '12 at 16:28
The second one is more maintainable, which should be the priority. Also consider using constants instead of hard-coding numeric values such as `-360`. For example, `var CIRCLE_DEGREES = 360`. — Dave Jarvis, Oct 17 '12 at 16:28
in case for some reason you switch to radians, just do a 'rename', then change value, and all is ok... — GameAlchemist, Oct 17 '12 at 16:33
Based on the idea to create a benchmark, I did on jsperf.com. http://jsperf.com/if-vs-conditional/2. And indeed, the results are negligible (at least in my case), but what's more interesting is that they differ based on the browser one is using. — Andrei Oniga, Oct 17 '12 at 16:58

score 2 · Accepted Answer · answered Oct 17 '12 at 16:28

2

The speed difference will be negligible - use whichever you find is more convinient and readable. There wont be any problem with the wrong conditional construct.

answered Oct 17 '12 at 16:28

Rahul Tripathi

168,305
31
280
331

I know there's little difference between the too, but I'm interested in optimizing a `mousemove` event handler, so the less operations, the better (obviously). – Andrei Oniga Oct 17 '12 at 16:30
@AndreiOniga I really think that there will be any such difference. It all depends on your convinience. Plz go through this link http://www.quirksmode.org/js/events_mouse.html. I would recommend if else or ternary operator as per your convinience. There are some examples(at the end) also in the link which may answer you. :) – Rahul Tripathi Oct 17 '12 at 16:35
I will confess that in many situations I prefer to use if...else simply for clarity. – Rahul Tripathi Oct 17 '12 at 16:40

score 0 · Answer 2 · answered Nov 25 '13 at 04:34

0

Use switch conditions,that is faster than if and other conditional statements.

answered Nov 25 '13 at 04:34

Nevin Madhukar K

3,031
2
25
52

Ganpat Kakar · Answer 3 · 2020-11-02T03:46:31.250

-1

Just to check the performance in JavaScript, I tried to do a small experiment.

console.time("ternary operator");
const val = (5 > 2) ? true : false;
console.log(val);
console.timeEnd("ternary operator");

console.time("if condition");
let val2;
if (5 > 2) {
val2 = true;
} else {
val2 = false;
}
console.log(val2)

console.timeEnd("if condition");

and the output is quite shocking as the if condition is almost twice faster than the ternary statements.

Results :-

So to conclude I would suggest using the if condition over the ternary operator.

edited Nov 02 '20 at 03:46

answered Nov 02 '20 at 03:40

Ganpat Kakar

153
1
11

You're also timing the printing which is *vastly* more expensive, especially than a constant condition which should optimize away during JIT. The 2nd call to `console.log` is probably a lot faster after the first one warms it up. (And the CPU has a chance to ramp up to max turbo, if it's a Skylake or later that can react in that amount of time.) [Idiomatic way of performance evaluation?](https://stackoverflow.com/q/60291987) covers that - try reversing the order of these two things and see if it's always the 2nd one that's faster. – Peter Cordes Nov 02 '20 at 04:22
You need a more sophisticated test if you want to get meaningful results. Like with [Why is processing a sorted array faster than processing an unsorted array?](https://stackoverflow.com/q/11227809) where the condition isn't constant. – Peter Cordes Nov 02 '20 at 04:23
@PeterCordes Well looks like you are correct, I usually don't go on hypothesis like CPU is in that condition or this condition, I try to run the program multiple times (one after another) and observe the output data and take an average of it but looks like this time when I tried to run both of the programs separately to avoid any collision between both of their process, I found both of the data is almost similar. Thank you for making me look into this one more time and this broke one of my conceptions that `if` condition is faster than ternary operators. Thank you – Ganpat Kakar Nov 02 '20 at 07:21
Taking an average is good (or discarding outliers and taking the best repeatable time for each version). But yeah, if your methodology is flawed then you're just repeating the same mistake. Microbenchmarking is *hard*. It's only simple for thing that run long enough to hide measurement / warm-up overhead, and even then it's possible to not be measuring what you thought you were, or to over-generalize results (e.g. throughput and latency are different things; some ways of benchmarking will depend on one or the other.) – Peter Cordes Nov 02 '20 at 07:27

JavaScript: Is the `if / else` statement faster than the conditional statement in?

3 Answers3