Loop through an array in JavaScript

Question

In Java you can use a for loop to traverse objects in an array as follows   String   myStringArray     Hello    World    for  String s   myStringArray           Do something     Can you do the same in JavaScript

User · Answer

There are various way to loop through array in JavaScript.

Generic loop:

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5's forEach:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

Have a look this for detailed information or you can also check MDN for looping through an array in JavaScript & using jQuery check jQuery for each.

User · Answer

Well  how about this   for  var key in myStringArray        console log myStringArray key

User · Answer

The most elegant and fast way var arr    1  2  3  1023  1024   for  var value  value   arr pop           value   1    http   jsperf com native-loop-performance 8  Edited  because I was wrong   Comparing methods for looping through an array of 100000 items and do a minimal operation with the new value each time   http   jsben ch   BQhED  Preparation   lt script src  quot   code jquery com jquery-2 1 0 min js quot  gt  lt  script gt   lt script src  quot   cdnjs cloudflare com ajax libs underscore js 1 6 0 underscore-min js quot  gt  lt  script gt   lt script gt      Benchmark prototype setup   function                Fake function with minimal action on the value         var tmp   0          var process   function value                tmp   value     Hold a reference to the variable  prevent engine optimisation                                  Declare the test Array         var arr               for  var i   0  i  lt  100000  i                arr i    i          lt  script gt   Tests   lt a href  quot http   jsperf com native-loop-performance 16 quot      title  quot http   jsperf com native-loop-performance 16 quot   gt  lt img src  quot http   i imgur com YTrO68E png quot  title  quot Hosted by imgur com quot    gt  lt  a gt

User · Answer

If you re using the jQuery library  consider using  http   api jquery com jQuery each   From the documentation      jQuery each  collection  callback indexInArray  valueOfElement          Returns  Object      Description  A generic iterator function  which can be used to   seamlessly iterate over both objects and arrays  Arrays and array-like   objects with a length property  such as a function s arguments object    are iterated by numeric index  from 0 to length-1  Other objects are   iterated via their named properties       The   each   function is not the same as   selector  each    which is   used to iterate  exclusively  over a jQuery object  The   each     function can be used to iterate over any collection  whether it is a   map  JavaScript object  or an array  In the case of an array  the   callback is passed an array index and a corresponding array value each   time   The value can also be accessed through the this keyword  but   Javascript will always wrap the this value as an Object even if it is   a simple string or number value   The method returns its first   argument  the object that was iterated

User · Answer

Sure it s inefficient and many despise it  but it s one of the closest to the mentioned   var myStringArray     Hello   World    myStringArray forEach function f          Do something

User · Answer

You have several options  1  Sequential for loop   x000D   x000D  var myStringArray     Hello   World    var arrayLength   myStringArray length  for  var i   0  i  lt  arrayLength  i          console log myStringArray i          Do something   x000D   x000D   x000D   Pros  Works on every environment You can use break and continue flow control statements  Cons  Too verbose Imperative Easy to have off-by-one errors  sometimes also called a fence post error   2  Array prototype forEach The ES5 specification introduced a lot of beneficial array methods  One of them  the Array prototype forEach  gave us a concise way to iterate over an array   x000D   x000D  const array     one    two    three   array forEach function  item  index      console log item  index       x000D   x000D   x000D   Being almost ten years as the time of writing that the ES5 specification was released  Dec  2009   it has been implemented by nearly all modern engines in the desktop  server  and mobile environments  so it s safe to use them  And with the ES6 arrow function syntax  it s even more succinct  array forEach item   gt  console log item     Arrow functions are also widely implemented unless you plan to support ancient platforms  e g   Internet  Explorer  11   you are also safe to go  Pros  Very short and succinct  Declarative  Cons  Cannot use break   continue  Normally  you can replace the need to break out of imperative loops by filtering the array elements before iterating them  for example  array filter item   gt  item condition  lt  10        forEach item   gt  console log item    Keep in mind if you are iterating an array to build another array from it  you should use map  I ve seen this anti-pattern so many times  Anti-pattern  const numbers    1 2 3 4 5   doubled        numbers forEach  n  i    gt    doubled i    n   2      Proper use case of map   x000D   x000D  const numbers    1 2 3 4 5   const doubled   numbers map n   gt  n   2    console log doubled   x000D   x000D   x000D   Also  if you are trying to reduce the array to a value  for example  you want to sum an array of numbers  you should use the reduce method  Anti-pattern  const numbers    1 2 3 4 5   const sum   0  numbers forEach num   gt    sum    num      Proper use of reduce   x000D   x000D  const numbers    1 2 3 4 5   const sum   numbers reduce  total  n    gt  total   n  0    console log sum   x000D   x000D   x000D   3  ES6 for-of statement The ES6 standard introduces the concept of iterable objects and defines a new construct for traversing data  the for   of statement  This statement works for any kind of iterable object and also for generators  any object that has a   Symbol iterator   property   Array objects are by definition built-in iterables in ES6  so you can use this statement on them  let colors     red    green    blue    for  const color of colors       console log color      Pros  It can iterate over a large variety of objects  Can use normal flow control statements  break   continue   Useful to iterate serially asynchronous values   Cons  If you are targeting older browsers  the transpiled output might surprise you   Do not use for   in  zipcodeman suggests the use of the for   in statement  but for iterating arrays for-in should be avoided  that statement is meant to enumerate object properties  It shouldn t be used for array-like objects because   The order of iteration is not guaranteed  the array indexes may not be visited in numeric order  Inherited properties are also enumerated   The second point is that it can give you a lot of problems  for example  if you extend the Array prototype object to include a method there  that property will also be enumerated  For example   x000D   x000D  Array prototype foo    foo    var array     a    b    c     for  var i in array        console log array i      x000D   x000D   x000D   The above code will console log  quot a quot    quot b quot    quot c quot   and  quot foo  quot   That can be particularly a problem if you use some library that relies heavily on native prototypes augmentation  such as MooTools   The for-in statement  as I said before  is there to enumerate object properties  for example   x000D   x000D  var obj          a   1       b   2       c   3     for  var prop in obj        if  obj hasOwnProperty prop                or if  Object prototype hasOwnProperty call obj prop   for safety            console log  prop      prop     value      obj prop           x000D   x000D   x000D   In the above example  the hasOwnProperty method allows you to enumerate only own properties  That s it  only the properties that the object physically has  no inherited properties  I would recommend you to read the following article   Enumeration VS Iteration

User · Answer

Esoteric  but fast  x000D   x000D  let a    Hello    World     while a length    console log  a shift        x000D   x000D   x000D   Performance test Today  2020-08-05  I perform a test on Chrome 84  Safari 13 and Firefox 78 on chosen solutions  Conclusions  while solution  A  is the fastest on all browsers for all arrays except the big one on Chrome  which is surprising   for medium arrays the while solution  A  is thousands of times faster than other solutions       The while solution  A  slows down on Chrome for arrays witch 30-40k elements The for-in solution  B  is slowest  Results  Details I perform 3 tests   small - for 2 elements array  like OP  - you can run it here medium - for 10K elements array and - you can run it here big - for 100K elements array - you can run it here  The below snippet presents code used in the test   x000D   x000D  function A a      let r 0    while a length  r   a shift   length    return r     function B a      let r 0    for i in a  r   a i  length    return r     function C a      let r 0    for x of a  r   x length    return r     function D a      let r 0    for  i 0  i lt a length    i  r   a i  length    return r      function E a      let r 0    a forEach x  gt  r   x length     return r     let arr    Hello    World      A B C D E  forEach f   gt  console log    f name     f     arr       x000D   x000D   x000D   Here are example results for Chrome for a medium array

User · Answer

For example  I used in a Firefox console     forEach call document getElementsByTagName  pre    function e       console log e       You can use querySelectorAll to get same result  x000D   x000D  document querySelectorAll  pre   forEach   e    gt        console log e textContent      x000D   lt pre gt text 1 lt  pre gt   lt pre gt text 2 lt  pre gt   lt pre gt text 3 lt  pre gt  x000D   x000D   x000D

User · Answer

In JavaScript it s not advisable to loop through an Array with a for-in loop  but it s better to use a for loop such as   for var i 0  len myArray length  i  lt  len  i        It s optimized as well   caching  the array length   If you d like to learn more  read my post on the subject

User · Answer

