Why is using for in for array iteration a bad idea

Question

I ve been told not to use for   in with arrays in JavaScript  Why not

User · Answer

Because it will iterate over properties belonging to objects up the prototype chain if you re not careful   You can use for   in  just be sure to check each property with hasOwnProperty

User · Answer

An important aspect is that for   in only iterates over properties contained in an object which have their enumerable property attribute set to true  So if one attempts to iterate over an object using for   in then arbitrary properties may be missed if their enumerable property attribute is false  It is quite possible to alter the enumerable property attribute for normal Array objects so that certain elements are not enumerated  Though in general the property attributes tend to apply to function properties within an object   One can check the value of a properties  enumerable property attribute by   myobject propertyIsEnumerable  myproperty     Or to obtain all four property attributes   Object getOwnPropertyDescriptor myobject  myproperty     This is a feature available in ECMAScript 5 - in earlier versions it was not possible to alter the value of the enumerable property attribute  it was always set to true

User · Answer

The reason is that one construct    x000D   x000D  var a          Create a new empty array  x000D  a 5    5       Perfectly legal JavaScript that resizes the array  x000D   x000D  for  var i   0  i  lt  a length  i      x000D         Iterate over numeric indexes from 0 to 5  as everyone expects  x000D      console log a i    x000D    x000D   x000D     Will display  x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     5 x000D     x000D   x000D   x000D    can sometimes be totally different from the other    x000D   x000D  var a       x000D  a 5    5  x000D  for  var x in a    x000D         Shows only the explicitly set index of  5   and ignores 0-4 x000D      console log x   x000D    x000D   x000D     Will display  x000D     5 x000D     x000D   x000D   x000D    Also consider that JavaScript libraries might do things like this  which will affect any array you create    x000D   x000D     Somewhere deep in your JavaScript library    x000D  Array prototype foo   1  x000D   x000D     Now you have no idea what the below code will do  x000D  var a    1  2  3  4  5   x000D  for  var x in a   x000D         Now foo is a part of EVERY array and  x000D         will show up here as a value of  x   x000D      console log x   x000D    x000D   x000D     Will display  x000D     0 x000D     1 x000D     2 x000D     3 x000D     4 x000D     foo x000D     x000D   x000D   x000D

User · Answer

Because it will iterate over properties belonging to objects up the prototype chain if you re not careful   You can use for   in  just be sure to check each property with hasOwnProperty

User · Answer

In isolation  there is nothing wrong with using for-in on arrays  For-in iterates over the property names of an object  and in the case of an  out-of-the-box  array  the properties corresponds to the array indexes   The built-in propertes like length  toString and so on are not included in the iteration    However  if your code  or the framework you are using  add custom properties to arrays or to the array prototype  then these properties will be included in the iteration  which is probably not what you want   Some  JS frameworks  like Prototype modifies the Array prototype  Other frameworks like JQuery doesn t  so with JQuery you can safely use for-in   If you are in doubt  you probably shouldn t use for-in    An alternative way of iterating through an array is using a for-loop   for  var ix 0 ix lt arr length ix    alert ix     However  this have a different issue  The issue is that a JavaScript array can have  holes   If you define arr as   var arr     hello    arr 100     goodbye     Then the array have two items  but a length of 101  Using for-in will yield two indexes  while the for-loop will yield 101 indexes  where the 99 has a value of undefined

User · Answer

for   in is useful when working on an object in JavaScript  but not for an Array  but still we can not say it s a wrong way  but it s not recommended  look at this example below using for   in loop   let txt       const person    fname  Alireza   lname  Dezfoolian   age 35    for  const x in person        txt    person x           console log txt     Alireza Dezfoolian 35    OK  let s do it with Array now   let txt       const person     Alireza    Dezfoolian   35    for  const x in person       txt    person x           console log txt     Alireza Dezfoolian 35    As you see the result the same     But let s try something  let s prototype something to Array     Array prototype someoneelse    someoneelse     Now we create a new Array     let txt       const arr   new Array    arr 0     Alireza   arr 1     Dezfoolian   arr 2    35  for x in arr     txt    arr x           console log txt     Alireza Dezfoolian 35 someoneelse   You see the someoneelse       We actually looping through new Array object in this case   So that s one of the reasons why we need to use for  in carefully  but it s not always the case

User · Answer

The for-in statement by itself is not a  bad practice   however it can be mis-used  for example  to iterate over arrays or array-like objects   The purpose of the for-in statement is to enumerate over object properties  This statement will go up in the prototype chain  also enumerating over inherited properties  a thing that sometimes is not desired   Also  the order of iteration is not guaranteed by the spec   meaning that if you want to  iterate  an array object  with this statement you cannot be sure that the properties  array indexes  will be visited in the numeric order   For example  in JScript  IE  lt   8   the order of enumeration even on Array objects is defined as the properties were created   var array       array 2     c   array 1     b   array 0     a    for  var p in array            p will be  2    1  and  0  on IE     Also  speaking about inherited properties  if you  for example  extend the Array prototype object  like some libraries as MooTools do   that properties will be also enumerated   Array prototype last   function      return this this length-1       for  var p in          an empty array      last will be enumerated     As I said before to iterate over arrays or array-like objects  the best thing is to use a sequential loop  such as a plain-old for while loop   When you want to enumerate only the own properties of an object  the ones that aren t inherited   you can use the hasOwnProperty method   for  var prop in obj      if  obj hasOwnProperty prop            prop is not inherited         And some people even recommend calling the method directly from Object prototype to avoid having problems if somebody adds a property named hasOwnProperty to our object   for  var prop in obj      if  Object prototype hasOwnProperty call obj  prop            prop is not inherited

User · Answer

In isolation  there is nothing wrong with using for-in on arrays  For-in iterates over the property names of an object  and in the case of an  out-of-the-box  array  the properties corresponds to the array indexes   The built-in propertes like length  toString and so on are not included in the iteration    However  if your code  or the framework you are using  add custom properties to arrays or to the array prototype  then these properties will be included in the iteration  which is probably not what you want   Some  JS frameworks  like Prototype modifies the Array prototype  Other frameworks like JQuery doesn t  so with JQuery you can safely use for-in   If you are in doubt  you probably shouldn t use for-in    An alternative way of iterating through an array is using a for-loop   for  var ix 0 ix lt arr length ix    alert ix     However  this have a different issue  The issue is that a JavaScript array can have  holes   If you define arr as   var arr     hello    arr 100     goodbye     Then the array have two items  but a length of 101  Using for-in will yield two indexes  while the for-loop will yield 101 indexes  where the 99 has a value of undefined

User · Answer

It s not necessarily bad  based on what you re doing   but in the case of arrays  if something has been added to Array prototype  then you re going to get strange results   Where you d expect this loop to run three times   var arr     a   b   c    for  var key in arr            If a function called helpfulUtilityMethod has been added to Array s prototype  then your loop would end up running four times  key would be 0  1  2  and helpfulUtilityMethod   If you were only expecting integers  oops

User · Answer

I don t think I have much to add to eg  Triptych s answer or CMS s answer on why using for   in should be avoided in some cases   I do  however  would like to add that in modern browsers there is an alternative to for   in that can be used in those cases where for   in can t be used  That alternative is for   of    for  var item of items        console log item         Note    Unfortunately  no version of Internet Explorer supports for   of  Edge 12  does   so you ll have to wait a bit longer until you can use it in your client side production code  However  it should be safe to use in your server side JS code  if you use Node js

User · Answer

Since JavaScript elements are saved as standard object properties  it   is not advisable to iterate through JavaScript arrays using for   in   loops because normal elements and all enumerable properties will be   listed    From https   developer mozilla org en-US docs Web JavaScript Guide Indexed collections

User · Answer

Mainly two reasons   One  Like others have said  You might get keys which aren t in your array or that are inherited from the prototype  So if  let s say  a library adds a property to the Array or Object prototypes   Array prototype someProperty   true   You ll get it as part of every array   for var item in  1 2 3      console log item     will log 1 2 3 but also  someProperty      you could solve this with the hasOwnProperty method   var ary    1 2 3   for var item in ary      if ary hasOwnProperty item          console log item     will log only 1 2 3          but this is true for iterating over any object with a for-in loop   Two  Usually the order of the items in an array is important  but the for-in loop won t necessarily iterate in the right order  that s because it treats the array as an object  which is the way it is implemented in JS  and not as an array  This seems like a small thing  but it can really screw up applications and is hard to debug

User · Answer

although not specifically addressed by this question  I would add that there s a very good reason not to ever use for   in with a NodeList  as one would obtain from a querySelectorAll call  as it doesn t see the returned elements at all  instead iterating only over the NodeList properties   in the case of a single result  I got   var nodes   document querySelectorAll selector   nodes   NodeList   a  19eb  for  node in nodes   console log node    VM505 1 0 VM505 1 length VM505 1 item VM505 1 entries VM505 1 forEach VM505 1 keys VM505 1 values   which explained why my for  node in nodes  node href   newLink  was failing

User · Answer

In isolation  there is nothing wrong with using for-in on arrays  For-in iterates over the property names of an object  and in the case of an  out-of-the-box  array  the properties corresponds to the array indexes   The built-in propertes like length  toString and so on are not included in the iteration    However  if your code  or the framework you are using  add custom properties to arrays or to the array prototype  then these properties will be included in the iteration  which is probably not what you want   Some  JS frameworks  like Prototype modifies the Array prototype  Other frameworks like JQuery doesn t  so with JQuery you can safely use for-in   If you are in doubt  you probably shouldn t use for-in    An alternative way of iterating through an array is using a for-loop   for  var ix 0 ix lt arr length ix    alert ix     However  this have a different issue  The issue is that a JavaScript array can have  holes   If you define arr as   var arr     hello    arr 100     goodbye     Then the array have two items  but a length of 101  Using for-in will yield two indexes  while the for-loop will yield 101 indexes  where the 99 has a value of undefined

User · Answer

Since JavaScript elements are saved as standard object properties  it   is not advisable to iterate through JavaScript arrays using for   in   loops because normal elements and all enumerable properties will be   listed    From https   developer mozilla org en-US docs Web JavaScript Guide Indexed collections

User · Answer

Aside from the fact that for   in loops over all enumerable properties  which is not the same as  all array elements     see http   www ecma-international org publications files ECMA-ST Ecma-262 pdf  section 12 6 4  5th edition  or 13 7 5 15  7th edition       The mechanics and order of enumerating the properties     is not specified       Emphasis mine    That means if a browser wanted to  it could go through the properties in the order in which they were inserted   Or in numerical order   Or in lexical order  where  30  comes before  4    Keep in mind all object keys -- and thus  all array indexes -- are actually strings  so that makes total sense    It could go through them by bucket  if it implemented objects as hash tables   Or take any of that and add  backwards    A browser could even iterate randomly and be ECMA-262 compliant  as long as it visited each property exactly once   In practice  most browsers currently like to iterate in roughly the same order   But there s nothing saying they have to   That s implementation specific  and could change at any time if another way was found to be far more efficient   Either way  for   in carries with it no connotation of order   If you care about order  be explicit about it and use a regular for loop with an index

User · Answer

Also  due to semantics  the way for  in treats arrays  i e  the same as any other JavaScript object  is not aligned with other popular languages      C  char   a   new char     A    B    C    foreach  char x in a  System Console Write x     Output   ABC      Java char   a     A    B    C    for  char x   a  System out print x              Output   ABC      PHP  a   array  A    B    C    foreach   a as  x  echo  x                       Output   ABC      JavaScript var a     A    B    C    for  var x in a  document write x                Output   012

User · Answer

TL amp DR  Using the for in loop in arrays is not evil  in fact quite the opposite   I think the for in loop is a gem of JS if used correctly in arrays  You are expected to have full control over your software and know what you are doing  Let s see the mentioned drawbacks and disprove them one by one    It loops through inherited properties as well  First of all any extensions to the Array prototype should have been done by using Object defineProperty   and their enumerable descriptor should be set to false  Any library not doing so should not be used at all  Properties those you add to the inheritance chain later get counted  When doing array sub-classing by Object setPrototypeOf or by Class extend  You should again use Object defineProperty   which by default sets the writable  enumerable and configurable property descriptors to false  Lets see an array sub-classing example here       x000D   x000D  function Stack    a   x000D    var stack   new Array    a   x000D    Object setPrototypeOf stack  Stack prototype   x000D    return stack  x000D    x000D  Stack prototype   Object create Array prototype                                      now stack has full access to array methods  x000D  Object defineProperty Stack prototype  constructor   value Stack                     now Stack is a proper constructor x000D  Object defineProperty Stack prototype  peak   value  function                        add Stack  only  methods to the Stack prototype  x000D                                                         return this this length-1   x000D                                                         x000D                                                   x000D  var s   new Stack 1 2 3 4 1   x000D  console log s peak     x000D  s s length    7  x000D  console log  length   s length   x000D  s push 42   x000D  console log JSON stringify s    x000D  console log  length   s length   x000D   x000D  for var i in s  console log s i    x000D   x000D   x000D    So you see   for in loop is now safe since you cared about your code    The for in loop is slow  Hell no  It s by far the fastest method of iteration if you are looping over sparse arrays which are needed time to time  This is one of the most important performance tricks that one should know  Let s see an example  We will loop over a sparse array     x000D   x000D  var a       x000D  a 0     zero   x000D  a 10000000     ten million   x000D  console time  for loop on array a     x000D  for var i 0  i  lt  a length  i    a i   amp  amp  console log a i    x000D  console timeEnd  for loop on array a     x000D  console time  for in loop on array a     x000D  for var i in a  a i   amp  amp  console log a i    x000D  console timeEnd  for in loop on array a     x000D   x000D   x000D

User · Answer

TL amp DR  Using the for in loop in arrays is not evil  in fact quite the opposite   I think the for in loop is a gem of JS if used correctly in arrays  You are expected to have full control over your software and know what you are doing  Let s see the mentioned drawbacks and disprove them one by one    It loops through inherited properties as well  First of all any extensions to the Array prototype should have been done by using Object defineProperty   and their enumerable descriptor should be set to false  Any library not doing so should not be used at all  Properties those you add to the inheritance chain later get counted  When doing array sub-classing by Object setPrototypeOf or by Class extend  You should again use Object defineProperty   which by default sets the writable  enumerable and configurable property descriptors to false  Lets see an array sub-classing example here       x000D   x000D  function Stack    a   x000D    var stack   new Array    a   x000D    Object setPrototypeOf stack  Stack prototype   x000D    return stack  x000D    x000D  Stack prototype   Object create Array prototype                                      now stack has full access to array methods  x000D  Object defineProperty Stack prototype  constructor   value Stack                     now Stack is a proper constructor x000D  Object defineProperty Stack prototype  peak   value  function                        add Stack  only  methods to the Stack prototype  x000D                                                         return this this length-1   x000D                                                         x000D                                                   x000D  var s   new Stack 1 2 3 4 1   x000D  console log s peak     x000D  s s length    7  x000D  console log  length   s length   x000D  s push 42   x000D  console log JSON stringify s    x000D  console log  length   s length   x000D   x000D  for var i in s  console log s i    x000D   x000D   x000D    So you see   for in loop is now safe since you cared about your code    The for in loop is slow  Hell no  It s by far the fastest method of iteration if you are looping over sparse arrays which are needed time to time  This is one of the most important performance tricks that one should know  Let s see an example  We will loop over a sparse array     x000D   x000D  var a       x000D  a 0     zero   x000D  a 10000000     ten million   x000D  console time  for loop on array a     x000D  for var i 0  i  lt  a length  i    a i   amp  amp  console log a i    x000D  console timeEnd  for loop on array a     x000D  console time  for in loop on array a     x000D  for var i in a  a i   amp  amp  console log a i    x000D  console timeEnd  for in loop on array a     x000D   x000D   x000D

User · Answer

The for-in statement by itself is not a  bad practice   however it can be mis-used  for example  to iterate over arrays or array-like objects   The purpose of the for-in statement is to enumerate over object properties  This statement will go up in the prototype chain  also enumerating over inherited properties  a thing that sometimes is not desired   Also  the order of iteration is not guaranteed by the spec   meaning that if you want to  iterate  an array object  with this statement you cannot be sure that the properties  array indexes  will be visited in the numeric order   For example  in JScript  IE  lt   8   the order of enumeration even on Array objects is defined as the properties were created   var array       array 2     c   array 1     b   array 0     a    for  var p in array            p will be  2    1  and  0  on IE     Also  speaking about inherited properties  if you  for example  extend the Array prototype object  like some libraries as MooTools do   that properties will be also enumerated   Array prototype last   function      return this this length-1       for  var p in          an empty array      last will be enumerated     As I said before to iterate over arrays or array-like objects  the best thing is to use a sequential loop  such as a plain-old for while loop   When you want to enumerate only the own properties of an object  the ones that aren t inherited   you can use the hasOwnProperty method   for  var prop in obj      if  obj hasOwnProperty prop            prop is not inherited         And some people even recommend calling the method directly from Object prototype to avoid having problems if somebody adds a property named hasOwnProperty to our object   for  var prop in obj      if  Object prototype hasOwnProperty call obj  prop            prop is not inherited

