When not use For loop

I'm currently working on frontend-master-script, and it requires performing a text search against a large JSON file. The current file size is already 2KB, and it expects to grow 10x larger soon.

I initially used for in and for of loop, and I didn't have any problem. At some point, I started concerned about the performance, especially since I would have to run it against a humongous file.

So I tried to switch from for of/in loop to a standard for loop to see what happens.

[node v16.13.1]

For of/in

for (const course in ctx) {
  for (const session in ctx[course]) {
    for (const [key, value] of Object.entries(ctx[course][session])) {
      if (value.search(searchRegex) >= 0) {
        result.search = search
        result.list.push(key)
      }
    }
  }
}

For

for (let i = 0; i < Object.keys(ctx).length; i++) {
  const sessionArray = Object.keys(ctx[ctxArray[i]])
  for (let j = 0; j < sessionArray.length; j++) {
    const timeFrameArray = Object.keys(ctx[ctxArray[i]][sessionArray[j]])
    for (let k = 0; k < timeFrameArray.length; k++) {
      const text = ctx[ctxArray[i]][sessionArray[j]][timeFrameArray[k]]
      if (text.search(searchRegex) >= 0) {
        result.search = search
        result.list.push(timeFrameArray[k])
      }
    }
  }
}

Here's the result.

[FOR OF] took 1.313166618347168 milliseconds
[FOR] took 0.5326247215270996 milliseconds
Compare: [FOR] is faster by 2.4654631399424347 times

[FOR OF] took 2.727832794189453 milliseconds
[FOR] took 1.9571661949157715 milliseconds
Compare: [FOR] is faster by 1.393766559669629 times

[FOR OF] took 3.002084255218506 milliseconds
[FOR] took 1.6708331108093262 milliseconds
Compare: [FOR] is faster by 1.796758895784835 times

[FOR OF] took 1.2934999465942383 milliseconds
[FOR] took 1.3828749656677246 milliseconds
Compare: [FOR] is faster by 0.9353701373642762 times

[FOR OF] took 1.8870000839233398 milliseconds
[FOR] took 1.715707778930664 milliseconds
Compare: [FOR] is faster by 1.099837692115283 times

[FOR OF] took 3.0279998779296875 milliseconds
[FOR] took 1.644124984741211 milliseconds
Compare: [FOR] is faster by 1.8417090586372311 times

[FOR OF] took 1.1230831146240234 milliseconds
[FOR] took 0.8723340034484863 milliseconds
Compare: [FOR] is faster by 1.2874462192053533 times

[FOR OF] took 1.373791217803955 milliseconds
[FOR] took 1.2319998741149902 milliseconds
Compare: [FOR] is faster by 1.1150903881307788 times

[FOR OF] took 1.4468750953674316 milliseconds
[FOR] took 1.110583782196045 milliseconds
Compare: [FOR] is faster by 1.3028058923266568 times

[FOR OF] took 2.7792916297912598 milliseconds
[FOR] took 2.3156251907348633 milliseconds
Compare: [FOR] is faster by 1.2002338033424365 times

[FOR OF] took 1.112417221069336 milliseconds
[FOR] took 0.7147088050842285 milliseconds
Compare: [FOR] is faster by 1.5564621747429535 times

[FOR OF] took 1.2582497596740723 milliseconds
[FOR] took 0.9935832023620605 milliseconds
Compare: [FOR] is faster by 1.26637583715467 times

Even though I have to run Object.keys for each iteration, the for loop is faster than for of/in loop by 1.4 times on average.

But look at the code. Is that readable? Speed gain (1.4x) is worth the mess? Maybe not!

TL;DR

Don't blindly apply for loop just because you can.

Don't sacrifice the readability over minor performance gain. Remember, most of the bugs we suffer lie among us. They come from wrong assumptions and misunderstandings of the code.

Tune your code only when the performance becomes a bottleneck or when you know the part of the application is performance-critical. We solve a problem when there's a problem.

Except for said cases, prioritize readability. We write code for humans.