bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Iterators

The Iterator Object

An Iterator is an object that provides a standard way to access elements sequentially .

An Iterator must adheres to the Iterator Protocol : It must have a next() method.

The next() Method

The next() method returns an object with two properties:

  • The value property holds the next value in the iteration sequence.
  • The done property returns false if there are more elements to iterate over, otherwise it returns true .

The For Of Loop

The JavaScript for..of statement loops through the elements of an iterable object.

Syntax

for (variable of iterable) {
 //
code block to be executed
}

Technically, iterables must implement the Symbol.iterator method.

In JavaScript the following are iterables

  • Strings
  • Arrays
  • Typed Arrays
  • Sets
  • Maps

Because their prototype objects have a Symbol.iterator method:

Iterators provide a controlled way to work with data sequences, enabling custom iteration logic for various data structures.

They are particularly useful for handling streams of data, lazy computation of values, and building custom data structures with defined iteration behaviors.

Helper Functions

JavaScript 2025 (ECMAScript 2025) officially approved a set of new Iterator Helper methods that significantly enhance the functionality of iterators in JavaScript.

The methods provide a more functional and efficient way to work with iterable objects, including generators, by allowing direct manipulation and transformation without first converting them to arrays:

FunctionDescription
drop()Returns an iterator that skips a specified number of elements before yielding the rest
every()Returns true if all elements satisfy a test function
filter()Returns an iterator containing elements that satisfy a filter function
find()Returns the first element that satisfies a test function
flatMap()Returns an iterator by mapping each element and then flattening the results
forEach()Executes a function once for each element in the iterator.
from()creates an iterator object from an iterable
map()Returns an iterator with all elements transformed by a map function
reduce()Applies a reducer function against each element to reduce it to a single value
some()Returns true if at least one element satisfy a test function
take()Returns an iterator that yields a specified number of elements

The Iterator.from() Method

The Iterator.from() creates an iterator object from an existing iterable or iterator object.

Example

// Create an iterator
const myIterator = Iterator.from([1, 2, 3]);
// Iterate over the elements
let text = "";
for (const x of myIterator) {
  text += x;
}

The drop() Method

The drop() method returns a new iterator that skips a specified number of elements before yielding the rest.

Example

// Create an iterator
const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
// Remove the first five
const firstFive = myIterator.drop(5);

The every() Method

The every(fn) method returns true if all elements in the iterator satisfy the provided test function.

Example

// Create an Iterator
const myIterator = Iterator.from("123456789");
// Is every Element greater than 7? let result = myIterator.every(x => x > 7);

The filter() Method

The filter() method returns a new iterator containing elements that satisfy a filter function.

Example

// Create an iterator
const myIterator = Iterator.from([32, 33, 16, 40]);
// Filter the iterator
const filteredIterator = myIterator.filter(x => x > 18);

The find() Method

The find(fn) method returns the first element that satisfies a test function.

Example

// Create an iterator
const myIterator = Iterator.from([3, 10, 18, 30, 20]);
// Find first greater than 18
let result = myIterator.find(x => x > 18);

The flatMap() Method

The flatMap() method returns a new iterator by mapping each element and then flattening the results into a single iterator.

Example

// Create an iterator
const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
// Map the Iterator
const mappedIterator = myIterator.flatMap(x => [x, x * 10]);

The forEach() Method

The forEach() method executes a provided function once for each element in the iterator.

Example

// Create an iterator
const myIterator = Iterator.from("123456789");
// Iterate over all elements
let text = "";
myIterator.forEach (x => text += x);

The map() Method

The map() method returns a new iterator with all elements transformed by a map function.

Example

// Create an iterator
const myIterator = Iterator.from("123456789");
// Now you can use the map method
const mappedIterator = myIterator.map(x => x * 2);

The reduce() Method

The reduce() method applies a reducer function against an accumulator and each element to reduce it to a single value.

Example

// Create an Iterator
const myIterator = Iterator.from([175, 50, 25]);
// Reduce the Iterator
let result = myIterator.reduce(myFunc);

The some() Method

The some() method returns true if at least one element in the iterator satisfies the provided test function.

Example

// Create an Iterator
const myIterator = Iterator.from("123456789");
// Is some Element greater than 7? let result = myIterator.some(x => x > 7);

The take() Method

The take() method returns a new iterator that yields at most a specified number of elements.

Example

