ES6 Iterators and Generators

Published on by Morgan Ney

Two great features of ES6 are Iterators and Generators. They allow you to define custom looping behaviors over objects, thereby providing a myriad of ways to package and access your application data.

Basically, an iterator is an object that is able to maintain the correct iteration sequence over a collection, and provides a next() method that effectively increments the iteration index while returning and object with two properties: value, and done. Managing the internal state of the iteration sequence is a manual, imperative process that can be simplified with the counterpart to iterators, namely generators.

The Array and Map objects store their default iterators (the one invoked inside for...of loops) under the Symbol.iterator property. Generic objects do not have an iterator defined by default and thus can't immediately be used in for...of loops. Here is an example of how to use generators to assign an iterator to an object that will list all of its own enumerable and symbol properties in a for...of loop.

If you want to iterate over the object manually you can assign the iterator to a variable and do something like this:

Now that the object has an iterator defined its simple to turn it into an array of property values with the use of the spread operator.

Finally, generators provide a great way to efficiently iterate over large data sets due to their on-demand calculations. For example, suppose you had a large string that you wanted to alter before iterating over. If it was a very large string it could be difficult to store the changed data in an array due to memory constraints. Instead, you could use a generator comprehension to return an iterator for lazy execution.

Relevant to  JavaScript, ES6, Iterator, Generator, Generator Comprehension, Symbol, Spread operator

Recent Posts

D3 Treemap From Resource Timing Performance Entries

Published on by Morgan Ney

Performance is always a concern for front-end engineers. Fortunately browsers are starting to implement the Resource Timing API to get key networking milestones for each resource embedded in your web app. This data combined with a D3 Treemap can offer useful insights into tweaking page performance, or at the very least a pretty picture of whats under the hood.

Relevant to  Resource Timing API, D3 Treemap, JavaScript

JSON API for Social Media Share Counts

Published on by Morgan Ney

Want to create a custom look for social media buttons from Facebook, Twitter and Google? Are you tired of the vendor supplied widget styles when you use their embed scripts? socoapi is a JSON API for obtaining share counts of your website on social media sites like Facebook, Twitter, Google+ and Pinterest.

Relevant to  Node.js, JSON, API, Social Media

A RESTful JSON API for the NextBus XML Feed

Published on by Morgan Ney

The NextBus XML feed provides useful data for real-time transit applications but the service isn't very friendly to web developers. Use "restbus" to access the NextBus XML feed over a RESTful JSON API.

Relevant to  REST, JSON, API, Node.js

Dynamic Gists Using MutationObservers and Promises

Published on by Morgan Ney

GitHub Gists are great for your blog if they're part of the initial payload before the browser's window has fired its onload event; just use the provided embed script. If you need to embed Gists into XHR loaded content, it's still possible with a bit more work. MutationObservers and Promises can make coordinating the retrieval of the Gist and its subsequent DOM placement a lot easier.

Relevant to  MutationObserver, Promise, Backbone, jQuery

Simple CSS3 Ribbons

Published on by Morgan Ney

Browsers have come a long way in their support for CSS3, in particular generated content of pseudo-elements ::before and ::after. Using these two pseudo-elements it's simple to create a CSS3 ribbon using only one HTML element.

Relevant to  HTML5, CSS3

Installing CouchDB 1.5 on AWS EC2 CentOS 6 (x86_64)

Published on by Morgan Ney

As of January 21st, 2014 the CentOS 6 EPEL repository only supports version 1.0.4 of CouchDB which is currently on version 1.5. Luckily, installing CouchDB from source on an Amazon EC2 instance running CentOS 6 is pretty simple.

Relevant to  CouchDB, EC2, CentOS

Using JavaScript Promises with Backbone.sync

Published on by Morgan Ney

Backbone is a great MVC library for JavaScript, but applications involving fetch() sequences can start to get ugly with deeply nested callbacks. Using ES6 Promises with Backbone can prevent ugly callback chains and make your code more understandable and flexible.

Relevant to  JavaScript, Backbone, Promise, jQuery

HTML Excerpt with PHP

Published on by Morgan Ney

HTML excerpts or previews of an article can reuse the CSS developed to style the entire article, making for a more eye-catching experience. However, it is not always clear how to prevent breaking your HTML when building the excerpt so most authors tend to deliver plain text excerpts. Using PHP's DOMDocument class, it's possible to create a valid HTML excerpt.

Relevant to  PHP, HTML, DOM
Get in Touch

BizzyBtyes is owned by Morgan Ney, a father, husband, and web developer originally from the San Francisco Bay Area and now living in Coarsegold, Ca. just south of Yosemite.