JavaScript ES6+

Iterators

Create custom iteration behavior for objects

Find videos you like?

Save to resource drawer for future reference!

Iterators: Custom Iteration Logic

An iterator is an object that implements the iterator protocol with a next() method. It returns { value, done } to control iteration!

Iterator Protocol

An object is an iterator if it has a next() method that returns:
{ value: any, done: boolean }

Creating an Iterator

Implement the next() method

🔧 Manual Iterator

// Create iterator manually
function createIterator(arr) {
  let index = 0;
  
  return {
    next() {
      if (index < arr.length) {
        return {
          value: arr[index++],
          done: false
        };
      }
      return { done: true };
    }
  };
}

const iter = createIterator([1, 2, 3]);
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { done: true }

🔄 Using Iterator

// Use with while loop
const iterator = createIterator([10, 20, 30]);

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}
// Output: 10 20 30

// Or consume all at once
function toArray(iterator) {
  const arr = [];
  let result = iterator.next();
  while (!result.done) {
    arr.push(result.value);
    result = iterator.next();
  }
  return arr;
}

Iterator Examples

Different iterator implementations

javascript

code

DarkEditable

// Range iterator
function range(start, end) {
  let current = start;
  
  return {
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      }
      return { done: true };
    }
  };
}

const nums = range(1, 5);
console.log(nums.next().value);  // 1
console.log(nums.next().value);  // 2
console.log(nums.next().value);  // 3

// Fibonacci iterator
function fibonacci() {
  let prev = 0, curr = 1;
  
  return {
    next() {
      const value = curr;
      [prev, curr] = [curr, prev + curr];
      return { value, done: false };
    }
  };
}

const fib = fibonacci();
console.log(fib.next().value);  // 1
console.log(fib.next().value);  // 1
console.log(fib.next().value);  // 2
console.log(fib.next().value);  // 3
console.log(fib.next().value);  // 5

// Infinite iterator with take()
function take(iterator, n) {
  let count = 0;
  return {
    next() {
      if (count < n) {
        count++;
        return iterator.next();
      }
      return { done: true };
    }
  };
}

const first5Fib = take(fibonacci(), 5);
let result;
while (!(result = first5Fib.next()).done) {
  console.log(result.value);  // 1 1 2 3 5
}

Console Output

Click "Run Code" to see output here...

Iterable Protocol (Symbol.iterator)

Make objects work with for...of

Symbol.iterator Magic!

// Make object iterable
const range = {
  from: 1,
  to: 5,
  
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    
    return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        }
        return { done: true };
      }
    };
  }
};

// Now works with for...of!
for (const num of range) {
  console.log(num);  // 1 2 3 4 5
}

// And spread operator
console.log([...range]);  // [1, 2, 3, 4, 5]

// And destructuring
const [first, second, ...rest] = range;
console.log(first);   // 1
console.log(second);  // 2
console.log(rest);    // [3, 4, 5]

Custom Iterable Objects

Make any object iterable with Symbol.iterator

javascript

code

DarkEditable

// Linked list iterable
class LinkedList {
  constructor() {
    this.head = null;
  }
  
  add(value) {
    const node = { value, next: null };
    if (!this.head) {
      this.head = node;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = node;
    }
  }
  
