JavaScript is a client side programming language, and if JavaScript will take a lot of time for computation. It will not only affect the performance of our application but also can hang the browser.
So here in this particuler blog we will learn how we can optimize loop in Javascript. As we all are femiliar with the for loop and we use it very frequently but never thought about its optimization.
Let's take a look at the most common practice to write a simple loop in JavaScript is:
var number = ["one","two","three","for"];
for(var i = 0; i < number.length; i++) {
// code
}
In the above example the loop will terminate when variable i is equals to length of the array(number) and the length of the array is recalculated every time the loop iterates. So the solution for this is to calculate the length of the array and assign it to a variable and use that variable so we don't need to calculate the length in every iteration.
var number = ["one","two","three","for"];
for (var i = 0, count = number.count; i < count; i++) {
//code
}
Now we will optimize the above code by initializing all variable with single var. Doing so will help to control the scope of variables, avoids conflicts in variable names and unused variables.
var i = 0, count, number = ["one","two","three","for"];
for (i = 0, count = number.length; i < count; i++) {
// code
}
Next thing that we can do is to make increment simple. When we do i++, what it does it makes a temporary copy of variable i, then after incrementing variable i, it returns the temporary copy. So instead of doing i++ do the following:
var i = 0, count, number = ["one","two","three","for"];
for (i = 0, count = number.length; i < count; i+=1) {
// code
}
Now, what else can be done to improve the above loop's performance? Have you noticed that here we are checking whether the value of i is less than the value of count and if it is we are incrementing the value of i by one.
Instead of this if we iterate this loop in reverse order, that means starting from the length of array to zero, As in JavaScript zero is evaluated as false so it will automatically terminate the loop
for (var i = 100; i--; ) {
// code
}
This will be faster than the previous example. But it can only be used depending on a situation like when the order of the loop won't matter.
0 Comment(s)