ferreiratiago

const iterable = {
    [Symbol.iterator](): iterator
}

ferreiratiago

const iterator = {
    next() {
        value: any,
        done: boolean
    }
}

ferreiratiago

const array = ['foo','bar','zed']

// Array is a data source because it implements an iterator.
console.log(typeof array[Symbol.iterator]) // function

// We first get the iterator which allow us to iterate (i.e. consume) over the array values.
const iterator = array[Symbol.iterator]()

// The iterator follows the protocol of being an object with the 'next' function.
console.log(typeof iterator.next) // function

ferreiratiago

// Arrays
for(let e of ['foo','bar']) {
    console.log(e)
    // 'foo'
    // 'bar'
}

// Strings
for(let c of 'foo') {
    console.log(c)

ferreiratiago

let Hugo = {
    fullName: 'Hugo Matias',
    toString()  {
        return `${this.fullName}`
    }
}

ferreiratiago

const iterable = {
    [Symbol.iterator]() {
        let data = ['foo','bar']
        return { // Iterator
            next() {
                return {
                    done: data.length === 0,
                    value: data.pop()
                }
            }

ferreiratiago

const iterable = {
    data: ['foo','bar'],
    next() {
        return {
            done: this.data.length === 0,
            value: this.data.pop()
        }
    },
    [Symbol.iterator]() {
        // Return the iterable itself.

ferreiratiago

const array = ['foo', 'bar', 'zed']
const iterator = array[Symbol.iterator]()

for(let e of iterator) {
    console.log(e)
    break
    // 'foo'
}

for(let e of iterator) {

ferreiratiago

const iterable = {
    done: false,
    data: ['foo','bar','zed'],
    next() {
        done = this.done || this.data.length === 0
        return done ?
        // After 'return' is called the object returned by 'next' should also be done.
        {
            done: true
            // We can ignore the 'value' when 'done' is 'true'.

ferreiratiago

for (let e of [1,2,3]) {
  console.log(e)
  // 1
  // 2
  // 3
}