What is the difference between for in and for of statements

Question

I know what is a for    in loop  it iterates over the keys   but I have heard about for    of for the first time  it iterates over values   I am confused about for    of loop  var arr    3  5  7   arr foo    quot hello quot        for  var i in arr      console log i      logs  quot 0 quot    quot 1 quot    quot 2 quot    quot foo quot         for  var i of arr      console log i      logs  quot 3 quot    quot 5 quot    quot 7 quot       it doesn t log  quot 3 quot    quot 5 quot    quot 7 quot    quot hello quot     I understand that for    of iterates over property values  Then why doesn t it log  quot 3 quot    quot 5 quot    quot 7 quot    quot hello quot  instead of  quot 3 quot    quot 5 quot    quot 7 quot   Unlike for    in loop  which iterates over each key   quot 0 quot    quot 1 quot    quot 2 quot    quot foo quot   and also iterates over the foo key  the for    of does not iterate over the value of foo property  i e    quot hello quot   Why it is like that  Here I console for    of loop  It should log  quot 3 quot    quot 5 quot    quot 7 quot   quot hello quot  but it logs  quot 3 quot    quot 5 quot    quot 7 quot   Why  Example Link

User · Answer

Everybody did explain why this problem occurs, but it's still very easy to forget about it and then scratching your head why you got wrong results. Especially when you're working on big sets of data when the results seem to be fine at first glance.

Using Object.entries you ensure to go trough all properties:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

User · Answer

A see a lot of good answers  but I decide to put my 5 cents just to have good example   For in loop  iterates over all enumerable props   x000D   x000D  let nodes   document documentElement childNodes  x000D   x000D  for  var key in nodes    x000D    console log  key    x000D    x000D   x000D   x000D    For of loop  iterates over all iterable values   x000D   x000D  let nodes   document documentElement childNodes  x000D   x000D  for  var node of nodes    x000D    console log  node toString      x000D    x000D   x000D   x000D

User · Answer

For   in loop  The for   in loop improves upon the weaknesses of the for loop by eliminating the counting logic and exit condition   Example   const digits    0  1  2  3  4  5  6  7  8  9    for  const index in digits      console log digits index        But  you still have to deal with the issue of using an index to access the values of the array  and that stinks  it almost makes it more confusing than before   Also  the for   in loop can get you into big trouble when you need to add an extra method to an array  or another object   Because for   in loops loop over all enumerable properties  this means if you add any additional properties to the array s prototype  then those properties will also appear in the loop   Array prototype decimalfy   function       for  let i   0  i  lt  this length  i          this i    this i  toFixed 2           const digits    0  1  2  3  4  5  6  7  8  9    for  const index in digits      console log digits index        Prints      0      1      2      3      4      5      6      7      8      9      function            for  let i   0  i  lt  this length  i              this i    this i  toFixed 2                      This is why for   in loops are discouraged when looping over arrays      NOTE  The forEach loop is another type of for loop in JavaScript    However  forEach   is actually an array method  so it can only be used   exclusively with arrays  There is also no way to stop or break a   forEach loop  If you need that type of behavior in your loop  you   ll   have to use a basic for loop    For   of loop  The for   of loop is used to loop over any type of data that is iterable   Example   const digits    0  1  2  3  4  5  6  7  8  9    for  const digit of digits      console log digit       Prints      0      1      2      3      4      5      6      7      8      9   This makes the for   of loop the most concise version of all the for loops   But wait  there   s more  The for   of loop also has some additional benefits that fix the weaknesses of the for and for   in loops   You can stop or break a for   of loop at anytime   const digits    0  1  2  3  4  5  6  7  8  9    for  const digit of digits      if  digit   2     0        continue        console log digit       Prints      1      3      5      7      9   And you don   t have to worry about adding new properties to objects  The for   of loop will only loop over the values in the object

User · Answer

for in loops over enumerable property names of an object   for of  new in ES6  does use an object-specific iterator and loops over the values generated by that   In your example  the array iterator does yield all the values in the array  ignoring non-index properties

User · Answer

The for   in statement iterates over the enumerable properties of an object  in an arbitrary order  Enumerable properties are those properties whose internal   Enumerable   flag is set to true  hence if there is any enumerable property in the prototype chain  the for   in loop will iterate on those as well   The for   of statement iterates over data that iterable object defines to be iterated over   Example   Object prototype objCustom   function        Array prototype arrCustom   function        let iterable    3  5  7    for  let i in iterable      console log i      logs  0  1  2   arrCustom    objCustom     for  let i in iterable      if  iterable hasOwnProperty i         console log i      logs  0  1  2         for  let i of iterable      console log i      logs  3  5  7     Like earlier  you can skip adding hasOwnProperty in for   of loops

User · Answer

I found the following explanation from https   javascript info array very helpful   One of the oldest ways to cycle array items is the for loop over indexes   let arr     Apple    Orange    Pear     for  let i   0  i  lt  arr length  i      alert  arr i       But for arrays there is another form of loop  for  of   let fruits     Apple    Orange    Plum        iterates over array elements for  let fruit of fruits    alert  fruit      The for  of doesn   t give access to the number of the current element  just its value  but in most cases that   s enough  And it   s shorter    Technically  because arrays are objects  it is also possible to use for  in   let arr     Apple    Orange    Pear     for  let key in arr    alert  arr key        Apple  Orange  Pear   But that   s actually a bad idea  There are potential problems with it    The loop for  in iterates over all properties  not only the numeric ones   There are so-called    array-like    objects in the browser and in other environments  that look like arrays  That is  they have length and indexes properties  but they may also have other non-numeric properties and methods  which we usually don   t need  The for  in loop will list them though  So if we need to work with array-like objects  then these    extra    properties can become a problem   The for  in loop is optimized for generic objects  not arrays  and thus is 10-100 times slower  Of course  it   s still very fast  The speedup may only matter in bottlenecks  But still we should be aware of the difference   Generally  we shouldn   t use for  in for arrays

User · Answer

The for-in loop  for-in loop is used to traverse through enumerable properties of a collection  in an arbitrary order  A collection is a container type object whose items can be using an index or a key    x000D   x000D  var myObject    a  1  b  2  c  3   x000D  var myArray    1  2  3   x000D  var myString    123   x000D   x000D  console log  myObject   a     myArray  1    myString  2      x000D   x000D   x000D    for-in loop extracts the enumerable properties  keys  of a collection all at once and iterates over it one at a time  An enumerable property is the property of a collection that can appear in for-in loop   By default  all properties of an Array and Object appear in for-in loop  However  we can use Object defineProperty method to manually configure the properties of a collection    x000D   x000D  var myObject    a  1  b  2  c  3   x000D  var myArray    1  2  3   x000D   x000D  Object defineProperty  myObject   d     value  4  enumerable  false      x000D  Object defineProperty  myArray  3    value  4  enumerable  false      x000D   x000D  for  var i in myObject    console log   myObject i   gt    i      x000D  for  var i in myArray    console log   myArray i    gt    i      x000D   x000D   x000D    In the above example  the property d of the myObject and the index 3 of myArray does not appear in for-in loop because they are configured with enumerable  false   There are few issues with for-in loops  In the case of Arrays  for-in loop will also consider methods added on the array using myArray someMethod   f syntax  however  myArray length remains 4   The for-of loop  It is a misconception that for-of loop iterate over the values of a collection  for-of loop iterates over an Iterable object  An iterable is an object that has the method with the name Symbol iterator directly on it one on one of its prototypes   Symbol iterator method should return an Iterator  An iterator is an object which has a next method  This method when called return value and done properties   When we iterate an iterable object using for-of loop  the Symbol iterator the method will be called once get an iterator object  For every iteration of for-of loop  next method of this iterator object will be called until done returned by the next   call returns false  The value received by the for-of loop for every iteration if the value property returned by the next   call    x000D   x000D  var myObject     a  1  b  2  c  3  d  4    x000D   x000D     make  myObject  iterable by adding  Symbol iterator  function directlty on it x000D  myObject  Symbol iterator     function    x000D    console log   LOG  called  Symbol iterator  method     x000D    var  myObject   this      this  points to  myObject  x000D     x000D       return an iterator object x000D    return   x000D      keys  Object keys   myObject     x000D      current  0  x000D      next  function     x000D        console log   LOG  called  next  method  index    this current       x000D         x000D        if  this current     this keys length    x000D          return   done  true  value  null       Here   value  is ignored by  for-of  loop x000D          else   x000D          return   done  false  value   myObject  this keys  this current          x000D          x000D        x000D       x000D    x000D   x000D     use  for-of  loop on  myObject  iterable x000D  for  let value of myObject     x000D    console log   myObject  value   gt     value    x000D    x000D   x000D   x000D    The for-of loop is new in ES6 and so are the Iterable and Iterables  The Array constructor type has Symbol iterator method on its prototype  The Object constructor sadly doesn t have it but Object keys    Object values   and Object entries   methods return an iterable  you can use console dir obj  to check prototype methods   The benefit of the for-of loop is that any object can be made iterable  even your custom Dog and Animal classes    The easy way to make an object iterable is by implementing ES6 Generator instead of custom iterator implementation   Unlike for-in  for-of loop can wait for an async task to complete in each iteration  This is achieved using await keyword after for statement documentation   Another great thing about for-of loop is that it has Unicode support  According to ES6 specifications  strings are stored with UTF-16 encoding  Hence  each character can take either 16-bit or 32-bit  Traditionally  strings were stored with UCS-2 encoding which has supports for characters that can be stored within 16 bits only   Hence  String length returns number of 16-bit blocks in a string  Modern characters like an Emoji character takes 32 bits  Hence  this character would return length of 2  for-in loop iterates over 16-bit blocks and returns the wrong index  However  for-of loop iterates over the individual character based on UTF-16 specifications     x000D   x000D  var emoji       x000D   x000D  console log   emoji length   emoji length    x000D   x000D  for  var index in emoji    console log   for-in  emoji character   emoji index       x000D  for  var character of emoji    console log   for-of  emoji character   character      x000D   x000D   x000D

User · Answer

Another difference between the two loops  which nobody has mentioned before      Destructuring for   in is deprecated  Use for   of instead    Source  So if we want to use destructuring in a loop  for get both index and value of each array element  we should to use the for   of loop with the Array method entries     for  const  idx  el  of arr entries          console log  idx          el

User · Answer

Here is a useful mnemonic for remembering the difference between for   in Loop and for   of Loop    index in  object of   for   in Loop    iterates over the index in the array   for   of Loop    iterates over the object of objects

User · Answer

I found a complete answer at Iterators and Generators  Although it is for TypeScript  this is the same for JavaScript too   Both for  of and for  in statements iterate over lists  the values iterated on are different though  for  in returns a list of keys on the object being iterated  whereas for  of returns a list of values of the numeric properties of the object being iterated  Here is an example that demonstrates this distinction  let list    4  5  6    for  let i in list       console log i       quot 0 quot    quot 1 quot    quot 2 quot      for  let i of list       console log i       quot 4 quot    quot 5 quot    quot 6 quot     Another distinction is that for  in operates on any object  it serves as a way to inspect properties on this object  for  of on the other hand  is mainly interested in values of iterable objects  Built-in objects like Map and Set implement Symbol iterator property allowing access to stored values  let pets   new Set   quot Cat quot    quot Dog quot    quot Hamster quot     pets  quot species quot      quot mammals quot    for  let pet in pets       console log pet       quot species quot     for  let pet of pets        console log pet       quot Cat quot    quot Dog quot    quot Hamster quot

User · Answer

There are some already defined data types which allows us to iterate over them easily e g Array  Map  String Objects  Normal for in iterates over the iterator and in response provides us with the keys that are in the order of insertion as shown in below example     const numbers    1 2 3 4 5      for let number in number         console log number               result  0  1  2  3  4   Now if we try same with for of  then in response it provides us with the values not the keys  e g     const numbers    1 2 3 4 5      for let numbers of numbers        console log number             result  1  2  3  4  5   So looking at both of the iterators we can easily differentiate the difference between both of them      Note - For of only works with the Symbol iterator   So if we try to iterate over normal object  then it will give us an error e g-  const Room        area  1000     height  7     floor  2     for let prop in Room     console log prop           Result area  height  floor  for let prop of Room      console log prop            Room is not iterable   Now for iterating over we need to define an ES6 Symbol iterator e g    const Room        area  1000  height  7  floor  2      Symbol iterator   function          yield this area      yield this height      yield this floors          for let prop of Room      console log prop          Result 1000  7  2   This is the difference between For in and For of  Hope that it might clear the difference

