for...in & for...of

**Before jump to the main content.
JavaScript supports different kinds of loops:

for	loops through a block of code a number of times
for...in	loops through the properties of an object
for...of	loops through the values of an iterable object
while	loops through a block of code while a specified condition is true
do...while	loops through a block of code once, and then repeats the loop while a specified condition is true

for...in

1. loop iterates over all (non-Symbol) enumerable properties of an object 
2. that are keyed by strings
3. including inherited enumerable properties

   : properties attached to the object itself, and not its prototypes, use getOwnPropertyNames() or perform a hasOwnProperty() check (propertyIsEnumerable() can also be used). Alternatively, if you know there won't be any outside code interference, you can extend built-in prototypes with a check method.

4. in an arbitrary order (don't know the reason yet, check MDN doc)
   : should not be used to iterate over an Array where the index order is important.   
   : In general, it is best not to add, modify, or remove properties from the object during iteration.
     - No guarantee of whether an added/modified/deleted property will be visited before or after.

   : better to use a for loop with a numeric index (or Array.prototype.forEach() or the for...of loop)

5. ignoring ones keyed by Symbols

 

[Syntax]

for (variable in object){
  statement(code block to be executed)
}

 

Why Use for...in?

Given that for...in is built for iterating object properties, not recommended for use with arrays, and options like Array.prototype.forEach() and for...of exist, what might be the use of for...in at all? It may be most practically used for debugging purposes, being an easy way to check the properties of an object (by outputting to the console or otherwise). Although arrays are often more practical for storing data, in situations where a key-value pair is preferred for working with data (with properties acting as the "key"), there may be instances where you want to check if any of those keys hold a particular value.

@
www.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

https://www.w3schools.com/jsref/jsref_forin.asp

 

 

for...of

 

1. creates a loop iterating over iterable objects
   : built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

   : (sample codes are in MDN doc)
2. invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.
3. abrupt iteration termination can be caused by break, throw or return.

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (const o of foo()) { 
  console.log(o); 
  break; // closes iterator, execution continues outside of the loop
}
console.log('done');

4. You can use let instead of const too, if you reassign the variable inside the block.

 

const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

5. ES6

 

[Syntax]

for (variable of iterable) {
  statement(code block to be executed)
}

variable	On each iteration a value of a different property is assigned to variable.
	variable may be declared with const, let, or var.
iterable	Object whose iterable properties are iterated.

 

for...of vs. for...in

	for...in	for...of
Both	iterate over something
Difference	terates over the enumerable properties of an object, in an arbitrary order.	iterates over values that the iterable object defines to be iterated over.

Check the example code and explanation in MDN

 

@

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of