Array traversal cheatsheet in JavaScript Given an array  you can traverse it one of the many ways as follows  1  Classic for loop  x000D   x000D  const myArray     Hello    World     for  let i   0  i  lt  myArray length  i        console log myArray i      x000D   x000D   x000D   2  for   of  x000D   x000D  const myArray     Hello    World     for  const item of myArray      console log item     x000D   x000D   x000D   3  Array prototype forEach    x000D   x000D  const myArray     Hello    World     myArray forEach item   gt      console log item       x000D   x000D   x000D   4  while loop  x000D   x000D  const myArray     Hello    World    let i   0   while  i  lt  myArray length      console log myArray i      i      x000D   x000D   x000D   5  do   while loop  x000D   x000D  const myArray     Hello    World    let i   0   do     console log myArray i      i      while  i  lt  myArray length   x000D   x000D   x000D   6  Queue style  x000D   x000D  const myArray     Hello    World      while  myArray length      console log myArray shift       x000D   x000D   x000D   7  Stack style Note  The list is printed reverse in this one   x000D   x000D  const myArray     Hello    World     while  myArray length      console log myArray pop       x000D   x000D   x000D

User · Answer

Make array var array     quot 1 quot   quot 2 quot   quot 3 quot   quot 4 quot   quot 5 quot   quot 6 quot   quot 7 quot   quot 8 quot   quot 9 quot   quot 10 quot     Loop for var i   0  i  lt  array length  i      console log  i 1     quot  -- gt   quot    array i      For the ACTUAL number for i  you need to change  i 1  to i or  i   if you want   Hope this helped

User · Answer

Yes  assuming your implementation includes the for   of feature introduced in ECMAScript 2015  the  Harmony  release     which is a pretty safe assumption these days   It works like this      REQUIRES ECMASCRIPT 2015  var s  myStringArray     Hello    World    for  s of myStringArray             do something with s         Or better yet  since ECMAScript 2015 also provides block-scoped variables      REQUIRES ECMASCRIPT 2015  const myStringArray     Hello    World    for  const s of myStringArray             do something with s          s is no longer defined here    The variable s is different on each iteration  but can still be declared const inside the loop body as long as it isn t modified there    A note on sparse arrays  an array in JavaScript may not actually store as many items as reported by its length  that reported number is simply one greater than the highest index at which a value is stored  If the array holds fewer elements than indicated by its length  its said to be sparse  For example  it s perfectly legitimate to have an array with items only at indexes 3  12  and 247  the length of such an array is reported as 248  though it is only actually storing 3 values   If you try to access an item at any other index  the array will appear to have the undefined value there  So when you want to  loop through  an array  you have a question to answer  do you want to loop over the full range indicated by its length and process undefineds for any missing elements  or do you only want to process the elements actually present  There are plenty of applications for both approaches  it just depends on what you re using the array for   If you iterate over an array with for  of  the body of the loop is executed length times  and the loop control variable is set to undefined for any items not actually present in the array  Depending on the details of your  do something with  code  that behavior may be what you want  but if not  you should use a different approach   Of course  some developers have no choice but to use a different approach anyway  because for whatever reason they re targeting a version of JavaScript that doesn t yet support for   of   As long as your JavaScript implementation is compliant with the previous edition of the ECMAScript specification  which rules out  for example  versions of Internet Explorer before 9   then you can use the Array forEach iterator method instead of a loop  In that case  you pass a function to be called on each item in the array   var myStringArray      Hello    World     myStringArray forEach  function s                 do something with s            Unlike for   of   forEach only calls the function for elements that are actually present in the array  If passed our hypothetical array with three elements and a length of 248  it will only call the function three times  not 248 times  It also distinguishes between missing elements and elements that are actually set to undefined  for the latter  it will still call the function  passing undefined as the argument  If this is how you want to handle sparse arrays   forEach may be the way to go even if your interpreter supports for   of   The final option  which works in all versions of JavaScript  is an explicit counting loop  You simply count from 0 up to one less than the length and use the counter as an index  The basic loop looks like this   var i  s  myStringArray      Hello    World     len   myStringArray length  for  i 0  i lt len    i      s   myStringArray i            do something with s         One advantage of this approach is that you can choose how to handle sparse arrays  the above code will run the body of the loop the full length times  with s set to undefined for any missing elements  just like for  of  If you instead want to handle only the actually-present elements of a sparse array  like  forEach  you can add a simple in test on the index   var i  s  myStringArray      Hello    World     len   myStringArray length  for  i 0  i lt len    i      if  i in myStringArray        s   myStringArray i              do something with s             Assigning the length value to the local variable  as opposed to including the full myStringArray length expression in the loop condition  can make a significant difference in performance since it skips a property lookup each time through  using Rhino on my machine  the speedup is 43     You may see the length caching done in the loop initialization clause  like this   var i  len  myStringArray      Hello    World     for  len   myStringArray length  i 0  i lt len    i      The explicit counting loop also means you have access to the index of each value  should you want it  The index is also passed as an extra parameter to the function you pass to forEach  so you can access it that way as well   myStringArray forEach  function s  i              do something with s and i           for   of doesn t give you the index associated with each object  but as long as the object you re iterating over is actually an Array  for  of works for other iterable types which may not have this method   you can use the Array entries method to change it to an array of  index  item  pairs  and then iterate over that   for  const  i  s  of myStringArray entries               do something with s and i         The for   in syntax mentioned by others is for looping over an object s properties  since an Array in JavaScript is just an object with numeric property names  and an automatically-updated length property   you can theoretically loop over an Array with it   But the problem is that it doesn t restrict itself to the numeric property values  remember that even methods are actually just properties whose value is a closure   nor is it guaranteed to iterate over those in numeric order  Therefore  the for   in syntax should not be used for looping through Arrays