User · Answer

Difference for  in and for  of  Both for  in and for  of are looping constructs which are used to iterate over data structures  The only difference between them is the entities they iterate over   for  in iterates over all enumerable property keys of an object for  of iterates over the values of an iterable object  Examples of iterable objects are arrays  strings  and NodeLists   Example   x000D   x000D  let arr     el1    el2    el3     arr addedProp    arrProp       elKey are the property keys for  let elKey in arr      console log elKey         elValue are the property values for  let elValue of arr      console log elValue    x000D   x000D   x000D   In this example we can observe that the for  in loop iterates over the keys of the object  which is an array object in this example  The keys are 0  1  2  which correspond to the array elements  and addedProp  This is how the arr array object looks in chrome devtools   You see that our for  in loop does nothing more than simply iterating over these keys   The for  of loop in our example iterates over the values of a data structure  The values in this specific example are  el1    el2    el3   The values which an iterable data structure will return using for  of is dependent on the type of iterable object  For example an array will return the values of all the array elements whereas a string returns every individual character of the string

User · Answer

The for-in statement iterates over the enumerable properties of an object  in arbitrary order   The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor s prototype   You can think of it as  for in  basically iterates and list out all the keys   var str    abc   var arrForOf       var arrForIn        for value of str     arrForOf push value      for value in str     arrForIn push value      console log arrForOf         a    b    c   console log arrForIn         0    1    2    formatUnicorn    truncate    splitOnLast    contains

User · Answer

When I first started out learning the for in and of loop  I was confused with my output too  but with a couple of research and understanding you can think of the individual loop like the following     The   for   in loop returns the indexes of the individual property and has no effect of impact on the property s value  it loops and returns information on the property and not the value  E g    let profile         name    Naphtali       age   24      favCar    Mustang       favDrink    Baileys         The above code is just creating an object called profile  we ll use it for both our examples  so  don t be confused when you see the profile object on an example  just know it was created      So now let us use the for   in loop below   for let myIndex in profile       console log  The index of my object property is   myIndex          Outputs            The index of my object property is 0         The index of my object property is 1         The index of my object property is 2         The index of my object property is 3      Now Reason for the output being that we have Four 4  properties in our profile object and indexing as we all know starts from 0   n  so  we get the index of properties 0 1 2 3 since we are working with the for  in loop     for   of loop  can return either the property  value or both  Let s take a look at how  In javaScript  we can t loop through objects normally as we would on arrays  so  there are a few elements we can use to access either of our choices from an object    Object keys object-name-goes-here       Returns the keys or properties of an object  Object values object-name-goes-here       Returns the values of an object  Object entries object-name-goes-here       Returns both the keys and values of an object       Below are examples of their usage  pay attention to Object entries      Step One  Convert the object to get either its key  value  or both  Step Two  loop through       Getting the keys property     Step One  let myKeys      Object keys profile        Step Two  for let keys of myKeys                console log  The key of my object property is   keys                     Getting the values of the property      Step One  let myValues      Object values profile         Step Two   for let values of myValues                    console log  The value of my object property is   values                          When using Object entries   have it that you are calling two entries on the object  i e the keys and values  You can call both by either of the entry  Example Below    Step One  Convert the object to entries  using    Object entries object-name     Step Two    Destructure   the    entries object which carries the keys and values     like so    keys  values     by so doing  you have access to either or both content           Getting the keys property         Step One  let myKeysEntry      Object entries profile            Step Two  for let  keys  values  of myKeysEntry                    console log  The key of my object property is   keys                             Getting the values of the property          Step One  let myValuesEntry      Object entries profile             Step Two   for let  keys  values  of myValuesEntry                        console log  The value of my object property is   values                                 Getting both keys and values          Step One  let myBothEntry      Object entries profile             Step Two   for let  keys  values  of myBothEntry                        console log  The keys of my object is   keys  and its value  is   values                              Make comments on unclear parts section s

[javascript] What is the difference between ( for... in ) and ( for... of ) statements?

Examples related to javascript

Examples related to arrays

Examples related to for-loop

Examples related to object