Best Practice: Loops Optimization in JavaScript

Optimize Loops

The less operations you do, the more processor time you save, the higher speed you have.

Javascript doesn't scope to blocks. So, any variable declared in loop will be available after the loop and may override pre-existing globals!

Here some few points to get doing better:

• avoid repetitive access;
• break out earlier;
• choose the right loop type;
• organize your declarations;
• batch your operations;

##Organize Loops Regular `for` loop *(access the `length` at each loop cycle)*: for (var i; i < array.length; i++) { /*some logic*/ } Decreasing the amount of access times: var len = array.length; for (var i; i < len; i++) { /*some logic*/ } For better organization relocate the cache variable, so that it will be found nearer to where it is used *(within loop)*: for (var i, len = array.length; i < len; i++) { /*some logic*/ } ---- ## Avoid repetitive access Cache the necessary value to local variable. Regular `for` loop *(access the `obj.array` at each loop cycle)*: for (var i; i < obj.array.length; i++) { console.log(obj.array[i]); } Prevent repetitive `obj.array[i]` invocations: var list = obj.array; for (var i; i < list.length; i++) { console.log(list[i]); } ---- ## Break out earlier. Break out of the loop earlier, as soon as your target has been reached. Regular `for` loop *(iterates through all members)*: for (var i; i < array.length; i++) { if (id = list[i].id) { console.log(list[i]); } } Break `for` loop when target is reached *(iterates through only members preceding the target)*: for (var i; i < array.length; i++) { if (id = list[i].id) { console.log(list[i]); break; } } ---- ## Choose the right loop Prefer `for` over `for in` loop when it's possible. Note: it will examine among the all list of properties & methods. So, if there functions e.g. `removeAll` would be added to `Array.prototype` it will examine those as well. Preconditions: Array.prototype.removeAll = function() { /*some logic*/ } var list = ["A", "B"]; `for in` loop *(examines all *enumerable* properties)*: for (var p in list) { console.log(list[p]); // >"A" >"B" >"removeAll" } `for` loop *(examines only items within the list)*: for (var i; i < list.length; i++) { console.log(list[i]); // >"A" >"B" } Note: `while` is usually even faster than `for` loop, however it's not always same readable as `for` one. ---- ## Combine approaches Regular `for in` loop *(access the `obj.array` & each extra array prototype method at each loop cycle)*: for (var i in obj.array.length) { if (id == obj.array[i].id){ console.log(obj.array[i]); } } Optimized loop: var list = obj.array; for (var i, len = list.length; i < len; i++) { if (id == list[i].id){ console.log(list[i]); break; } } *Of Course, You can also cache the list item here to prevent repetitive `list[i]` invocation.* ---- ## Declare variables as few times as possible Each `var` keyword adds look-up for JS parser, so avoid declaring those within loops. Regular `for` loop *(`item` will be declared each time the loop executes)*: for (var i; i < array.length; i++) { var item = list[i]; } Optimized loop *(`item` will be declared only once)*: var item; for (var i; i < array.length; i++) { item = list[i]; } ---- ## see Also * [Fun with an Algorithm complexity](http://bloomlab.blogspot.com.ee/2014/07/fun-with-algorithm-complexity.html) * [JS - The Right Way](http://jstherightway.org/) * [Tutorials Point - Best Practices](http://www.tutorialspoint.com/developers_best_practices/) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)