User · Answer

A for   in loop always enumerates the keys  Objects properties keys are always String  even the indexed properties of an array    var myArray     a    b    c    d    var total   0 for  elem in myArray      total    elem   console log total      00123

User · Answer

Also  due to semantics  the way for  in treats arrays  i e  the same as any other JavaScript object  is not aligned with other popular languages      C  char   a   new char     A    B    C    foreach  char x in a  System Console Write x     Output   ABC      Java char   a     A    B    C    for  char x   a  System out print x              Output   ABC      PHP  a   array  A    B    C    foreach   a as  x  echo  x                       Output   ABC      JavaScript var a     A    B    C    for  var x in a  document write x                Output   012

User · Answer

The reason is that one construct    x000D   x000D  var a          Create a new empty array  x000D  a 5    5       Perfectly legal JavaScript that resizes the array  x000D   x000D  for  var i   0  i  lt  a length  i      x000D         Iterate over numeric indexes from 0 to 5  as everyone expects  x000D      console log a i    x000D    x000D   x000D     Will display  x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     5 x000D     x000D   x000D   x000D    can sometimes be totally different from the other    x000D   x000D  var a       x000D  a 5    5  x000D  for  var x in a    x000D         Shows only the explicitly set index of  5   and ignores 0-4 x000D      console log x   x000D    x000D   x000D     Will display  x000D     5 x000D     x000D   x000D   x000D    Also consider that JavaScript libraries might do things like this  which will affect any array you create    x000D   x000D     Somewhere deep in your JavaScript library    x000D  Array prototype foo   1  x000D   x000D     Now you have no idea what the below code will do  x000D  var a    1  2  3  4  5   x000D  for  var x in a   x000D         Now foo is a part of EVERY array and  x000D         will show up here as a value of  x   x000D      console log x   x000D    x000D   x000D     Will display  x000D     0 x000D     1 x000D     2 x000D     3 x000D     4 x000D     foo x000D     x000D   x000D   x000D

User · Answer

The reason is that one construct    x000D   x000D  var a          Create a new empty array  x000D  a 5    5       Perfectly legal JavaScript that resizes the array  x000D   x000D  for  var i   0  i  lt  a length  i      x000D         Iterate over numeric indexes from 0 to 5  as everyone expects  x000D      console log a i    x000D    x000D   x000D     Will display  x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     5 x000D     x000D   x000D   x000D    can sometimes be totally different from the other    x000D   x000D  var a       x000D  a 5    5  x000D  for  var x in a    x000D         Shows only the explicitly set index of  5   and ignores 0-4 x000D      console log x   x000D    x000D   x000D     Will display  x000D     5 x000D     x000D   x000D   x000D    Also consider that JavaScript libraries might do things like this  which will affect any array you create    x000D   x000D     Somewhere deep in your JavaScript library    x000D  Array prototype foo   1  x000D   x000D     Now you have no idea what the below code will do  x000D  var a    1  2  3  4  5   x000D  for  var x in a   x000D         Now foo is a part of EVERY array and  x000D         will show up here as a value of  x   x000D      console log x   x000D    x000D   x000D     Will display  x000D     0 x000D     1 x000D     2 x000D     3 x000D     4 x000D     foo x000D     x000D   x000D   x000D

User · Answer

There are three reasons why you shouldn t use for  in to iterate over array elements    for  in will loop over all own and inherited properties of the array object which aren t DontEnum  that means if someone adds properties to the specific array object  there are valid reasons for this - I ve done so myself  or changed Array prototype  which is considered bad practice in code which is supposed to work well with other scripts   these properties will be iterated over as well  inherited properties can be excluded by checking hasOwnProperty    but that won t help you with properties set in the array object itself for  in isn t guaranteed to preserve element ordering it s slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property s name  ie to get the value  an additional lookup will be required

User · Answer

In addition to the other problems  the  for  in  syntax is probably slower  because the index is a string  not an integer   var a     a   for  var i in a      alert typeof i       string  for  var i   0  i  lt  a length  i        alert typeof i       number

User · Answer

As of 2016  ES6  we may use for   of for array iteration  as John Slegers already noticed    I would just like to add this simple demonstration code  to make things clearer   Array prototype foo   1  var arr       arr 5     xyz    console log  for   of     var count   0  for  var item of arr        console log count        item       count           console log  for   in     count   0  for  var item in arr        console log count        item       count            The console shows   for   of   0  undefined 1  undefined 2  undefined 3  undefined 4  undefined 5  xyz  for   in   0  5 1  foo   In other words    for   of counts from 0 to 5  and also ignores Array prototype foo  It shows array values  for   in lists only the 5  ignoring undefined array indexes  but adding foo  It shows array property names

User · Answer

Short answer  It s just not worth it     Longer answer  It s just not worth it  even if sequential element order and optimal performance aren t required     Long answer  It s just not worth it      Using for  var property in array  will cause array to be iterated over as an object  traversing the object prototype chain and ultimately performing slower than an index-based for loop  for      in      is not guaranteed to return the object properties in sequential order  as one might expect  Using hasOwnProperty   and  isNaN   checks to filter the object properties is an additional overhead causing it to perform even slower and negates the key reason for using it in the first place  i e  because of the more concise format    For these reasons an acceptable trade-off between performance and convenience doesn t even exist   There s really no benefit unless the intent is to handle the array as an object and perform operations on the object properties of the array

User · Answer