User · Answer

for  const s of myStringArray     Directly answering your question  now you can   Most other answers are right  but they do not mention  as of this writing  that ECMAScript   6   2015 is bringing a new mechanism for doing iteration  the for  of loop  This new syntax is the most elegant way to iterate an array in JavaScript  as long you don t need the iteration index   It currently works with Firefox 13   Chrome 37  and it does not natively work with other browsers  see browser compatibility below   Luckily we have JavaScript compilers  such as Babel  that allow us to use next-generation features today  It also works on Node js  I tested it on version 0 12 0   Iterating an array    You could also use  quot let quot  or  quot const quot  instead of  quot var quot  for block scope  for  var letter of   quot a quot    quot b quot    quot c quot         console log letter      Iterating an array of objects const band        firstName    John   lastName   Lennon       firstName    Paul   lastName   McCartney       for const member of band     console log member firstName         member lastName      Iterating a generator   example extracted from https   developer mozilla org en-US docs Web JavaScript Reference Statements for   of  function  fibonacci        A generator function   let  prev  curr     1  1     while  true         prev  curr     curr  prev   curr       yield curr         for  const n of fibonacci        console log n        Truncate the sequence at 1000   if  n  gt   1000        break          Compatibility table  http   kangax github io es5-compat-table es6  For  of loops Specification  http   wiki ecmascript org doku php id harmony iterators

User · Answer

There are a couple of ways to do it in JavaScript  The first two examples are JavaScript samples  The third one makes use of a JavaScript library  that is  jQuery making use of the  each   function    x000D   x000D  var myStringArray     hello    World    x000D  for var i in myStringArray    x000D    alert myStringArray i    x000D    x000D   x000D   x000D     x000D   x000D  var myStringArray     hello    World    x000D  for  var i 0  i  lt  myStringArray length  i      x000D    alert myStringArray i    x000D    x000D   x000D   x000D     x000D   x000D  var myStringArray     hello    World    x000D    each myStringArray  function index  value   x000D    alert value   x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Array loop   for var i   0  i  lt  things length  i         var thing   things i       console log thing       Object loop   for var prop in obj       var propValue   obj prop       console log propValue

User · Answer

It is better to use a sequential for loop   for  var i   0  i  lt  myStringArray length  i             Do something

User · Answer

In JavaScript  there are so many solutions to loop an array   The code below are popular ones   x000D   x000D      Declare inputs    x000D  const items     Hello    World   x000D   x000D      Solution 1  Simple for    x000D  console log  solution 1  simple for   x000D   x000D  for  let i   0  i  lt  items length  i      x000D    console log items i   x000D    x000D   x000D  console log   x000D  console log   x000D   x000D      Solution 2  Simple while    x000D  console log  solution 2  simple while   x000D   x000D  let i   0 x000D  while  i  lt  items length    x000D    console log items i     x000D    x000D   x000D  console log   x000D  console log   x000D   x000D      Solution 3  forEach   x000D  console log  solution 3  forEach   x000D   x000D  items forEach item   gt    x000D    console log item  x000D     x000D   x000D  console log   x000D  console log   x000D   x000D      Solution 4  for-of   x000D  console log  solution 4  for-of   x000D   x000D  for  const item of items    x000D    console log item  x000D    x000D   x000D  console log   x000D  console log   x000D   x000D   x000D

User · Answer

var obj     one   two   three     for x in obj       console log obj x

User · Answer