  [Symbol.iterator]() {
    let current = this.head;
    
    return {
      next() {
        if (current) {
          const value = current.value;
          current = current.next;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
}

const list = new LinkedList();
list.add('A');
list.add('B');
list.add('C');

for (const item of list) {
  console.log(item);  // A B C
}

// Tree traversal iterator
class BinaryTree {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
  
  [Symbol.iterator]() {
    const stack = [this];
    
    return {
      next() {
        if (stack.length === 0) {
          return { done: true };
        }
        
        const node = stack.pop();
        if (node.right) stack.push(node.right);
        if (node.left) stack.push(node.left);
        
        return { value: node.value, done: false };
      }
    };
  }
}

const tree = new BinaryTree(1);
tree.left = new BinaryTree(2);
tree.right = new BinaryTree(3);

console.log([...tree]);  // [1, 2, 3]

Console Output

Click "Run Code" to see output here...

Iterator Utility Functions

Building reusable iterator utilities

javascript

code

DarkEditable

// Range function (needed for examples)
function range(start, end) {
  let current = start;
  return {
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      }
      return { done: true };
    }
  };
}

// Map iterator
function map(iterator, fn) {
  return {
    next() {
      const result = iterator.next();
      if (result.done) return result;
      return {
        value: fn(result.value),
        done: false
      };
    }
  };
}

// Filter iterator
function filter(iterator, predicate) {
  return {
    next() {
      while (true) {
        const result = iterator.next();
        if (result.done) return result;
        if (predicate(result.value)) {
          return result;
        }
      }
    }
  };
}

// Take iterator
function take(iterator, n) {
  let count = 0;
  return {
    next() {
      if (count++ < n) {
        return iterator.next();
      }
      return { done: true };
    }
  };
}

// Usage example
const nums = range(1, 10);
const doubled = map(nums, x => x * 2);
const evens = filter(doubled, x => x % 4 === 0);
const first3 = take(evens, 3);

console.log('Chained iteration results:');
while (true) {
  const result = first3.next();
  if (result.done) break;
  console.log(result.value);  // 4 8 12
}

// Collecting results
const nums2 = range(1, 15);
const doubled2 = map(nums2, x => x * 2);
const multiples = filter(doubled2, x => x % 3 === 0);
const first5 = take(multiples, 5);

const collected = [];
while (true) {
  const result = first5.next();
  if (result.done) break;
  collected.push(result.value);
}
console.log('Collected:', collected);  // [6, 12, 18, 24, 30]

Console Output

Click "Run Code" to see output here...

Real-World Example: Pagination Iterator

Iterate through paginated data

javascript

code

DarkEditable

// Simulating paginated data (in real apps, this would be from API)
const mockDatabase = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
  { id: 4, name: 'Diana', age: 28 },
  { id: 5, name: 'Eve', age: 32 },
  { id: 6, name: 'Frank', age: 27 },
  { id: 7, name: 'Grace', age: 29 },
  { id: 8, name: 'Henry', age: 31 }
];

// Pagination iterator
class PaginatedCollection {
  constructor(data, pageSize = 3) {
    this.data = data;
    this.pageSize = pageSize;
  }
  
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    const pageSize = this.pageSize;
    let currentPage = 1;
    
    return {
      next() {
        if (index < data.length) {
          const value = data[index];
          const page = Math.floor(index / pageSize) + 1;
          
          // Log page transitions
          if (page !== currentPage) {
            console.log(`--- Loading page ${page} ---`);
            currentPage = page;
          }
          
          index++;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
}

const paginated = new PaginatedCollection(mockDatabase, 3);

console.log('Iterating through paginated data:');
for (const user of paginated) {
  console.log(`User: ${user.name}, Age: ${user.age}`);
}

// Custom filtered collection
class FilteredCollection {
  constructor(data, predicate) {
    this.data = data;
    this.predicate = predicate;
  }
  
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    const predicate = this.predicate;
    
    return {
      next() {
        while (index < data.length) {
          const value = data[index++];
          if (predicate(value)) {
            return { value, done: false };
          }
        }
        return { done: true };
      }
    };
  }
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = new FilteredCollection(numbers, n => n % 2 === 0);

console.log('Even numbers:', [...evens]);  // [2, 4, 6, 8, 10]

const adults = new FilteredCollection(mockDatabase, user => user.age >= 30);
console.log('Adults:', [...adults].map(u => u.name));

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔄

Iterator Protocol

Object with next() method
Returns { value, done }

🎯

Iterable Protocol

Object with [Symbol.iterator]()
Works with for...of, spread, destructuring

♾️

Lazy Evaluation

Values computed on demand
Perfect for infinite sequences

🔗

Composable

Build utilities: map, filter, take
Chain operations efficiently

Pro Tip

Iterators are great for custom data structures and lazy sequences. For simpler cases, use generators (function*) - they create iterators automatically!

Previous Topic

Symbols

Unique identifiers and symbol use cases in modern JavaScript.

Next Topic

Generators

Pausable functions with yield for lazy evaluation.

Ask a Question

Have a question about Iterators? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Iterators

Create custom iteration behavior for objects

Find videos you like?

Save to resource drawer for future reference!

Iterators: Custom Iteration Logic

An iterator is an object that implements the iterator protocol with a next() method. It returns { value, done } to control iteration!

Iterator Protocol

An object is an iterator if it has a next() method that returns:
{ value: any, done: boolean }

Creating an Iterator

Implement the next() method

🔧 Manual Iterator

// Create iterator manually
function createIterator(arr) {
  let index = 0;
  
  return {
    next() {
      if (index < arr.length) {
        return {
          value: arr[index++],
          done: false
        };
      }
      return { done: true };
    }
  };
}

const iter = createIterator([1, 2, 3]);
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { done: true }

🔄 Using Iterator

// Use with while loop
const iterator = createIterator([10, 20, 30]);

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}
// Output: 10 20 30

// Or consume all at once
function toArray(iterator) {
  const arr = [];
  let result = iterator.next();
  while (!result.done) {
    arr.push(result.value);
    result = iterator.next();
  }
  return arr;
}

Iterator Examples

Different iterator implementations

javascript

code

DarkEditable

const nums = range(1, 5);
console.log(nums.next().value);  // 1
console.log(nums.next().value);  // 2
console.log(nums.next().value);  // 3

const first5Fib = take(fibonacci(), 5);
let result;
while (!(result = first5Fib.next()).done) {
  console.log(result.value);  // 1 1 2 3 5
}

Console Output

Click "Run Code" to see output here...

Iterable Protocol (Symbol.iterator)

Make objects work with for...of

Symbol.iterator Magic!

// Make object iterable
const range = {
  from: 1,
  to: 5,
  
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    
    return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        }
        return { done: true };
      }
    };
  }
};