Here are the reasons why this is  usually  a bad practice    for   in loops iterate over all their own enumerable properties and the enumerable properties of their prototype s   Usually in an array iteration we only want to iterate over the array itself  And even though you yourself may not add anything to the array  your libraries or framework might add something    Example    x000D   x000D  Array prototype hithere    hithere   x000D   x000D  var array    1  2  3   x000D  for  let el in array   x000D         the hithere property will also be iterated over x000D      console log el   x000D    x000D   x000D   x000D     for   in loops do not guarantee a specific iteration order  Although is order is usually seen in most modern browsers these days  there is still no 100  guarantee   for   in loops ignore undefined array elements  i e  array elements which not have been assigned yet    Example     x000D   x000D  const arr        x000D  arr 3     foo        resize the array to 4 x000D  arr 4    undefined     add another element with value undefined to it x000D   x000D     iterate over the array  a for loop does show the undefined elements x000D  for  let i   0  i  lt  arr length  i      x000D      console log arr i    x000D    x000D   x000D  console log   n    x000D   x000D     for in does ignore the undefined elements x000D  for  let el in arr    x000D      console log arr el    x000D    x000D   x000D   x000D

User · Answer

Because for   in enumerates through the object that holds the array  not the array itself  If I add a function to the arrays prototype chain  that will also be included  I e   Array prototype myOwnFunction   function     alert this     a   new Array    a 0     foo   a 1     bar   for x in a    document write x           a x        This will write    0   foo 1   bar myOwnFunction   function     alert this       And since you can never be sure that nothing will be added to the prototype chain just use a for loop to enumerate the array   for i 0 x a length i lt x i      document write i           a i        This will write    0   foo 1   bar

User · Answer

although not specifically addressed by this question  I would add that there s a very good reason not to ever use for   in with a NodeList  as one would obtain from a querySelectorAll call  as it doesn t see the returned elements at all  instead iterating only over the NodeList properties   in the case of a single result  I got   var nodes   document querySelectorAll selector   nodes   NodeList   a  19eb  for  node in nodes   console log node    VM505 1 0 VM505 1 length VM505 1 item VM505 1 entries VM505 1 forEach VM505 1 keys VM505 1 values   which explained why my for  node in nodes  node href   newLink  was failing

User · Answer

In isolation  there is nothing wrong with using for-in on arrays  For-in iterates over the property names of an object  and in the case of an  out-of-the-box  array  the properties corresponds to the array indexes   The built-in propertes like length  toString and so on are not included in the iteration    However  if your code  or the framework you are using  add custom properties to arrays or to the array prototype  then these properties will be included in the iteration  which is probably not what you want   Some  JS frameworks  like Prototype modifies the Array prototype  Other frameworks like JQuery doesn t  so with JQuery you can safely use for-in   If you are in doubt  you probably shouldn t use for-in    An alternative way of iterating through an array is using a for-loop   for  var ix 0 ix lt arr length ix    alert ix     However  this have a different issue  The issue is that a JavaScript array can have  holes   If you define arr as   var arr     hello    arr 100     goodbye     Then the array have two items  but a length of 101  Using for-in will yield two indexes  while the for-loop will yield 101 indexes  where the 99 has a value of undefined

User · Answer

Because it enumerates through object fields  not indexes  You can get value with index  length  and I doubt you want this

User · Answer

Because it enumerates through object fields  not indexes  You can get value with index  length  and I doubt you want this

User · Answer

An important aspect is that for   in only iterates over properties contained in an object which have their enumerable property attribute set to true  So if one attempts to iterate over an object using for   in then arbitrary properties may be missed if their enumerable property attribute is false  It is quite possible to alter the enumerable property attribute for normal Array objects so that certain elements are not enumerated  Though in general the property attributes tend to apply to function properties within an object   One can check the value of a properties  enumerable property attribute by   myobject propertyIsEnumerable  myproperty     Or to obtain all four property attributes   Object getOwnPropertyDescriptor myobject  myproperty     This is a feature available in ECMAScript 5 - in earlier versions it was not possible to alter the value of the enumerable property attribute  it was always set to true

User · Answer

Here are the reasons why this is  usually  a bad practice    for   in loops iterate over all their own enumerable properties and the enumerable properties of their prototype s   Usually in an array iteration we only want to iterate over the array itself  And even though you yourself may not add anything to the array  your libraries or framework might add something    Example    x000D   x000D  Array prototype hithere    hithere   x000D   x000D  var array    1  2  3   x000D  for  let el in array   x000D         the hithere property will also be iterated over x000D      console log el   x000D    x000D   x000D   x000D     for   in loops do not guarantee a specific iteration order  Although is order is usually seen in most modern browsers these days  there is still no 100  guarantee   for   in loops ignore undefined array elements  i e  array elements which not have been assigned yet    Example     x000D   x000D  const arr        x000D  arr 3     foo        resize the array to 4 x000D  arr 4    undefined     add another element with value undefined to it x000D   x000D     iterate over the array  a for loop does show the undefined elements x000D  for  let i   0  i  lt  arr length  i      x000D      console log arr i    x000D    x000D   x000D  console log   n    x000D   x000D     for in does ignore the undefined elements x000D  for  let el in arr    x000D      console log arr el    x000D    x000D   x000D   x000D

User · Answer

You should use the for var x in y  only on property lists  not on objects  as explained above

User · Answer

It s not necessarily bad  based on what you re doing   but in the case of arrays  if something has been added to Array prototype  then you re going to get strange results   Where you d expect this loop to run three times   var arr     a   b   c    for  var key in arr            If a function called helpfulUtilityMethod has been added to Array s prototype  then your loop would end up running four times  key would be 0  1  2  and helpfulUtilityMethod   If you were only expecting integers  oops

User · Answer

