{"id":3644,"date":"2025-11-06T20:29:50","date_gmt":"2025-11-06T20:29:50","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/javascript-for-everyone-iterators-4\/"},"modified":"2025-11-06T20:29:50","modified_gmt":"2025-11-06T20:29:50","slug":"javascript-for-everyone-iterators-4","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/javascript-for-everyone-iterators-4\/","title":{"rendered":"JavaScript For Everyone: Iterators"},"content":{"rendered":"
\n

Introduction to JavaScript Iterators<\/h2>\n

JavaScript iterators are a powerful feature that allows you to traverse through a collection or data structure without exposing its underlying implementation. Iterators provide a standardized way to access elements one at a time, which is especially useful for looping through arrays and other iterable objects.<\/p>\n

What are Iterators?<\/h2>\n

An iterator is an object that defines a sequence and potentially a way to iterate over it. In JavaScript, an iterator is an object that implements the next()<\/code> method, which returns an object with two properties: value<\/code> and done<\/code>.<\/p>\n

Understanding the Iterator Protocol<\/h2>\n

The iterator protocol specifies that an object must implement a next()<\/code> method that returns an object with the following structure:<\/p>\n

{\n  value: any,\n  done: boolean\n}<\/code><\/pre>\n
Creating a Simple Iterator<\/h2>\n
Let’s create a simple iterator that iterates over an array of numbers.<\/p>\n
function createIterator(array) {\n  let index = 0;\n  return {\n    next: function() {\n      if (index < array.length) {\n        return {\n          value: array[index++],\n          done: false\n        };\n      } else {\n        return {\n          value: undefined,\n          done: true\n        };\n      }\n    }\n  };\n}\n\nconst myArray = [1, 2, 3, 4, 5];\nconst iterator = createIterator(myArray);\n\nconsole.log(iterator.next()); \/\/ { value: 1, done: false }\nconsole.log(iterator.next()); \/\/ { value: 2, done: false }\nconsole.log(iterator.next()); \/\/ { value: 3, done: false }\nconsole.log(iterator.next()); \/\/ { value: 4, done: false }\nconsole.log(iterator.next()); \/\/ { value: 5, done: false }\nconsole.log(iterator.next()); \/\/ { value: undefined, done: true }<\/code><\/pre>\n
Using Built-in Iterators<\/h2>\n
JavaScript provides built-in iterators for arrays, strings, maps, and sets. For example, arrays have a built-in iterator that you can use with the for...of<\/code> loop:<\/p>\n
const numbers = [10, 20, 30];\nfor (const num of numbers) {\n  console.log(num); \/\/ Outputs: 10, 20, 30\n}<\/code><\/pre>\n
Iterating Over Objects<\/h3>\n
To iterate over the keys and values of an object, you can use the Object.entries()<\/code> method, which returns an array of a given object's own enumerable string-keyed property [key, value] pairs:<\/p>\n
const obj = { a: 1, b: 2, c: 3 };\nfor (const [key, value] of Object.entries(obj)) {\n  console.log(`${key}: ${value}`); \/\/ Outputs: a: 1, b: 2, c: 3\n}<\/code><\/pre>\n
Implementing Custom Iterators<\/h2>\n
Creating a custom iterable object involves implementing the [Symbol.iterator]<\/code> method. Here's an example of creating a custom iterable:<\/p>\n
const myIterable = {\n  *[Symbol.iterator]() {\n    let i = 0;\n    while (i < 3) {\n      yield i;\n      i++;\n    }\n  }\n};\n\nfor (const value of myIterable) {\n  console.log(value); \/\/ Outputs: 0, 1, 2\n}<\/code><\/pre>\n
Common Use Cases for Iterators<\/h2>\n