Iterators & Generators

Question 1

What does it mean for an object to be iterable?

Answer 1

An object is considered iterable in TypeScript if it has an implementation for the Symbol.iterator property. Built-in types like Array, Map, Set, String, Int32Array, Uint32Array, etc., have their Symbol.iterator property already implemented. The Symbol.iterator function on an object is responsible for returning the list of values to iterate on.

“Iterables” (typescriptlang.org). Retrieved June 23, 2023.

Question 2

What is the Iterable interface?

Answer 2

The Iterable interface in TypeScript is a type used to take in types which are iterable.

Here’s an example:

function toArray<X>(xs: Iterable<X>): X[] {
  return [...xs]
}

In this example, the function toArray takes an iterable of type X and returns an array of type X.

“Iterable interface” (typescriptlang.org). Retrieved June 23, 2023.

Question 3

What is the purpose of for..of statements?

Answer 3

for..of loops over an iterable object, invoking the Symbol.iterator property on the object. It returns a list of values of the numeric properties of the object being iterated. For example:

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

“for..of statements” (typescriptlang.org). Retrieved June 23, 2023.

Question 4

What is the difference between for..of and for..in statements?

Answer 4

Both for..of and for..in statements iterate over lists. However, they iterate over different values.

• for..in returns a list of keys on the object being iterated.
• for..in operates on any object and 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.
• for..of returns a list of values of the numeric properties of the object being iterated.

Example:

let list = [4, 5, 6];

for (let i in list) {
  console.log(i); // "0", "1", "2",
}

for (let i of list) {
  console.log(i); // 4, 5, 6
}

“for..of vs. for..in statements” (typescriptlang.org). Retrieved June 23, 2023.

Question 5

What are the restrictions on iterators when targeting ES5 or ES3?

Answer 5

When targeting an ES5 or ES3-compliant engine in TypeScript, iterators are only allowed on values of Array type. It is an error to use for..of loops on non-Array values, even if these non-Array values implement the Symbol.iterator property. For a for..of loop, the compiler will generate a simple for loop.

For example, this TypeScript code:

let numbers = [1, 2, 3];
for (let num of numbers) {
  console.log(num);
}

Will be compiled to this JavaScript code:

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

“Documentation - Iterators and Generators” (typescriptlang.org). Retrieved June 23, 2023.

Question 6

How does TypeScript handle for..of loops when targeting ECMAScript 2015 and higher?

Answer 6

When targeting an ECMAScript 2015-compliant engine, the TypeScript compiler will generate for..of loops to target the built-in iterator implementation in the engine. This means that the compiled JavaScript will retain the for..of loop structure instead of converting it to a simple for loop as it does when targeting ES5 or ES3.

“Documentation - Iterators and Generators” (typescriptlang.org). Retrieved June 23, 2023.