Operate more efficiently, reduce complexity, improve EBITDA, and much more with the purpose-built platform for MSPs.
Protect and defend what matters most to your clients and stakeholders with ConnectWise's best-in-class cybersecurity and BCDR solutions.
Leverage generative AI and RPA workflows to simplify and streamline the most time-consuming parts of IT.
Join fellow IT pros at ConnectWise industry & customer events!
Check out our online learning platform, designed to help IT service providers get the most out of ConnectWise products and services.
Search our resource center for the latest MSP ebooks, white papers, infographics, webinars and more!
Join hundreds of thousands of IT professionals benefiting from and contributing to a legacy of industry leadership when you become a part of the ConnectWise community.
Join hundreds of thousands of IT professionals benefiting from and contributing to a legacy of industry leadership when you become a part of the ConnectWise community.
8/11/2023 | 4 Minute Read
Topics:
Although iterators and iterables are important concepts in JavaScript, they may not be as widely discussed or well-known as some other features of the language. They constitute the core fundamentals of JavaScript and are used in various scenarios, especially when working with collections and performing iterations.
While not as famous as some other JavaScript concepts like functions or objects, iterators are an essential tool for working with collections in JavaScript, and understanding their usage can greatly enhance your ability to manipulate and iterate over data structures.
In this blog we will cover:
Iterators are handy tools in JavaScript, especially when paired with the for...of
loop. They allow us to iterate over elements in a clean and straightforward way. You may have encountered them when using built-in functions like Array.prototype.map()
or Array.prototype.forEach()
to work with collections.
Long story short, think of iterators as a closure that remembers its current state and moves to the next element when we request it. It's a powerful concept that opens up a whole new world of possibilities for flexible and controlled looping.
Building blocks of an iterator:
{ value, done }
next()
returns a value. done
is false
until the iteration is complete. Once all values are iterated, done
becomes true
and value
is undefined
.To use an iterator, you typically call the Symbol.iterator
method on a collection or data structure to obtain an iterator object. Let’s use an iterator over an array:
const temp = [1, 2, 3];
const iterator = tempSymbol.iterator;
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
…and that’s it. Simple, wasn’t it?
As we discussed earlier, an iterator is a closure which returns an object having a next()
function. On each subsequent call to next()
, we get the next iteration value.
If it looks like too much code, simplify with generators.
Generators basically auto-provide the next()
function, so the developer doesn’t need to manually return a closure and maintain internal state references.
An iterable is an object that defines the iterator property. To be iterable, an object must implement the Symbol.iterator
method. This property converts the object into an iterable. For iterables that can only be iterated once, such as generators, they typically return the object itself from their @@iterator
method. However, for iterables that can be iterated multiple times, a new iterator must be returned with each invocation of @@iterator
.
It’s best explained by seeing it in action. So, let’s code!
Below, we are writing an iterable object which will iterate over an array and print the array values.
As discussed above, an iterable is an object comprising an iterator—which is defined under the key Symbol.iterator
. The iterator serves as the action definition for iteration, containing custom logic for the next()
function. The next()
function is called iteratively, which returns a { value, done }
object, providing information about the current element being processed and whether the iteration has reached its end.
In conclusion, iterators and iterables are fundamental concepts in JavaScript that facilitate the traversal and manipulation of collections. Iterators provide a standardized way to access elements sequentially, while iterables are objects that define the iteration behavior by implementing the iterator protocol.
By creating custom iterators and iterables, developers can extend the functionality of JavaScript to suit their specific needs. They offer a gateway to unleash custom logic and behaviors when accessing elements, providing a whole new level of flexibility. Custom iterators grant precise control over the iteration process, while custom iterables offer a higher-level interface for seamless integration with built-in language constructs and functions.
Understanding iterators and iterables, along with generators, unlocks the ability to write efficient, modular, and reusable code when dealing with collections and performing iterations. Whether you’re leveraging built-in iterables or creating your own custom ones, these concepts are essential tools in a JavaScript developer’s toolkit.
Although we discussed iterators and iterables in this article, it's crucial to note that we haven't explored another powerful concept in JavaScript: Generators. Generators are a special function syntax that offers even greater flexibility and control over the iteration process. Stay tuned for our upcoming article on generators to further expand your knowledge and proficiency in JavaScript iteration techniques.