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:

 

Comments (0)

Skip to main content