What s the fastest way to loop through an array in JavaScript

Question

I learned from books that you should write for loop like this   for var i 0  len arr length  i  lt  len  i            blah blah     so the arr length will not be calculated each time     Others say that the compiler will do some optimization to this  so you can just write     for var i 0  i  lt  arr length  i            blah blah     I just want to know which is the best way in practice

User · Answer

A basic while loop is often the fastest  jsperf com is a great sandbox to test these types of concepts   https   jsperf com fastest-array-loops-in-javascript 24

User · Answer

It s just 2018 so an update could be nice     And I really have to disagree with the accepted answer  It defers on different browsers  some do forEach faster  some for-loop  and some while here is a benchmark on all method http   jsben ch mW36e  arr forEach  a   gt                 and since you can see alot of for-loop like for a   0        then worth to mention that without  var  variables will be define globally and this can dramatically affects on speed so it ll get slow   Duff s device run faster on opera but not in firefox  x000D   x000D  var arr   arr   new Array 11111111  fill 255   x000D  var benches        x000D       empty        gt    x000D    for var a   0  l   arr length  a  lt  l  a     x000D     x000D      for-loop        gt    x000D    for var a   0  l   arr length  a  lt  l    a  x000D      var b   arr a    1  x000D     x000D      for-loop          gt    x000D    for var a   0  l   arr length  a  lt  l  a    x000D      var b   arr a    1  x000D     x000D      for-loop - arr length        gt    x000D    for var a   0  a  lt  arr length    a   x000D      var b   arr a    1  x000D     x000D      reverse for-loop        gt    x000D    for var a   arr length - 1  a  gt   0  --a   x000D      var b   arr a    1  x000D     x000D     while-loop        gt    x000D    var a   0  l   arr length  x000D    while  a  lt  l     x000D      var b   arr a    1  x000D        a  x000D      x000D     x000D      reverse-do-while-loop        gt    x000D    var a   arr length - 1     CAREFUL x000D    do   x000D      var b   arr a    1  x000D      while a--      x000D     x000D      forEach        gt    x000D    arr forEach  a   gt    x000D      var b   a   1  x000D        x000D     x000D      for const  in  only 3 3          gt    x000D    var ar   arr slice 0 arr length 33   x000D    for  const a in ar     x000D      var b   a   1  x000D      x000D     x000D      for let  in  only 3 3          gt    x000D    var ar   arr slice 0 arr length 33   x000D    for  let a in ar     x000D      var b   a   1  x000D      x000D     x000D      for var  in  only 3 3          gt    x000D    var ar   arr slice 0 arr length 33   x000D    for  var a in ar     x000D      var b   a   1  x000D      x000D     x000D      Duff s device        gt    x000D    var len   arr length  x000D    var i  n   len   8 - 1  x000D   x000D    if  n  gt  0    x000D      do   x000D        var b   arr len-n    1  x000D        while  --n      n must be greater than 0 here x000D      x000D    n    len   0 125    0  x000D    if  n  gt  0     x000D      do   x000D        i   --n  lt  lt 3  x000D        var b   arr i    1  x000D        var c   arr i 1    1  x000D        var d   arr i 2    1  x000D        var e   arr i 3    1  x000D        var f   arr i 4    1  x000D        var g   arr i 5    1  x000D        var h   arr i 6    1  x000D        var k   arr i 7    1  x000D        x000D      while  n      n must be greater than 0 here also x000D      x000D       x000D  function bench title  f    x000D    var t0   performance now    x000D    var res   f    x000D    return performance now   - t0     console log    title  took   t1-t0  msec    x000D    x000D  var globalVarTime   bench   for-loop without  var         gt    x000D       Here if you forget to put  var  so variables ll be global x000D    for a   0  l   arr length  a  lt  l    a  x000D       var b   arr a    1  x000D      x000D  var times   benches map  function a    x000D                        arr   new Array 11111111  fill 255   x000D                        return  a 0   bench    a   x000D                          sort   a b    gt  a 1 -b 1     x000D  var max   times times length-1  1   x000D  times   times map  a   gt   a 2     a 1  max  100  return a       x000D  var template    title  time  n    gt  x000D      lt div gt     x000D        lt span gt   title   amp nbsp  lt  span gt     x000D        lt span style  width   3 n 2    gt  amp nbsp   Number time toFixed 3   msec lt  span gt     x000D      lt  div gt    x000D   x000D  var strRes   times map  t   gt  template    t    join   n      x000D                lt br gt  lt br gt for-loop without  var    globalVarTime  msec    x000D  var  container   document getElementById  container    x000D   container innerHTML   strRes  x000D  body   color  fff  background  333  font-family helvetica    x000D  body  gt  div  gt  div    clear both     x000D  body  gt  div  gt  div  gt  span   x000D    float left  x000D    width 43   x000D    margin 3px 0  x000D    text-align right  x000D    x000D  body  gt  div  gt  div  gt  span nth-child 2    x000D    text-align left  x000D    background darkorange  x000D    animation showup  37s  111s  x000D    -webkit-animation showup  37s  111s  x000D    x000D   keyframes showup   from   width 0      x000D   -webkit-keyframes showup   from   width 0      x000D   lt div id  container  gt   lt  div gt  x000D   x000D   x000D

