An object is deemed iterable if it has an implementation for the Symbol.iterator property.\nSome built-in types like Array, Map, Set, String, Int32Array, Uint32Array, etc. have their Symbol.iterator property already implemented.\nSymbol.iterator function on an object is responsible for returning the list of values to iterate on.
for..of statementsfor..of loops over an iterable object, invoking the Symbol.iterator property on the object.\nHere is a simple for..of loop on an array:
\ntslet someArray = [1, \"string\", false];\n\nfor (let entry of someArray) {\n console.log(entry); // 1, \"string\", false\n}
for..of vs. for..in statementsBoth 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:
\n\ntslet list = [4, 5, 6];\n\nfor (let i in list) {\n console.log(i); // \"0\", \"1\", \"2\",\n}\n\nfor (let i of list) {\n console.log(i); // \"4\", \"5\", \"6\"\n}
Another distinction is that for..in operates on any object; it serves as a way to inspect properties on this object.\nfor..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.
\ntslet pets = new Set([\"Cat\", \"Dog\", \"Hamster\"]);\npets[\"species\"] = \"mammals\";\n\nfor (let pet in pets) {\n console.log(pet); // \"species\"\n}\n\nfor (let pet of pets) {\n console.log(pet); // \"Cat\", \"Dog\", \"Hamster\"\n}
When targeting an ES5 or ES3-compliant engine, iterators are only allowed on values of Array type.\nIt is an error to use for..of loops on non-Array values, even if these non-Array values implement the Symbol.iterator property.
The compiler will generate a simple for loop for a for..of loop, for instance:
\ntslet numbers = [1, 2, 3];\nfor (let num of numbers) {\n console.log(num);\n}
will be generated as:
\n\njsvar numbers = [1, 2, 3];\nfor (var _i = 0; _i < numbers.length; _i++) {\n var num = numbers[_i];\n console.log(num);\n}
When targeting an ECMAScipt 2015-compliant engine, the compiler will generate for..of loops to target the built-in iterator implementation in the engine.