This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
Let’s examine these four new collections and the benefits they provide.
HashMaps, dictionaries, and hashes are several ways that various programming languages store key/value pairs and these data structures are optimized for fast retrieval.
Downside #1: Keys must be strings in ES5
Downside #2: Objects are not inherently iterable
Objects weren’t designed to be used as collections, and as a result there’s no efficient way to determine how many properties an object has (see, for e.g., Object.keys is slow). When you loop over an object’s properties, you also get its prototype properties. You could add the
iterable property to all objects but not all objects are meant to be used as collections. You could use the
for...in loop and the
hasOwnProperty() method, but this just a workaround. When you loop over an object’s properties, the properties won’t necessarily be retrieved in the same order they were inserted.
Downside #3: Challenges with built-in method collisions
Objects have built in methods like
valueOf. If one of these was added as a property, it could cause collisions. You could use
Object.create(null) to create a bare object (which doesn’t inherit from
object.prototype), but, again, this is just a workaround.
ES6 includes new collection data types, so there is no longer a need to use objects and live with their drawbacks.
Using ES6 MapCollections
Map is the first data structure/collection we’ll examine. Maps are collections of keys and values of any type. It’s easy to create new Maps, add/remove values, loop over keys/values and efficiently determine their size. Here are the crucial methods:
Creating a map and using common methods
Using the SetCollection
Sets are ordered lists of values which contain no duplicates. Instead of being indexed like an arrays are, sets are accessed using keys. Sets already exist in Java, Ruby, Python, and many other languages. One difference between ES6 Sets and those in other languages is that the order matters in ES6 (not so in many other languages). Here are the crucial Set methods:
Weak Collections, Memory, and Garbage Collections
Set’s references to objects are strongly held and will not allow for garbage collection. This can get expensive if
Maps/Sets reference large objects that are no longer needed, such as DOM elements that have already been removed from the DOM.
To remedy this, ES6 also introduces two new weak collections called
WeakSet. These collections are ‘weak’ because they allow for objects which are no longer needed to be cleared from memory.
WeakMap is the third new ES6 collection we’ll cover.
WeakMaps are similar to normal
Maps, albeit with fewer methods and the aforementioned difference with regards to garbage collection.
Code Examples: http://codepen.io/DevelopIntelligenceBoulder/pen/vLexWe
WeakMaps have several popular use cases. They can be used to keep an object’s private data private, and they can also be used to keep track of DOM nodes/objects.
Private data use case
WeakMap here simplifies the process of keeping an object’s data private. It is possible to reference the Person object but access to the
privateDataWeakMap is disallowed without the specific Person instance.
DOM nodes use case
The Google Polymer project uses
WeakMaps in a piece of code called PositionWalker. “PositionWalker keeps track of a position within a DOM subtree, as a current node and an offset within that node.” WeakMap is used to keep track of DOM node edits, removals, and changes:
WeakSets are Set Collections whose elements can be garbage collected when objects they are referencing are no longer needed.
WeakSets do not allow for iteration. Their uses cases are rather limited (for now, at least). Most early adopters say that
WeakSets can be used to tag objects without mutating them. ES6-Features.org has an example of adding and deleting elements from a WeakSet in order to keep track of whether or not the objects have been marked:
Map All Things? Records vs. Collections
MDN has has a nice list of questions to determine when to use an object or a keyed collection:
- Are keys usually unknown until run time, do you need to look them up dynamically?
- Do all values have the same type, and can be used interchangeably?
- Do you need keys that aren’t strings?
- Are key-value pairs often added or removed?
- Do you have an arbitrary (easily changing) amount of key-value pairs?
- Is the collection iterated?
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com, including the EdgeHTML issue tracker, where you can report or search EdgeHTML issues, such as problems with site rendering or standards compliance.Also, visit the Edge blog to stay updated and informed from Microsoft developers and experts.