The optimized approach is to cache the length of array and using the single variable pattern  initializing all variables with a single var keyword  var i  max  myStringArray     quot Hello quot    quot World quot    for  i   0  max   myStringArray length  i  lt  max  i          alert myStringArray i            Do something    If the order of iteration does not matter then you should try reversed loop  It is the fastest as it reduces overhead condition testing and decrement is in one statement  var i myStringArray     quot item1 quot   quot item2 quot    for  i    myStringArray length  i--        alert myStringArray i       Or better and cleaner to use a while loop  var myStringArray     quot item1 quot   quot item2 quot   i   myStringArray length  while i--          Do something with fruits i

User · Answer

There s a method to iterate over only own object properties  not including prototype s ones   for  var i in array  if  array hasOwnProperty i            Do something with array i      but it still will iterate over custom-defined properties   In JavaScript any custom property could be assigned to any object  including an array   If one wants to iterate over sparsed array  for  var i   0  i  lt  array length  i    if  i in array  or array forEach with es5shim should be used

User · Answer

Use the while loop    var i   0  item  items     one    two    three    while item   items i          console log item      It logs   one    two   and  three  And for the reverse order  an even more efficient loop  var items     one    two    three    i   items length  while i--       console log items i       It logs   three    two   and  one  Or the classical for loop  var items     one    two    three   for var i 0  l   items length  i  lt  l  i         console log items i       It logs   one   two   three  Reference  Google Closure  How not to write JavaScript

User · Answer

The formal  and perhaps old  way is Array prototype forEach       var arr     quot apple quot    quot banana quot    quot cherry quot    quot mango quot    arr forEach function item  index          console log  quot   quot    index    quot       quot    item    quot   quot

User · Answer

Introduction Since my time in college  I ve programmed in Java  JavaScript  Pascal  ABAP  PHP  Progress 4GL  C C   and possibly a few other languages I can t think of right now  While they all have their own linguistic idiosyncrasies  each of these languages share many of the same basic concepts  Such concepts include procedures   functions  IF-statements  FOR-loops  and WHILE-loops   A traditional for-loop A traditional for loop has three components   The initialization  executed before the look block is executed the first time The condition  checks a condition every time before the loop block is executed  and quits the loop if false The afterthought  performed every time after the loop block is executed  These three components are separated from each other by a   symbol  Content for each of these three components is optional  which means that the following is the most minimal for loop possible  for               Do stuff    Of course  you will need to include an if condition     true    break     or an if condition     true    return    somewhere inside that for-loop to get it to stop running  Usually  though  the initialization is used to declare an index  the condition is used to compare that index with a minimum or maximum value  and the afterthought is used to increment the index  for  var i   0  length   10  i  lt  length  i          console log i       Using a traditional for loop to loop through an array The traditional way to loop through an array  is this  for  var i   0  length   myArray length  i  lt  length  i          console log myArray i       Or  if you prefer to loop backwards  you do this  for  var i   myArray length - 1  i  gt  -1  i--        console log myArray i       There are  however  many variations possible  like for example this one  for  var key   0  value   myArray key   length   myArray length  key  lt  length  value   myArray   key         console log value         or this one    var i   0  length   myArray length  for    i  lt  length         console log myArray i        i          or this one  var key   0  value  for    value   myArray key           console log value      Whichever works best is largely a matter of both personal taste and the specific use case you re implementing  Note that each of these variations is supported by all browsers  including very very old ones   A while loop One alternative to a for loop is a while loop  To loop through an array  you could do this  var key   0  while value   myArray key          console log value      Like traditional for loops  while loops are supported by even the oldest of browsers  Also  note that every while loop can be rewritten as a for loop  For example  the while loop hereabove behaves the exact same way as this for-loop  for var key   0  value   myArray key           console log value       For   in and for   of In JavaScript  you can also do this  for  i in myArray        console log myArray i       This should be used with care  however  as it doesn t behave the same as a traditional for loop in all cases  and there are potential side-effects that need to be considered  See Why is using  quot for   in quot  for array iteration a bad idea  for more details  As an alternative to for   in  there s now also for for   of  The following example shows the difference between a for   of loop and a for   in loop  var myArray    3  5  7   myArray foo    quot hello quot    for  var i in myArray      console log i      logs 0  1  2   quot foo quot     for  var i of myArray      console log i      logs 3  5  7    Additionally  you need to consider that no version of Internet Explorer supports for   of  Edge 12  does  and that for   in requires at least Internet  Explorer  10   Array prototype forEach   An alternative to for-loops is Array prototype forEach    which uses the following syntax  myArray forEach function value  key  myArray        console log value        Array prototype forEach   is supported by all modern browsers  as well as Internet  Explorer  9 and later   Libraries Finally  many utility libraries also have their own foreach variation  AFAIK  the three most popular ones are these  jQuery each    in jQuery    each myArray  function key  value        console log value          each    in Underscore js    each myArray  function value  key  myArray        console log value          forEach    in Lodash    forEach myArray  function value  key        console log value