The problem with for     in      mdash  and this only becomes a problem when a programmer doesn t really understand the language  it s not really a bug or anything  mdash  is that it iterates over all members of an object  well  all enumerable members  but that s a detail for now    When you want to iterate over just the indexed properties of an array  the only guaranteed way to keep things semantically consistent is to use an integer index  that is  a for  var i   0  i  lt  array length    i  style loop    Any object can have arbitrary properties associated with it  There would be nothing terrible about loading additional properties onto an array instance  in particular  Code that wants to see only indexed array-like properties therefore must stick to an integer index  Code that is fully aware of what for     in does and really need to see all properties  well then that s ok too

User · Answer

Because it enumerates through object fields  not indexes  You can get value with index  length  and I doubt you want this

User · Answer

Because for   in enumerates through the object that holds the array  not the array itself  If I add a function to the arrays prototype chain  that will also be included  I e   Array prototype myOwnFunction   function     alert this     a   new Array    a 0     foo   a 1     bar   for x in a    document write x           a x        This will write    0   foo 1   bar myOwnFunction   function     alert this       And since you can never be sure that nothing will be added to the prototype chain just use a for loop to enumerate the array   for i 0 x a length i lt x i      document write i           a i        This will write    0   foo 1   bar

User · Answer

I don t think I have much to add to eg  Triptych s answer or CMS s answer on why using for   in should be avoided in some cases   I do  however  would like to add that in modern browsers there is an alternative to for   in that can be used in those cases where for   in can t be used  That alternative is for   of    for  var item of items        console log item         Note    Unfortunately  no version of Internet Explorer supports for   of  Edge 12  does   so you ll have to wait a bit longer until you can use it in your client side production code  However  it should be safe to use in your server side JS code  if you use Node js

User · Answer

There are three reasons why you shouldn t use for  in to iterate over array elements    for  in will loop over all own and inherited properties of the array object which aren t DontEnum  that means if someone adds properties to the specific array object  there are valid reasons for this - I ve done so myself  or changed Array prototype  which is considered bad practice in code which is supposed to work well with other scripts   these properties will be iterated over as well  inherited properties can be excluded by checking hasOwnProperty    but that won t help you with properties set in the array object itself for  in isn t guaranteed to preserve element ordering it s slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property s name  ie to get the value  an additional lookup will be required

User · Answer

The for in works with two types of variables  hashtables  associative arrays  and array  non-associative    JavaScript will automatically determine the way its passes through the items  So if you know that your array is really non-associative you can use for  var i 0  i lt  arrayLen  i     and skip the auto-detection iteration   But in my opinion  it s better to use for in  the process required for that auto-detection is very small    A real answer for this will depend on how the browser parsers interpret the JavaScript code  It can change between browsers   I can t think of other purposes to not using for in     Non-associative var arr     a    b    c    for  var i in arr     alert arr i       Associative var arr        item1    a      item2    b      item3    c      for  var i in arr     alert arr i

User · Answer

The reason is that one construct    x000D   x000D  var a          Create a new empty array  x000D  a 5    5       Perfectly legal JavaScript that resizes the array  x000D   x000D  for  var i   0  i  lt  a length  i      x000D         Iterate over numeric indexes from 0 to 5  as everyone expects  x000D      console log a i    x000D    x000D   x000D     Will display  x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     undefined x000D     5 x000D     x000D   x000D   x000D    can sometimes be totally different from the other    x000D   x000D  var a       x000D  a 5    5  x000D  for  var x in a    x000D         Shows only the explicitly set index of  5   and ignores 0-4 x000D      console log x   x000D    x000D   x000D     Will display  x000D     5 x000D     x000D   x000D   x000D    Also consider that JavaScript libraries might do things like this  which will affect any array you create    x000D   x000D     Somewhere deep in your JavaScript library    x000D  Array prototype foo   1  x000D   x000D     Now you have no idea what the below code will do  x000D  var a    1  2  3  4  5   x000D  for  var x in a   x000D         Now foo is a part of EVERY array and  x000D         will show up here as a value of  x   x000D      console log x   x000D    x000D   x000D     Will display  x000D     0 x000D     1 x000D     2 x000D     3 x000D     4 x000D     foo x000D     x000D   x000D   x000D

User · Answer

Using the for   in loop for an array is not wrong  although I can guess why someone told you that   1   There is already a higher order function  or method  that has that purpose for an array  but has more functionality and leaner syntax  called  forEach   Array prototype forEach function element  index  array         2   Arrays always have a length  but for   in and forEach do not execute a function for any value that is  undefined   only for the indexes that have a value defined  So if you only assign one value  these loops will only execute a function once  but since an array is enumerated  it will always have a length up to the highest index that has a defined value  but that length could go unnoticed when using these loops   3   The standard for loop will execute a function as many times as you define in the parameters  and since an array is numbered  it makes more sense to define how many times you want to execute a function  Unlike the other loops  the for loop can then execute a function for every index in the array  whether the value is defined or not   In essence  you can use any loop  but you should remember exactly how they work  Understand the conditions upon which the different loops reiterate  their separate functionalities  and realize they will be more or less appropriate for differing scenarios    Also  it may be considered a better practice to use the forEach method than the for   in loop in general  because it is easier to write and has more functionality  so you may want to get in the habit of only using this method and standard for  but your call   See below that the first two loops only execute the console log statements once  while the standard for loop executes the function as many times as specified  in this case  array length   6   var arr       arr 5     F    for  var index in arr    console log index   console log arr index    console log arr       5     F       gt   6   undefined x 5  6   arr forEach function element  index  arr    console log index   console log element   console log arr          5     F       gt  Array  6   undefined x 5  6   for  var index   0  index  lt  arr length  index      console log index   console log arr index    console log arr         0    undefined      gt  Array  6   undefined x 5  6      1    undefined      gt  Array  6   undefined x 5  6      2    undefined      gt  Array  6   undefined x 5  6      3    undefined      gt  Array  6   undefined x 5  6      4    undefined      gt  Array  6   undefined x 5  6      5     F       gt  Array  6   undefined x 5  6

