Which block of code will execute faster?

Question

B1

if (this.id === 'username') {
  switch (this.value.length) {
    case  0:
    case  1:
    case  2:
      // 'Username must be at least 3 characters'
      break;
    case  3:
    case  4:
    case  5:
    case  6:
    case  7:
    case  8:
    case  9:
    case 10:
    case 11:
    case 12:
    case 13:
    case 14:
    case 15:
    case 16:
    case 17:
    case 18:
    case 19:
    case 20:
      // Another if else statement
      break;
    default:
      // 'Username must be at most 20 character'
  }
}

B2

if (this.id === 'username') {
  if (this.value.length < 3) {
    // 'Username must be at least 3 characters'
  } else if (this.value.length > 20) {
    // 'Username must be at most 20 characters'
  } else {
    // Another if else statement
  }
}

I would test this myself using browser developer tools, but unfortunately I'm a n00b to programming, and don't yet know how to use the developer tools all that well. Any input would be greatly appreciated.

If you're that much of a "n00b" that you haven't used the dev tools, then you probably shouldn't be concerned with performance. — Evan Trimboli, Dec 12 '16 at 23:51
My point being, you should learn how to do it. If you have a question on how to use the tools that would be fine, but I don't see how this question shows any effort. — Evan Trimboli, Dec 12 '16 at 23:57
@gatekeeper01 No, this community just has strict, well written guidelines that make it a very good place for help with actual questions. Your question could've been figured out on your own in about 29 seconds if you just learned the tools of your trade better. You won't get anywhere by having someone else tell you how to do it or what the answer is. You'll learn much more via trial and error. If you don't have the time, then make time. — TheValyreanGroup, Dec 13 '16 at 00:09
Possible duplicate of [What is the best way to profile javascript execution?](http://stackoverflow.com/questions/855126/what-is-the-best-way-to-profile-javascript-execution) — Evan Trimboli, Dec 13 '16 at 00:13
FWIW, you don't have to use a browser to profile code. You could easily do that in Node.js as well. — Felix Kling, Dec 13 '16 at 02:43
@FelixKling I'm using PHP (in addition to HTML,CSS,JS, and SQL) — gatekeeper01, Dec 13 '16 at 03:34

score 0 · Answer 1 · answered Dec 12 '16 at 23:59

It's negligible and really depends on the user's Javascript parser.

You should use the second option though as it's much better readability-wise, and much easier to change at a later date. Moreover if you're so concerned with performance the second is fewer characters too which means your site will load faster.

score 0 · Accepted Answer · answered Dec 13 '16 at 00:02

The second one is always the better choice for readability, and the performance benefit (if one even exists) would be marginal using a switch statement. The < / > operators are probably an instruction or two of native code, and I can't imagine that any switch statement would compile down to something so small.

I wouldn't even bother to test the difference; it shouldn't be worth your time unless you can prove that those few lines are the bottleneck in your program. (In which case, I would be exceedingly surprised.)

Also, if you're really concerned about good performance practices you could cache the length and achieve a small readability win too.

if (this.id === 'username') {
  var length = this.value.length
  if (length < 3) {
    // 'Username must be at least 3 characters'
  } else if (length > 20) {
    // 'Username must be at most 20 characters'
  } else {
    // Another if else statement
  }
}

Caching the `length` means assigning the result of accessing `this.value.length` to a local variable (which I called `length` for simplicity) so you don't have to evaluate that same expression more than once. — gyre, Dec 13 '16 at 00:14
ohhhhhh right, right, right. i wasn't sure what you were referring to. i will of course be doing that once i actually implement it. thanks for clarifying nonetheless. — gatekeeper01, Dec 13 '16 at 00:18

Which block of code will execute faster?

B1

B2

2 Answers2