User · Answer

It s not 100  identical  but similar   x000D   x000D     var myStringArray     Hello    World       The array uses    not        for  var i in myStringArray            console log i     - gt      myStringArray i       i is the index key  not the item       x000D   x000D   x000D

User · Answer

Just a simple one-line solution    x000D   x000D  arr     table    chair    x000D   x000D     Solution x000D  arr map  e    gt    x000D    console log e   x000D    return e  x000D      x000D   x000D   x000D

User · Answer

You can use map  which is a functional programming technique that s also available in other languages like Python and Haskell    1 2 3 4  map  function item         alert item        The general syntax is   array map func    In general func would take one parameter  which is an item of the array  But in the case of JavaScript  it can take a second parameter which is the item s index  and a third parameter which is the array itself   The return value of array map is another array  so you can use it like this   var x    1 2 3 4  map  function item   return item   10       And now x is  10 20 30 40    You don t have to write the function inline  It could be a separate function   var item processor   function item             Do something complicated to an item    new list   my list map item processor     which would be sort-of equivalent to    for  item in my list   item processor item      Except you don t get the new list

User · Answer

x000D   x000D  var array     hai    hello    how    are    you   x000D    document  ready function      x000D        clickButton   click function      x000D      for  var i   0  i  lt  array length  i      x000D        alert array i   x000D        x000D       x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 1 jquery min js  gt  lt  script gt  x000D   lt input id  clickButton  value  click Me  type  button   gt  x000D   lt div id  show  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Yes  you can do the same in JavaScript using a loop  but not limited to that  There are many ways to do a loop over arrays in JavaScript  Imagine you have this array below  and you d like to do a loop over it  var arr    1  2  3  4  5    These are the solutions  1  For loop A for loop is a common way looping through arrays in JavaScript  but it is no considered as the fastest solutions for large arrays  for  var i 0  l arr length  i lt l  i        console log arr i       2  While loop A while loop is considered as the fastest way to loop through long arrays  but it is usually less used in the JavaScript code  let i 0   while  arr length gt i        console log arr i        i       3  Do while A do while is doing the same thing as while with some syntax difference as below  let i 0  do     console log arr i      i      while  arr length gt i    These are the main ways to do JavaScript loops  but there are a few more ways to do that  Also we use a for in loop for looping over objects in JavaScript  Also look at the map    filter    reduce    etc  functions on an Array in JavaScript  They may do things much faster and better than using while and for  This is a good article if you like to learn more about the asynchronous functions over arrays in JavaScript   Functional programming has been making quite a splash in the development world these days  And for good reason  Functional techniques can help you write more declarative code that is easier to understand at a glance  refactor  and test  One of the cornerstones of functional programming is its special use of lists and list operations  And those things are exactly what the sound like they are  arrays of things  and the stuff you do to them  But the functional mindset treats them a bit differently than you might expect  This article will take a close look at what I like to call the  quot big three quot  list operations  map  filter  and reduce  Wrapping your head around these three functions is an important step towards being able to write clean functional code  and opens the doors to the vastly powerful techniques of functional and reactive programming  It also means you ll never have to write a for loop again   Read more gt  gt  here

User · Answer

The best way in my opinion is to use the Array forEach function  If you cannot use that I would suggest to get the polyfill from MDN  To make it available  it is certainly the safest way to iterate over an array in JavaScript   Array prototype forEach    So as others has suggested  this is almost always what you want   var numbers    1 11 22 33 44 55 66 77 88 99 111   var sum   0  numbers forEach function n     sum    n        This ensures that anything you need in the scope of processing the array stays within that scope  and that you are only processing the values of the array  not the object properties and other members  which is what for    in does   Using a regular C-style for loop works in most cases  It is just important to remember that everything within the loop shares its scope with the rest of your program  the     does not create a new scope   Hence   var sum   0  var numbers    1 11 22 33 44 55 66 77 88 99 111    for var i   0  i lt numbers length    i     sum    numbers i      alert i     will output  11  - which may or may not be what you want   A working jsFiddle example  https   jsfiddle net workingClassHacker pxpv2dh5 7