User · Answer

Using the for   in loop for an array is not wrong  although I can guess why someone told you that   1   There is already a higher order function  or method  that has that purpose for an array  but has more functionality and leaner syntax  called  forEach   Array prototype forEach function element  index  array         2   Arrays always have a length  but for   in and forEach do not execute a function for any value that is  undefined   only for the indexes that have a value defined  So if you only assign one value  these loops will only execute a function once  but since an array is enumerated  it will always have a length up to the highest index that has a defined value  but that length could go unnoticed when using these loops   3   The standard for loop will execute a function as many times as you define in the parameters  and since an array is numbered  it makes more sense to define how many times you want to execute a function  Unlike the other loops  the for loop can then execute a function for every index in the array  whether the value is defined or not   In essence  you can use any loop  but you should remember exactly how they work  Understand the conditions upon which the different loops reiterate  their separate functionalities  and realize they will be more or less appropriate for differing scenarios    Also  it may be considered a better practice to use the forEach method than the for   in loop in general  because it is easier to write and has more functionality  so you may want to get in the habit of only using this method and standard for  but your call   See below that the first two loops only execute the console log statements once  while the standard for loop executes the function as many times as specified  in this case  array length   6   var arr       arr 5     F    for  var index in arr    console log index   console log arr index    console log arr       5     F       gt   6   undefined x 5  6   arr forEach function element  index  arr    console log index   console log element   console log arr          5     F       gt  Array  6   undefined x 5  6   for  var index   0  index  lt  arr length  index      console log index   console log arr index    console log arr         0    undefined      gt  Array  6   undefined x 5  6      1    undefined      gt  Array  6   undefined x 5  6      2    undefined      gt  Array  6   undefined x 5  6      3    undefined      gt  Array  6   undefined x 5  6      4    undefined      gt  Array  6   undefined x 5  6      5     F       gt  Array  6   undefined x 5  6

User · Answer

You should use the for var x in y  only on property lists  not on objects  as explained above

User · Answer

In addition to the reasons given in other answers  you may not want to use the  for   in  structure if you need to do math with the counter variable because the loop iterates through the names of the object s properties and so the variable is a string   For example   for  var i 0  i lt a length  i          document write i          typeof i          i 1       will write   0  number  1 1  number  2       whereas   for  var ii in a        document write i          typeof i          i 1       will write  0  string  01 1  string  11       Of course  this can easily be overcome by including  ii   parseInt ii     in the loop  but the first structure is more direct

User · Answer

In addition to the reasons given in other answers  you may not want to use the  for   in  structure if you need to do math with the counter variable because the loop iterates through the names of the object s properties and so the variable is a string   For example   for  var i 0  i lt a length  i          document write i          typeof i          i 1       will write   0  number  1 1  number  2       whereas   for  var ii in a        document write i          typeof i          i 1       will write  0  string  01 1  string  11       Of course  this can easily be overcome by including  ii   parseInt ii     in the loop  but the first structure is more direct

User · Answer

Short answer  It s just not worth it     Longer answer  It s just not worth it  even if sequential element order and optimal performance aren t required     Long answer  It s just not worth it      Using for  var property in array  will cause array to be iterated over as an object  traversing the object prototype chain and ultimately performing slower than an index-based for loop  for      in      is not guaranteed to return the object properties in sequential order  as one might expect  Using hasOwnProperty   and  isNaN   checks to filter the object properties is an additional overhead causing it to perform even slower and negates the key reason for using it in the first place  i e  because of the more concise format    For these reasons an acceptable trade-off between performance and convenience doesn t even exist   There s really no benefit unless the intent is to handle the array as an object and perform operations on the object properties of the array

User · Answer

The for in works with two types of variables  hashtables  associative arrays  and array  non-associative    JavaScript will automatically determine the way its passes through the items  So if you know that your array is really non-associative you can use for  var i 0  i lt  arrayLen  i     and skip the auto-detection iteration   But in my opinion  it s better to use for in  the process required for that auto-detection is very small    A real answer for this will depend on how the browser parsers interpret the JavaScript code  It can change between browsers   I can t think of other purposes to not using for in     Non-associative var arr     a    b    c    for  var i in arr     alert arr i       Associative var arr        item1    a      item2    b      item3    c      for  var i in arr     alert arr i

User · Answer

Because for   in enumerates through the object that holds the array  not the array itself  If I add a function to the arrays prototype chain  that will also be included  I e   Array prototype myOwnFunction   function     alert this     a   new Array    a 0     foo   a 1     bar   for x in a    document write x           a x        This will write    0   foo 1   bar myOwnFunction   function     alert this       And since you can never be sure that nothing will be added to the prototype chain just use a for loop to enumerate the array   for i 0 x a length i lt x i      document write i           a i        This will write    0   foo 1   bar

User · Answer

In addition to the other problems  the  for  in  syntax is probably slower  because the index is a string  not an integer   var a     a   for  var i in a      alert typeof i       string  for  var i   0  i  lt  a length  i        alert typeof i       number

User · Answer

As of 2016  ES6  we may use for   of for array iteration  as John Slegers already noticed    I would just like to add this simple demonstration code  to make things clearer   Array prototype foo   1  var arr       arr 5     xyz    console log  for   of     var count   0  for  var item of arr        console log count        item       count           console log  for   in     count   0  for  var item in arr        console log count        item       count            The console shows   for   of   0  undefined 1  undefined 2  undefined 3  undefined 4  undefined 5  xyz  for   in   0  5 1  foo   In other words    for   of counts from 0 to 5  and also ignores Array prototype foo  It shows array values  for   in lists only the 5  ignoring undefined array indexes  but adding foo  It shows array property names

