Future of JavaScript & ECMAScript 6 (ES2015) Subclassable Built-ins & New Containers
This tutorial series will take a look at the future of JavaScript. It will take an in-depth look at ECMAScript 6 (ECMAScript 2015), the latest version of the standard for JavaScript. Throughout the series, you will learn about new language features and what you can build with them. You are expected to have an understanding of JavaScript.
Level: Intermediate to Advanced.
Part 5 – Subclassable Built-ins & New Containers
With the introduction of new syntactic sugar for classes and inheritance, it is easier than ever to write object oriented code. ES2015 allows built-ins like Array, Date and DOM Elements to be subclassed (e.g. be the super class of a child class). ES2015 also introduces new subclassable containers: sets, maps and their weak variants hence why this part will cover both.
Subclassable Built-ins
ES2015 allows built-ins like Array, Date and DOM Element to be subclassed, but arrays and other built-ins are sort of exotic. They are instantiated in multiple different ways and behave a little different from regular classes or objects, so developers have to contend with a few more details.
Note: If you are curious about why subclassing JavaScript built-ins is not straightforward, Dr. Axel Rauschmayer goes into great detail in this article.
To subclass built-ins like Array, there’s just one snippet of code you need to have to ensure everything will properly function like the automatic updating of ‘length’ among other things. You absolutely need to call super() in the constructor and ideally passing in any arguments to super().
// Funky new Array subclass
class SpecialArray extends Array {
constructor (... args ) { super (... args ); }
}
Introducing Sets & Maps
Sets and Maps are classical containers that exist in most other languages. These containers are efficient data structures and are often used in CS classes and classical algorithms.
A Set is a collection of distinct values. You can also think of as an array that always has unique values. Although other languages might expose a Set container in the same way as an Array. In ES2015, Sets have their own nomenclature for adding, removing or checking for the existence of a value in the set. Take a look at the code below to learn how to use Sets:
var cities = new Set ();
// adding values
cities . add ( 'Montreal' );
cities . add ( 'NYC' );
cities . add ( 'NYC' );
// size remains two even if we add NYC twice
cities . size ; // 2
// to remove a city
cities . delete ( 'Montreal' );
// size is now 1
cities . size ; // 1
// check for existence of NYC in the set
cities . has ( 'NYC' ); //true
//You can also pass an array to a set
cities = new Set ([ 'Montreal' , 'NYC' ]);
A Map is a collection of associated key-values. This sounds terribly familiar to JavaScript developers… e.g. what is the difference between a Map and an Object. There are three major differences:
- Objects form prototype chains so you may inherit key-values from parent prototypes. This is not possible with a Map.
- An Object’s key type is limited to either a String or a Symbol. A Map has no limitation on the key
- A Map has an automatically updated size whereas an Object does not have that property.
Take a look at the code below to learn how to use Maps:
var citydensity = new Map ();
// set key values
map . set ( 'Montreal' , 898 );
map . set ( 'NYC' , 2050 );
map . size ; //2
// get a value
map . get ( 'NYC' ); // 2050
// can also iterate over values()
for ( var key of map . keys ()) {
console . log ( key + " has a population density of " + map . get ( key ));
}
for ( var [ key , value ] of map . entries ()) {
console . log ( key + " has a population density of " + value );
}
// can also use arrays to create a map
citydensity = new Map ([[ 'Montreal' , '898' ], [ 'NYC' , '2050' ]]);
Introducing WeakSets & WeakMaps
The weak variants of a Set and a Map are particularly handy for some algorithms and general UI coding. If an item held in a WeakSet or a WeakMap has no external reference, they will be removed from the container. As a result, you can combat memory leaks by making sure that an item has to have a reference outside the container and if it does not, it will be garbage collected. The usage of a WeakSet & WeakMap is the same as their strong variant. See below example:
var ui = new WeakSet ();
ui . add ( window );
ui . add ( 'foo' );
ui . has ( 'foo' ); // false
ui . has ( window ); // true
Wrapping Up
The ability to subclass built-ins and the new containers introduced in ES2015 make it easier for developers to rewrite some of their algorithms from other languages like C#, Java or C++. ES2015 expands what can be developed in JavaScript!
What's Next?
In the next parts of this tutorial series, I will be discussing different language features such as generators & iterators, proxies, and more. I will also be sharing strategies for how best to manage a transition to ES2015 either through transcompilation or using shims for different features. Stay tuned for the next edition! Seasons Greetings!
You can always reach me through Twitter or LinkedIn.
Cheers,
Rami Sayar
Missed the Previous Parts?
You can read the previous parts here: