I bet you are familiar with for (const x of someArray) { ... }.

The for construct is using iterables under the hood. Let’s dive in.

Iterables 🔄

What is iterable?

An iterable is object that implements next() method that returns object with done and value properties. And implements [Symbol.iterator]() { return this } method.

🤔 what's the difference between iterable and iterator? An iterator implements just a Iterator protocol which is next() method returning object with done and value properties. An iterable also implements [Symbol.iterator]() { return this } method. We can forget about Iterator protocol and focus on iterables as they're actually useful.

Here is a minimal iterable:

class Range {
	constructor(from, to) {
		this.from = from
		this.to = to
		this.current = from
	}
	next() {
		if (this.current >= this.to) {
			return { done: true, value: undefined }
		}
		const n = {
			done: false, value: this.current,
		}
		this.current += 1
		return n
	}
	[Symbol.iterator]() { // What is Symbol.iteraror? check references
		return this
	}
}

for (const i of Range(0, 10)) {
	console.log(i) // logs numbers 0 to 9
}

Iterables are practical in cases when you want your code to be more ergonomic and support native JavaScript constructs like for of loop.

This is a stepping stone for generators on which we will look in the next post.

Check previous post about 👉 Logical assignment operators.

So next time you’re using for (const i of array) {} you know that JavaScript Array implements iterator protocol and it is itself an iterable.

References