User · Answer

It seems that all the variants were listed  except forEach by lodash     forEach  1  2    value    gt      console log value

User · Answer

var myStringArray     hello    World    myStringArray forEach function val  index      console log val  index

User · Answer

If anybody is interested in the performance side of the multiple mechanisms available for Array iterations  I ve prepared the following JSPerf tests   https   jsperf com fastest-array-iterator    Results   The traditional for   iterator  is by far the fastest method  especially when used with the array length cached   let arr    1 2 3 4 5    for let i 0  size arr length  i lt size  i            Do something     The Array prototype forEach   and the Array prototype map   methods are the slowest approximations  probably as a consequence of the function call overhead

User · Answer

Opera  Safari  Firefox and Chrome now all share a set of enhanced Array methods for optimizing many common loops   You may not need all of them  but they can be very useful  or would be if every browser supported them   Mozilla Labs published the algorithms they and WebKit both use  so that you can add them yourself   filter returns an array of items that satisfy some condition or test   every returns true if every array member passes the test   some returns true if any pass the test   forEach runs a function on each array member and doesn t return anything   map is like forEach  but it returns an array of the results of the operation for each element   These methods all take a function for their first argument and have an optional second argument  which is an object whose scope you want to impose on the array members as they loop through the function   Ignore it until you need it   indexOf and lastIndexOf find the appropriate position of the first or last element that matches its argument exactly    function        var p  ap  Array prototype  p2           filter  function fun  scope               var L  this length  A      i  0  val              if typeof fun    function                    while i lt  L                       if i in this                           val  this i                           if fun call scope  val  i  this                                A A length   val                                                                        i                                              return A                     every  function fun  scope               var L  this length  i  0              if typeof fun    function                    while i lt L                       if i in this  amp  amp   fun call scope  this i   i  this                           return false                        i                                    return true                            return null                     forEach  function fun  scope               var L  this length  i  0              if typeof fun    function                    while i lt  L                       if i in this                           fun call scope  this i   i  this                                               i                                              return this                     indexOf  function what  i               i  i    0              var L  this length              while i lt  L                   if this i     what                      return i                    i                            return -1                     lastIndexOf  function what  i               var L  this length              i  i    L-1              if isNaN i     i gt   L                  i  L-1              else                 if i lt  0  i    L              while i gt  -1                   if this i     what                      return i                  --i                            return -1                     map  function fun  scope               var L  this length  A  Array this length   i  0  val              if typeof fun    function                    while i lt  L                       if i in this                           A i   fun call scope  this i   i  this                                               i                                    return A                                   some  function fun  scope               var i  0  L  this length              if typeof fun    function                    while i lt L                       if i in this  amp  amp  fun call scope  this i   i  this                           return true                        i                                    return false                                    for p in p2           if  ap p               ap p   p2 p             return true

User · Answer

If you want a terse way to write a fast loop and you can iterate in reverse   for  var i myArray length i--      var item myArray i       This has the benefit of caching the length  similar to for  var i 0  len myArray length  i lt len    i  and unlike for  var i 0  i lt myArray length    i   while being fewer characters to type   There are even some times when you ought to iterate in reverse  such as when iterating over a live NodeList where you plan on removing items from the DOM during iteration

User · Answer

If you want to use jQuery  it has a nice example in its documentation      each   52  97    function  index  value           alert  index          value

User · Answer

var x    4  5  6   for  i   0  j   x i   i  lt  x length  j   x   i         console log i j       A lot cleaner

User · Answer

I would thoroughly recommend making use of the Underscore js library  It provides you with various functions that you can use to iterate over arrays collections  For instance    each  1  2  3   function num   alert num         gt  alerts each number in turn

User · Answer