User · Answer

After performing this test with most modern browsers  https   jsben ch wY5fo Currently  the fastest form of loop  and in my opinion the most syntactically obvious   A standard for-loop with length caching     var i   0  len   myArray length      while  i  lt  len               your code         i          I would say  this is definitely a case where I applaud JavaScript engine developers  A runtime should be optimized for clarity  not cleverness

User · Answer

The most elegant solution I know of is using map   var arr    1 2 3   arr map function input  console log input

User · Answer

I m always write in the first style    Even if a compiler is smart enough to optimize it for arrays  but still it smart if we are using DOMNodeList here or some complicated object with calculated length   I know what the question is about arrays  but i think it is a good practice to write all your loops in one style

User · Answer

2014 While is back  Just think logical   Look at this   for  var index   0   length   array length   index  lt  length   index           do stuff       Need to create at least 2 variables  index length  Need to check if the index is smaller than the length Need to increase the index the for loop has 3 parameters   Now tell me why this should be faster than   var length   array length   while  --length       or length--     do stuff       One variable No checks the index is decreased  Machines prefer that  while has only one parameter   I was totally confused when Chrome 28 showed that the for loop is faster than the while  This must have ben some sort of    Uh  everyone is using the for loop  let s focus on that when  developing for chrome    But now  in 2014 the while loop is back on chrome  it s 2 times faster   on other older browsers it was always faster   Lately i made some new tests  Now in real world envoirement those short codes are worth nothing and jsperf can t actually execute properly the while loop  because it needs to recreate the array length which also takes time   you CAN T get the actual speed of a while loop on jsperf   you need to create your own custom function and check that with window performance now    And yeah    there is no way the while loop is simply faster      The real problem is actually the dom manipulation   rendering time     drawing time or however you wanna call it    For example i have a canvas scene where i need to calculate the coordinates and collisions    this is done between 10-200 MicroSeconds  not milliseconds   it actually takes various milliseconds to render everything Same as in DOM   BUT  There is another super performant way using the for loop in some cases    for example to copy clone an array  for   var i   array length    i  gt  0    arrayCopy  --i     array  i      doing stuff      Notice the setup of the parameters    Same as in the while loop i m using only one variable Need to check if the index is bigger than 0  As you can see this approach is different vs the normal for loop everyone uses  as i do stuff inside the 3th parameter and i also decrease directly inside the array    Said that  this confirms that machines like the --  writing that i was thinking to make it a little shorter and remove some useless stuff and wrote this one using the same style   for   var i   array length    i--    arrayCopy  i     array  i      doing stuff      Even if it s shorter it looks like using i one more time slows down everything  It s 1 5 slower than the previous for loop and the while one   Note  the   is very important after the for looo without     Even if i just told you that jsperf is not the best way to test scripts    i added this 2 loops here  http   jsperf com caching-array-length 40  And here is another answer about performance in javascript  https   stackoverflow com a 21353032 2450730  This answer is to show performant ways of writing javascript  So if you can t read that  ask and you will get an answer or read a book about javascript http   www ecma-international org ecma-262 5 1

User · Answer

http   jsperf com caching-array-length 60  The latest revision of test  which I prepared  by reusing older one   shows one thing   Caching length is not that much important  but it does not harm   Every first run of the test linked above  on freshly opened tab  gives best results for the last 4 snippets  3rd  5th  7th and 10th in charts  in Chrome  Opera and Firefox in my Debian Squeeze 64-bit  my desktop hardware   Subsequent runs give quite different result   Performance-wise conclusions are simple    Go with for loop  forward  and test using     instead of  lt   If you don t have to reuse the array later  then while loop on decremented length and destructive shift  -ing array is also efficient      tl dr  Nowadays  2011 10  below pattern looks to be the fastest one   for  var i   0  len   arr length  i     len  i                  Mind that caching arr length is not crucial here  so you can just test for i     arr length and performance won t drop  but you ll get shorter code     PS  I know that in snippet with shift   its result could be used instead of accessing 0th element  but I somehow overlooked that after reusing previous revision  which had wrong while loops   and later I didn t want to lose already obtained results

User · Answer

As of June 2016  doing some tests in latest Chrome  71  of the browser market in May 2016  and increasing     The fastest loop is a for loop  both with and without caching length delivering really similar performance   The for loop with cached length sometimes delivered better results than the one without caching  but the difference is almost negligible  which means the engine might be already optimized to favor the standard and probably most straightforward for loop without caching   The while loop with decrements was approximately 1 5 times slower than the for loop  A loop using a callback function  like the standard forEach   was approximately 10 times slower than the for loop    I believe this thread is too old and it is misleading programmers to think they need to cache length  or use reverse traversing whiles with decrements to achieve better performance   writing code that is less legible and more prone to errors than a simple straightforward for loop  Therefore  I recommend    If your app iterates over a lot of items or your loop code is inside a function that is used often  a straightforward for loop is the answer   for  var i   0  i  lt  arr length  i           Do stuff with arr i  or i    If your app doesn t really iterate through lots of items or you just need to do small iterations here and there  using the standard forEach callback or any similar function from your JS library of choice might be more understandable and less prone to errors  since index variable scope is closed and you don t need to use brackets  accessing the array value directly   arr forEach function value  index         Do stuff with value or index      If you really need to scratch a few milliseconds while iterating over billions of rows and the length of your array doesn t change through the process  you might consider caching the length in your for loop  Although I think this is really not necessary nowadays   for  var i   0  len   arr length  i  lt  len  i           Do stuff with arr i

