Why is iterating through an array backwards faster than forwards - javascript

Given this code:
var arr = [];
for (var i = 0; i < 10000; ++i)
arr.push(1);
Forwards
for (var i = 0; i < arr.length; ++i) {}
Backwards
for (var i = arr.length - 1; i >= 0; --i) {}
Hard-coded Forward
for (var i = 0; i < 10000; ++i) {}
Why is backwards so much faster?
Here is the test:
http://jsperf.com/array-iteration-direction

Because your forwards-condition has to receive the length property of your array each time, whilst the other condition only has to check for "greater then zero", a very fast task.
When your array length doesn't change during the loop, and you really look at ns-perfomance, you can use
for (var i=0, l=arr.length; i<l; i++)
BTW: Instead of for (var i = arr.length; i > 0; --i) you might use for (var i = arr.length; i-- > 0; ) which really runs through your array from n-1 to 0, not from n to 1.

Because in the first form you are accessing the property length of the array arr once for every iteration, whereas in the second you only do it once.

If you want to have them at same pace, you can do that for forward iteration;
for(var i=0, c=arr.length; i<c; i++){
}
So, your script won't need to take length of array on everystep.

I am not entirely sure about this, but here is my guess:
For the following code:
for (var i = 0; i < arr.length; ++i) {;
}
During runtime, there is an arr.length calculation after each loop pass. This may be a trivial operation when it stands alone, but may have an impact when it comes to multiple/huge arrays. Can you try the following:
var numItems = arr.length;
for(var i=0; i< numItems; ++i)
{
}
In the above code, we compute the array length just once, and operate with that computed number, rather than performing the length computation over and over again.
Again, just putting my thoughts out here. Interesting observation indeed!

i > 0 is faster than i < arr.length and is occurring on each iteration of the loop.
You can mitigate the difference with this:
for (var i = 0, len = arr.length; i < len; ++i) {;
}
This is still not as fast as the backwards item, but faster than your forward option.

do it like below, it will perform in same way. because arr.length takes time in each iteration in forward.
int len = arr.length;
forward
for (var i = 0; i < len; ++i) {
}
backward
for (var i = len; i > 0; --i) {
}

And these are equally good:
var arr= [], L= 10000;
while(L>-1) arr[L]= L--;
OR
var arr= [], i= 0;
while(i<10001) arr[i]=i++;

Related

Loop guard optimization

A number of years ago I read a very simple article about loop optimization. In particular, if you have to iterate over a list in Java you can put the guard in the initialization in order to avoid a method call in each iteration:
for (int i = 0; i < list.size(); ++i)
becomes:
for (int i = 0, len = list.size(); i < len; ++i)
Now, I'm working with Javascript where the Array lenght is stored in a variable. So, I was wondering if there is a difference between:
for (var i = 0; i < list.length; ++i)
and:
for (int i = 0, len = list.length; i < len; ++i)
Moreover, I read that prefix increment is preferred since it doesn't evaluate to the value of the expression, right?

How to best optimize a function with a nested for-loop

