{"componentChunkName":"component---src-templates-handbook-tsx","path":"/docs/handbook/iterators-and-generators.html","result":{"data":{"markdownRemark":{"id":"7c11a779-bcbb-573a-bba2-ab476696459d","excerpt":"Iterables An object is deemed iterable if it has an implementation for the Symbol.iterator property.\nSome built-in types like Array, Map, Set, String, Int…","html":"

Iterables

\n

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.

\n

for..of statements

\n

for..of loops over an iterable object, invoking the Symbol.iterator property on the object.\nHere is a simple for..of loop on an array:

\n
ts
let someArray = [1, \"string\", false];\n\nfor (let entry of someArray) {\n    console.log(entry); // 1, \"string\", false\n}
\n

for..of vs. for..in statements

\n

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.

\n

Here is an example that demonstrates this distinction:

\n
ts
let 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}
\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.

\n
ts
let 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}
\n

Code generation

\n

Targeting ES5 and ES3

\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.

\n

The compiler will generate a simple for loop for a for..of loop, for instance:

\n
ts
let numbers = [1, 2, 3];\nfor (let num of numbers) {\n    console.log(num);\n}
\n

will be generated as:

\n
js
var numbers = [1, 2, 3];\nfor (var _i = 0; _i < numbers.length; _i++) {\n    var num = numbers[_i];\n    console.log(num);\n}
\n

Targeting ECMAScript 2015 and higher

\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.

","headings":[{"value":"Iterables","depth":1},{"value":"for..of statements","depth":2},{"value":"for..of vs. for..in statements","depth":3},{"value":"Code generation","depth":3},{"value":"Targeting ES5 and ES3","depth":4},{"value":"Targeting ECMAScript 2015 and higher","depth":4}],"frontmatter":{"permalink":"/docs/handbook/iterators-and-generators.html","title":"Iterators and Generators"}}},"pageContext":{"slug":"/docs/handbook/iterators-and-generators.html","isOldHandbook":true}}}