I'm creating a tic-tac-toe game, and one of the functions has to iterate through each of the 9 fields (tic-tac-toe is played on a 3x3 grid). I was wondering what is more efficient (which one is perhaps faster, or what is the preferred way of scripting in such situation) - using two for nested loops like this:

for(var i=0; i<3; i++) {
 for(var j=0; j<3; j++) {
  checkField(i, j);
 }
}

or hard-coding it like this:

checkField(0, 0);
checkField(0, 1);
checkField(0, 2);
checkField(1, 0);
checkField(1, 1);
checkField(1, 2);
checkField(2, 0);
checkField(2, 1);
checkField(2, 2);

As there are only 9 binations, it would be perhaps overkill to use two nested for loops, but then again this is clearer to read. The for loop, however, will increment variables and check whether i and j are smaller than 3 every time as well.

In this example, the time saving at least might be negligible, but what is the preferred way of coding in this case?

Thanks.

I'm creating a tic-tac-toe game, and one of the functions has to iterate through each of the 9 fields (tic-tac-toe is played on a 3x3 grid). I was wondering what is more efficient (which one is perhaps faster, or what is the preferred way of scripting in such situation) - using two for nested loops like this:

for(var i=0; i<3; i++) {
 for(var j=0; j<3; j++) {
  checkField(i, j);
 }
}

or hard-coding it like this:

checkField(0, 0);
checkField(0, 1);
checkField(0, 2);
checkField(1, 0);
checkField(1, 1);
checkField(1, 2);
checkField(2, 0);
checkField(2, 1);
checkField(2, 2);

As there are only 9 binations, it would be perhaps overkill to use two nested for loops, but then again this is clearer to read. The for loop, however, will increment variables and check whether i and j are smaller than 3 every time as well.

In this example, the time saving at least might be negligible, but what is the preferred way of coding in this case?

Thanks.

• javascript
• algorithm

• may I ask what checkField does? Why do you check all fields? – Nick Dandoulakis Commented Jan 16, 2011 at 12:01
• I wonder whether with modern Javascript engines, the loop could be significantly faster. Potentially it could be more likely to be identified as an optimization target and JIT-piled, simply because the optimizer looks for loops with small bodies. In any language you basically can't predict the results of machine optimization unless you're very familiar with the machine, and often not even then. – Steve Jessop Commented Jan 16, 2011 at 12:27
• @Nick D - It checks for each field whether the puter wins if it plays that field (it is part of the AI). @Steve Jessop - Having read the answers, it seems time is not a problem in any way. – pimvdb Commented Jan 16, 2011 at 12:39
• @Steve: Some implementations may JIT that (certainly everything except V8 does JIT based upon hotspot detection), but at the same time it's probably just as interesting that they may well unroll that loop, and effectively end up with the same generated code as the latter, while keeping the code far cleaner. – gsnedders Commented Jan 16, 2011 at 14:24

7 Answers 7

Do not hard code 9 lines of the same code!

• Readability
• Flexibility / Maintenance
• Code Length

This is a premature micro-optimization. In this case always go for the clearer solution - so use the for loops:) And by the way, think about if tomorrow the grid is 4x4:)

Time savings: negligible. Probably un-measurable.

Preferred style: nested for loops. Ok, you'll probably never make it a 4x4 or 5x5 or 3d (or 4d!) tic-tac-toe - but it's a good habit to get into. Also easier to see if you forgot something and avoids cut-and-paste errors.

Ironically hard-coding the checks will probably be faster, but (and here's the important bit) meaninglessly so.

As such, what you should really aim for is the maximum clarity of intent for what you're trying to achieve. Also, you should try and make life easier for any future improvements (that may not be carried out by you.) For example, if the tic-tac-toe grid was expanded to 4x4 which solution would be the best?

On this basis I'd be tempted to go with the loop approach along with the appropriate level of menting, etc.

We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. -- Donald Knuth

Definitely the first one. First of all, the performance difference will be absolutely negligible - my guess is the unrolled program will run slower because more time is required to pile/interpret it because it is longer (plus, additional client, server and router processing power and bandwidth will be required).

Secondly, and as a generalization, you don't know which version would be faster. Maybe some interpreter would increment registers for the first version, but load the parameters from memory (waaay slower) for the second one?

Especially in the case of JavaScript, you have absolutely no fixed specification on how fast (future!) interpreters and pilers work, so this "optimization" is absolutely pointless and confusing other programmers working with your code at best.

Please don't hardcode it. Never do something like that.

More than one time? Use a loop.

Also, you are worrying about a problem you don't have, really.

As you mentioned, the time saving will be negligible. Even if you would put that grid to a 100 times 100 square, you still won't see any difference. If we go a bit larger though, say 10.000 times 10.000, we might see some difference. I wonder what that might be, because the pilers and optimisers are very good and especially in a loop the environment might speed things up by having this information (function will be called several times).

Why don't you try it out and share your results with us?

In practise, however, I would never remend going for the second approach. Readability and flexibility is far more important than CPU time. And optimising early, as they say, is quite evil in itself because it obfuscates the code and introduces a lot of unnecessary plexity without really contributing to performance.