const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
// Take the first five elements
const firstFive = myIterator.take(5);

Iterators bring the iteration concept directly into the core JavaScript language and provide a mechanism for customizing the behavior of for...of.

Previous

JavaScript Temporal vs Date

Next

JavaScript Callbacks

This chapter

Overview
123

Lessons

539m

Read time

1. JavaScript Objects2. JavaScript Temporal Tutorial3. JavaScript Loops4. JavaScript Advanced Functions5. JavaScript Objects6. JavaScript Temporal Intro7. JavaScript Iterables8. JavaScript Function Definitions9. JavaScript Object Properties10. JavaScript Temporal vs Date11. JavaScript Iterators12. JavaScript Callbacks13. JavaScript Object Methods14. JavaScript Temporal Duration15. JavaScript Generators16. The JavaScript this Keyword17. JavaScript this Keyword18. JavaScript Temporal Instant19. JavaScript Function call()20. JavaScript Display Objects21. JavaScript PlainDateTime22. JavaScript Function apply()23. JavaScript Object Constructors24. JavaScript Temporal PlainDate25. JavaScript Function bind()26. JavaScript PlainYearMonth27. Self-Invoking Functions28. JavaScript PlainMonthDay29. JavaScript Closures30. JavaScript Temporal PlainTime31. JavaScript Objects - Advanced32. JavaScript ZonedDateTime33. JavaScript Object Definitions34. JavaScript Temporal Now35. this in JavaScript Objects36. JS Temporal Arithmetic37. JavaScript Object Iterations38. JS Temporal Differences39. JavaScript Object Accessors40. JS Temporal Compare41. JavaScript Object Management42. JavaScript Temporal Conversion43. JavaScript Object Protection44. Temporal Display Formats45. JavaScript Object Prototypes46. JavaScript Temporal Mistakes47. JavaScript Classes48. Migrate from Date to Temporal49. JavaScript Class Inheritance50. Temporal Standards51. JavaScript Static Methods52. Asynchronous JavaScript53. Asynchronous Programming54. JavaScript Timeouts55. JavaScript Callbacks56. JavaScript Promises57. JavaScript async and await58. JavaScript fetch API59. Debugging Async JavaScript60. JavaScript Modules61. JavaScript Modules Export62. JavaScript Modules Import63. JS Module Namespace64. JavaScript Dynamic Modules65. JavaScript Meta Programming66. JavaScript Reflect67. JavaScript Proxy68. JavaScript Typed Arrays69. Typed Array Methods70. JavaScript ArrayBuffer71. JavaScript DataView72. JavaScript Atomics73. JavaScript HTML DOM Navigation74. JavaScript HTML DOM Elements (Nodes)75. JavaScript HTML DOM Collections76. JavaScript HTML DOM Node Lists77. JavaScript Window - The Browser Object Model78. JavaScript Window Screen79. JavaScript Window Location80. JavaScript Window History81. JavaScript Window Navigator82. JavaScript Popup Boxes83. JavaScript Timing Events84. JavaScript Cookies85. Web APIs - Introduction86. JavaScript Fetch API87. Web Geolocation API88. Web History API89. Pointer Events API90. Web Storage API91. JavaScript Validation API92. Web Workers API93. AJAX Introduction94. AJAX - The XMLHttpRequest Object95. AJAX - XMLHttpRequest96. AJAX - Server Response97. AJAX XML Example98. AJAX PHP Example99. AJAX ASP Example100. AJAX Database Example101. XML Applications102. JavaScript JSON103. JSON Syntax104. JSON vs XML105. JSON Data Types106. JSON.parse()107. JSON.stringify()108. JSON Object Literals109. JSON Array Literals110. JSON PHP111. JSON HTML112. JSONP113. JavaScript / jQuery DOM Selectors114. JavaScript / jQuery HTML Elements115. JavaScript / jQuery CSS Styles116. JavaScript / jQuery HTML DOM117. JavaScript Graphics118. HTML Canvas119. Plotly.js120. Chart.js121. Google Chart122. D3.js123. JavaScript Interview Preparation

On this page

The Iterator ObjectThe next() MethodThe For Of LoopHelper FunctionsThe Iterator.from() MethodThe drop() MethodThe every() MethodThe filter() MethodThe find() MethodThe flatMap() MethodThe forEach() MethodThe map() MethodThe reduce() MethodThe some() MethodThe take() Method