// Now works with for...of!
for (const num of range) {
  console.log(num);  // 1 2 3 4 5
}

// And spread operator
console.log([...range]);  // [1, 2, 3, 4, 5]

// And destructuring
const [first, second, ...rest] = range;
console.log(first);   // 1
console.log(second);  // 2
console.log(rest);    // [3, 4, 5]

Custom Iterable Objects

Make any object iterable with Symbol.iterator

javascript

code

DarkEditable

const list = new LinkedList();
list.add('A');
list.add('B');
list.add('C');

for (const item of list) {
  console.log(item);  // A B C
}

const tree = new BinaryTree(1);
tree.left = new BinaryTree(2);
tree.right = new BinaryTree(3);

console.log([...tree]);  // [1, 2, 3]

Console Output

Click "Run Code" to see output here...

Iterator Utility Functions

Building reusable iterator utilities

javascript

code

DarkEditable

// Take iterator
function take(iterator, n) {
  let count = 0;
  return {
    next() {
      if (count++ < n) {
        return iterator.next();
      }
      return { done: true };
    }
  };
}

// Usage example
const nums = range(1, 10);
const doubled = map(nums, x => x * 2);
const evens = filter(doubled, x => x % 4 === 0);
const first3 = take(evens, 3);

console.log('Chained iteration results:');
while (true) {
  const result = first3.next();
  if (result.done) break;
  console.log(result.value);  // 4 8 12
}

// Collecting results
const nums2 = range(1, 15);
const doubled2 = map(nums2, x => x * 2);
const multiples = filter(doubled2, x => x % 3 === 0);
const first5 = take(multiples, 5);

const collected = [];
while (true) {
  const result = first5.next();
  if (result.done) break;
  collected.push(result.value);
}
console.log('Collected:', collected);  // [6, 12, 18, 24, 30]

Console Output

Click "Run Code" to see output here...

Real-World Example: Pagination Iterator

Iterate through paginated data

javascript

code

DarkEditable

const paginated = new PaginatedCollection(mockDatabase, 3);

console.log('Iterating through paginated data:');
for (const user of paginated) {
  console.log(`User: ${user.name}, Age: ${user.age}`);
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = new FilteredCollection(numbers, n => n % 2 === 0);

console.log('Even numbers:', [...evens]);  // [2, 4, 6, 8, 10]

const adults = new FilteredCollection(mockDatabase, user => user.age >= 30);
console.log('Adults:', [...adults].map(u => u.name));

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔄

Iterator Protocol

Object with next() method
Returns { value, done }

🎯

Iterable Protocol

Object with [Symbol.iterator]()
Works with for...of, spread, destructuring

♾️

Lazy Evaluation

Values computed on demand
Perfect for infinite sequences

🔗

Composable

Build utilities: map, filter, take
Chain operations efficiently

Pro Tip

Iterators are great for custom data structures and lazy sequences. For simpler cases, use generators (function*) - they create iterators automatically!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Symbols

Generators

JavaScript Code Editor

Building Your Learning Module...

Iterators

Iterators: Custom Iteration Logic

Iterator Protocol

🔧 Manual Iterator

🔄 Using Iterator

Iterator Examples

Symbol.iterator Magic!

Custom Iterable Objects

Iterator Utility Functions

Real-World Example: Pagination Iterator

Key Takeaways

Iterator Protocol

Iterable Protocol

Lazy Evaluation

Composable

Pro Tip

Symbols

Generators

JavaScript Code Editor

Iterators

Iterators: Custom Iteration Logic

Iterator Protocol

🔧 Manual Iterator

🔄 Using Iterator

Iterator Examples

Symbol.iterator Magic!

Custom Iterable Objects

Iterator Utility Functions

Real-World Example: Pagination Iterator

Key Takeaways

Iterator Protocol

Iterable Protocol

Lazy Evaluation

Composable

Pro Tip