User · Answer

Mainly two reasons   One  Like others have said  You might get keys which aren t in your array or that are inherited from the prototype  So if  let s say  a library adds a property to the Array or Object prototypes   Array prototype someProperty   true   You ll get it as part of every array   for var item in  1 2 3      console log item     will log 1 2 3 but also  someProperty      you could solve this with the hasOwnProperty method   var ary    1 2 3   for var item in ary      if ary hasOwnProperty item          console log item     will log only 1 2 3          but this is true for iterating over any object with a for-in loop   Two  Usually the order of the items in an array is important  but the for-in loop won t necessarily iterate in the right order  that s because it treats the array as an object  which is the way it is implemented in JS  and not as an array  This seems like a small thing  but it can really screw up applications and is hard to debug

User · Answer

A for   in loop always enumerates the keys  Objects properties keys are always String  even the indexed properties of an array    var myArray     a    b    c    d    var total   0 for  elem in myArray      total    elem   console log total      00123

User · Answer

There are three reasons why you shouldn t use for  in to iterate over array elements    for  in will loop over all own and inherited properties of the array object which aren t DontEnum  that means if someone adds properties to the specific array object  there are valid reasons for this - I ve done so myself  or changed Array prototype  which is considered bad practice in code which is supposed to work well with other scripts   these properties will be iterated over as well  inherited properties can be excluded by checking hasOwnProperty    but that won t help you with properties set in the array object itself for  in isn t guaranteed to preserve element ordering it s slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property s name  ie to get the value  an additional lookup will be required

User · Answer

Because for   in enumerates through the object that holds the array  not the array itself  If I add a function to the arrays prototype chain  that will also be included  I e   Array prototype myOwnFunction   function     alert this     a   new Array    a 0     foo   a 1     bar   for x in a    document write x           a x        This will write    0   foo 1   bar myOwnFunction   function     alert this       And since you can never be sure that nothing will be added to the prototype chain just use a for loop to enumerate the array   for i 0 x a length i lt x i      document write i           a i        This will write    0   foo 1   bar

User · Answer

Aside from the fact that for   in loops over all enumerable properties  which is not the same as  all array elements     see http   www ecma-international org publications files ECMA-ST Ecma-262 pdf  section 12 6 4  5th edition  or 13 7 5 15  7th edition       The mechanics and order of enumerating the properties     is not specified       Emphasis mine    That means if a browser wanted to  it could go through the properties in the order in which they were inserted   Or in numerical order   Or in lexical order  where  30  comes before  4    Keep in mind all object keys -- and thus  all array indexes -- are actually strings  so that makes total sense    It could go through them by bucket  if it implemented objects as hash tables   Or take any of that and add  backwards    A browser could even iterate randomly and be ECMA-262 compliant  as long as it visited each property exactly once   In practice  most browsers currently like to iterate in roughly the same order   But there s nothing saying they have to   That s implementation specific  and could change at any time if another way was found to be far more efficient   Either way  for   in carries with it no connotation of order   If you care about order  be explicit about it and use a regular for loop with an index

User · Answer

The problem with for     in      mdash  and this only becomes a problem when a programmer doesn t really understand the language  it s not really a bug or anything  mdash  is that it iterates over all members of an object  well  all enumerable members  but that s a detail for now    When you want to iterate over just the indexed properties of an array  the only guaranteed way to keep things semantically consistent is to use an integer index  that is  a for  var i   0  i  lt  array length    i  style loop    Any object can have arbitrary properties associated with it  There would be nothing terrible about loading additional properties onto an array instance  in particular  Code that wants to see only indexed array-like properties therefore must stick to an integer index  Code that is fully aware of what for     in does and really need to see all properties  well then that s ok too

User · Answer

for   in is useful when working on an object in JavaScript  but not for an Array  but still we can not say it s a wrong way  but it s not recommended  look at this example below using for   in loop   let txt       const person    fname  Alireza   lname  Dezfoolian   age 35    for  const x in person        txt    person x           console log txt     Alireza Dezfoolian 35    OK  let s do it with Array now   let txt       const person     Alireza    Dezfoolian   35    for  const x in person       txt    person x           console log txt     Alireza Dezfoolian 35    As you see the result the same     But let s try something  let s prototype something to Array     Array prototype someoneelse    someoneelse     Now we create a new Array     let txt       const arr   new Array    arr 0     Alireza   arr 1     Dezfoolian   arr 2    35  for x in arr     txt    arr x           console log txt     Alireza Dezfoolian 35 someoneelse   You see the someoneelse       We actually looping through new Array object in this case   So that s one of the reasons why we need to use for  in carefully  but it s not always the case

User · Answer

There are three reasons why you shouldn t use for  in to iterate over array elements    for  in will loop over all own and inherited properties of the array object which aren t DontEnum  that means if someone adds properties to the specific array object  there are valid reasons for this - I ve done so myself  or changed Array prototype  which is considered bad practice in code which is supposed to work well with other scripts   these properties will be iterated over as well  inherited properties can be excluded by checking hasOwnProperty    but that won t help you with properties set in the array object itself for  in isn t guaranteed to preserve element ordering it s slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property s name  ie to get the value  an additional lookup will be required

User · Answer

Because it enumerates through object fields  not indexes  You can get value with index  length  and I doubt you want this

[javascript] Why is using "for...in" for array iteration a bad idea?

Examples related to javascript

Examples related to arrays

Examples related to loops

Examples related to for-loop

Examples related to iteration