User · Answer

I have tried some other ways to iterate a huge array and found out that halving the array length and then iterating both halves in a single loop is faster  This performance difference can be seen while processing huge arrays    var firstHalfLen  0  var secondHalfLen   0  var count2 0  var searchterm    face   var halfLen   arrayLength 2  if arrayLength 2  halfLen       firstHalfLen   Math ceil halfLen      secondHalfLen Math floor halfLen     else      firstHalfLen halfLen     secondHalfLen halfLen    for var firstHalfCOunter 0 secondHalfCounter   arrayLength-secondHalfLen      firstHalfCOunter  lt  firstHalfLen      firstHalfCOunter        if mainArray firstHalfCOunter  search new RegExp searchterm   i    gt  -1          count2  1        if secondHalfCounter  lt  arrayLength          if mainArray secondHalfCounter  search new RegExp searchterm   i    gt  -1                count2  1            secondHalfCounter             Some performance comparison  using timer js  between the cached length for-loop VS the above method   http   jsfiddle net tejzpr bbLgzxgo

User · Answer

As of September 2017 these jsperf tests are showing the following pattern to be most performant on Chrome 60   function foo x     x     arr forEach foo     Is anyone able to reproduce

User · Answer

This looks to be the fastest way by far     var el  while  el   arr shift        el    2      Take into account that this will consume the array  eating it  and leaving nothing left

User · Answer

If the order is not important  I prefer this style   for var i   array length  i--      It caches the length and is much shorter to write  But it will iterate over the array in reverse order

User · Answer

Best  as in pure performance  or performance AND readability   Pure performance  best  is this  which uses a cache and the   prefix operator  my data  http   jsperf com caching-array-length 189   for  var i   0  len   myArray length  i  lt  len    i         blah blah     I would argue that the cache-less for-loop is the best balance in execution time and programmer reading time  Every programmer that started with C C   Java won t waste a ms having to read through this one  for var i 0  i  lt  arr length  i          blah blah

User · Answer

Another jsperf com test  http   jsperf com while-reverse-vs-for-cached-length  The reverse while loop seems to be the fastest  Only problem is that while  --i  will stop at 0  How can I access array 0  in my loop then

User · Answer

Fastest approach is the traditional for loop  Here is a more comprehensive performance comparison    https   gists cwidanage com 2019 11 how-to-iterate-over-javascript-arrays html

User · Answer

While loop is a bit faster than for loop   var len   arr length  while  len--           blah blah     Use while loop instead

User · Answer

cache the array length inside the loop  some seconds of time  will be eluded   Depends on the items in the array  if there are more items in array there is major difference with respect to Ms of time         sArr    Array 158    for var i   0   i  lt sArr length   i       callArray sArr i      function call       end  6 875ms               sArr    Array 158   for var i   0 len   sArr length   i  lt  len   i        callArray sArr i      function call       end  1 354ms

User · Answer

The absolute fastest way to loop through a javascript array is  var len   arr length  while  len--           blah blah    See this post for a full comparison

User · Answer

var arr          The array var i   0  while  i  lt  arr length           Do something with arr i      i        i   is faster than   i  --i and i--  Also  you can save the last line doing arr i    the last time you need to access i  but this can be hard to debug    You can test it here  with other loop tests   http   jsperf com for-vs-whilepop 5

User · Answer

As of 2019 WebWorker has been more popular  for large datasets  we can use WebWorker to process much much faster by fully utilize multi-core processors   We also have Parallel js which make WebWorker much easier to use for data processing

User · Answer

Try this   var myarray      i   myarray lenght  while i--      do somthing

User · Answer

It s the year 2017   I made some tests   https   jsperf com fastest-way-to-iterate-through-an-array   Looks like the while method is the fastest on Chrome   Looks like the left decrement  --i  is much faster than the others    i  i--  i    on Firefox   This approach is the fasted on average  But it iterates the array in reversed order   let i   array length  while  --i  gt   0        doSomething array i        If the forward order is important  use this approach   let ii   array length  let i   0  while  i  lt  ii        doSomething array i          i

User · Answer

If you want a faster for loop  define your variables outside the loop and use below syntax   const iMax   lengthOftheLoop    var i   0    for    i  lt  iMax  i          console log  quot loop quot  i        reference  https   medium com kbdev voyage-to-the-most-efficient-loop-in-nodejs-and-a-bit-js-5961d4524c2e

[javascript] What's the fastest way to loop through an array in JavaScript?

Examples related to javascript

Examples related to performance

Examples related to loops