I have a function that has a nested for loop. As the function iterates over more data, it is starting to slow down. How can I best optimize this function so that it runs a bit faster?
function rubicoGVB(arr, range) {
var res = [];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if ((arr[i] + arr[j]) / range < 16487665) {
res.push(arr[i]);
}
}
}
return res.length;
}
(The biggest improvement you could make is described by Fast Snail in this comment: You don't need the res array just to return its length; simply use a counter. Below are other improvements you could make.)
Looking at those loops, there's very little you can do other than:
Caching the length of the array, and
Caching arr[i] instead of looking it up repeated in the j loop
...which are minimal (but real) improvements, see len and entry below:
function rubicoGVB(arr, range) {
var res = [];
var len = arr.length;
var entry;
for (var i = 0; i < len; i++) {
entry = arr[i];
for (var j = i + 1; j < len; j++) {
if ((entry + arr[j]) / range < 16487665) {
res.push(entry);
}
}
}
return res.length;
}

Referencing Javascript array element via loop variable

I've come across writing a piece of code where I wanted to reference the 2D array d2_arr[][] in a loop like so.
for (var i=0; i<d2_arr[i].length; i++) {
//do something
}
Google Script compiler throws an error "cannot read length property from undefined". When I changed [i] for [1], it worked just fine. Could anyone please explain why this is wrong? And a related question: Can a 2D array have a different number of elements in a row? theoretically. An example would be:
[[1,2],[3,4,5],[6,7,8,9],[10,11]]
EDIT. Full code part.
var ids = [];
var j = 0;
for (var i=0; i<d2_arr[i].length; i++){
if (d2_arr[i][2]<=0.05){
ids[j]=d2_arr[i][0];
j++;
}
}
I understood the mistake. Thank you!
You typically need a nested for loop to traverse a 2-D array
var d2_arr = [[1,2],[3,4,5],[6,7,8,9],[10,11]]
for (var i=0; i<d2_arr.length; i++){
for (var j=0; j<d2_arr[i].length; j++){
console.log(d2_arr[i][j] + ' ')
}
}
It is perfectly fine for arrays to be "jagged" and contain uneven sized arrays in the main array.
Here is a fiddle http://jsfiddle.net/7Lr4542s/
Arrays in JS can be of any size and any type. You can combine number and strings in array.
var twoDArray = [[1], ["one", "two"], ["i", "ii", "iii"]];
for(var i = 0; i < twoDArray.length; i++) {
for(var j = 0; j < twoDArray[i].length; j++) {
print(twoDArray[i][j]);
}
}
var threeDArray = [[["1.1.1", "1.1.2"], ["1.2.1", "1.2.2"]], [["1.2.1", "1.2.2"], ["1.2.1", "1.2.2"]], [["2.1.1", "2.1.2"], ["2.2.1", "2.2.2"]], [["2.2.1", "2.2.2"], ["2.2.1", "2.2.2"]]];
for(var i = 0; i < threeDArray.length; i++) {
for(var j = 0; j < threeDArray[i].length; j++) {
for(var k = 0; k < threeDArray[i][j].length; k++) {
print(twoDArray[i][j][k]);
}
}
}

for loop versus if condition

There are two alternatives I have for executing a piece of code. The code basically resets all the values in three arrays. Two of them are int arrays and one is boolean.
Choice 1
for (i = 0; i < array1.length; i++)
array1[i] = 0;
for (i = 0; i < array2.length; i++)
array2[i] = 0;
for (i = 0; i < array3.length; i++)
array3[i] = false;
Choice 2
int limit = <assign the greatest of the array lengths>
for (i = 0; i < limit; i++)
{
if (i < array1.length)
array1[i] = 0;
if (i < array2.length)
array2[i] = 0;
if (i < array3.length)
array3[i] = false;
}
Which of these would be faster? Given that the arrays can have varying lengths and have no relationship with each other.
There is a real good discussion here. The answer listed first explains quiet well what arrays actually mean in javascript. For those interested to check it out!
This version is almost certainly going to be faster. It is also easier to read and shorter, which are both much more important attributes than speed (99+% of the time).
for (i = 0; i < array1.length; i++)
array1[i] = 0;
for (i = 0; i < array2.length; i++)
array2[i] = 0;
for (i = 0; i < array3.length; i++)
array3[i] = false;
In general, it is faster to access data that is close in memory to data that you accessed recently.
This version also does not suffer from additional branching you would get in the second version.
A sufficiently advanced compiler would transform the second version into the first.
Benchmarking: Micro-benchmarks are 100% useless without profiling your entire program first. Since I don't think the performance measurements are useful, I am not providing them.
function reset_array(array, value) {
var len = array.length;
array.length = 0;
while (len--) array.push(value);
}
reset_array(array1, 0);
reset_array(array2, 0);
reset_array(array3, false);

JavaScript for-loop question

Is it possible for a for-loop to repeat a number 3 times? For instance,
for (i=0;i<=5;i++)
creates this: 1,2,3,4,5.
I want to create a loop that does this: 1,1,1,2,2,2,3,3,3,4,4,4,5,5,5
Is that possible?
for (i=1;i<=5;i++)
for(j = 1;j<=3;j++)
print i;
Yes, just wrap your loop in another one:
for (i = 1; i <= 5; i++) {
for (lc = 0; lc < 3; lc++) {
print(i);
}
}
(Your original code says you want 1-5, but you start at 0. My example starts at 1)
You can have two variables in the for loop and increase i only when j is a multiple of 3:
for (i=1, j=0; i <= 5; i = ++j % 3 != 0 ? i : i + 1)
Definitely. You can nest for loops:
for (var i = 1; i < 6; ++i) {
for(var j = 0; j < 3; ++j) {
print(i);
}
}
Note that the code in your question will print 0, 1, 2, 3, 4, 5, not 1, 2, 3, 4, 5. I have fixed that to match your description in my answer.
Just add a second loop nested in the first:
for (i = 0; i <= 5; i++)
for (j = 0; j < 3; j++)
// do something with i
You can use nested for loops
for (var i=0;i<5; i++) {
for (var j=0; j<3; j++) {
// output i here
}
}
You can use two variables in the loop:
for (var i=1, j=0; i<6; j++, i+=j==3?1:0, j%=3) alert(i);
However, it's not so obvious by looking at the code what it does. You might be better off simply nesting a loop inside another:
for (var i=1; i<6; i++) for (var j=0; j<3; j++) alert(i);
I see lots of answers with nested loops (obviously the nicest and most understandable solution), and then some answers with one loop and two variables, although surprisingly nobody proposed a single loop and a single variable. So just for the exercise:
for(var i=0; i<5*3; ++i)
print( Math.floor(i/3)+1 );
You could use a second variable if you really only wanted one loop, like:
for(var i = 0, j = 0; i <= 5; i = Math.floor(++j / 3)) {
// whatever
}
Although, depending on the reason you want this, there's probably a better way.

Categories

Resources