Some use cases of looping through an array in the functional programming way in JavaScript   1  Just loop through an array  const myArray     x 100    x 200    x 300     myArray forEach  element  index  array    gt        console log element x      100  200  300     console log index      0  1  2     console log array      same myArray object 3 times       Note  Array prototype forEach   is not a functional way strictly speaking  as the function it takes as the input parameter is not supposed to return a value  which thus cannot be regarded as a pure function   2  Check if any of the elements in an array pass a test  const people          name   John   age  23         name   Andrew   age  3         name   Peter   age  8         name   Hanna   age  14         name   Adam   age  37     const anyAdult   people some person   gt  person age  gt   18   console log anyAdult      true   3  Transform to a new array  const myArray     x 100    x 200    x 300     const newArray  myArray map element   gt  element x   console log newArray       100  200  300    Note  The map   method creates a new array with the results of calling a provided function on every element in the calling array   4  Sum up a particular property  and calculate its average  const myArray     x 100    x 200    x 300     const sum   myArray map element   gt  element x  reduce  a  b    gt  a   b  0   console log sum      600   0   100   200   300  const average   sum   myArray length  console log average      200   5  Create a new array based on the original but without modifying it  const myArray     x 100    x 200    x 300     const newArray  myArray map element   gt        return              element          x  element x   2             console log myArray       100  200  300  console log newArray       200  400  600    6  Count the number of each category  const people          name   John   group   A          name   Andrew   group   C          name   Peter   group   A          name   James   group   B          name   Hanna   group   A          name   Adam   group   B      const groupInfo   people reduce  groups  person    gt        const  A   0  B   0  C   0    groups      if  person group      A             return     groups  A  A   1         else if  person group      B             return     groups  B  B   1         else           return     groups  C  C   1                  console log groupInfo       A  3  C  1  B  2    7  Retrieve a subset of an array based on particular criteria  const myArray     x 100    x 200    x 300     const newArray   myArray filter element   gt  element x  gt  250   console log newArray        x 300      Note  The filter   method creates a new array with all elements that pass the test implemented by the provided function   8  Sort an array  const people         name   John   age  21        name   Peter   age  31        name   Andrew   age  29        name   Thomas   age  25       let sortByAge   people sort function  p1  p2      return p1 age - p2 age       console log sortByAge       9  Find an element in an array  const people      name   john   age 23                    name   john   age 43                    name   jim   age 101                    name   bob   age 67      const john   people find person   gt  person name      john    console log john       The Array prototype find   method returns the value of the first element in the array that satisfies the provided testing function   References   Array prototype some   Array prototype forEach   Array prototype map   Array prototype filter   Array prototype sort   Spread syntax Array prototype find

User · Answer

There is a way to do it where you have very little implicit scope in your loop and do away with extra variables  var i   0       item      Note this is weak to sparse arrays or falsey values for     item   myStringArray i             item     This is the string at the index     Or if you really want to get the id and have a really classical for loop  var i   0      len   myStringArray length     Cache the length  for     i  lt  len   i          myStringArray i      Don t use this if you plan on changing the length of the array    Modern browsers all support iterator methods forEach  map  reduce  filter and a host of other methods on the Array prototype

User · Answer

Short answer  yes  You can do with this   var myArray     element1    element2    element3    element4     for  i   0  i  lt  myArray length  i        console log myArray i        In a browser console  you can see something like  element1    element2   etc   printed

User · Answer

I did not yet see this variation  which I personally like the best   Given an array   var someArray     some    example    array      You can loop over it without ever accessing the length property   for  var i 0  item  item someArray i   i           item is  some   then  example   then  array       i is the index of item in the array   alert  someArray     i           item       See this JsFiddle demonstrating that  http   jsfiddle net prvzk   This only works for arrays that are not sparse  Meaning that there actually is a value at each index in the array  However  I found that in practice I hardly ever use sparse arrays in JavaScript    In such cases it s usually a lot easier to use an object as a map hashtable  If you do have a sparse array  and want to loop over 0    length-1  you need the for  var i 0  i lt someArray length    i  construct  but you still need an if inside the loop to check whether the element at the current index is actually defined   Also  as CMS mentions in a comment below  you can only use this on arrays that don t contain any falsish values  The array of strings from the example works  but if you have empty strings  or numbers that are 0 or NaN  etc  the loop will break off prematurely  Again in practice this is hardly ever a problem for me  but it is something to keep in mind  which makes this a loop to think about before you use it    That may disqualify it for some people     What I like about this loop is    It s short to write No need to access  let alone cache  the length property The item to access is automatically defined within the loop body under the name you pick  Combines very naturally with array push and array splice to use arrays like lists stacks   The reason this works is that the array specification mandates that when you read an item from an index    the array s length  it will return undefined  When you write to such a location it will actually update the length   For me  this construct most closely emulates the Java 5 syntax that I love   for  String item   someArray            with the added benefit of also knowing about the current index inside the loop

[javascript] Loop through an array in JavaScript

Examples related to javascript

Examples related to arrays

Examples related to loops

Examples related to for-loop