The Subtleties of ES6: Collections (Part 1)

Earlier this week, the ES6 specification, officially named ECMA-262, 6th Edition, ECMAScript 2015 Language Specification , broke the last barrier and was approved as Ecma standard. Congratulations to TC39 and everyone else who helped. ES6 is over!

Even better: you no longer have to wait for the next update for 6 years. The committee is going to release a new version in about a year. Proposals for ES7 are already attached!

I think it is appropriate to celebrate this event by talking about the part of Javascript that I wanted to see in it, and which still has potential for improvement.
')

The complexities of coevolution

JS is not very similar to other programming languages, and this at times influences the evolution of a language in the most unexpected ways. A good example is modules in ES6. Modules are in other languages ​​- Racket (excellent implementation), Python. When the committee decided to add modules to ES6, why not copy the existing implementation?

JS is different, as it is executed in browsers. I / O operations can take a fair amount of time. Therefore, the ES6 module system must support asynchronous loading. It cannot periodically search for modules in different directories. Therefore, copying current implementations is not the best option.

How it affected the final design - another time. We are not going to talk about modules now. We’ll talk about what ES6 calls “keyed collections” : Set , Map , WeakSet , WeakMap . These structures are similar to hash tables in other languages. But in the course of discussions, the committee made some compromises, due to the peculiarities of JS.

Why collections?

Anyone who is familiar with JS knows that there is already something like hash tables in it - objects. A regular Object , after all, a little more than a collection of key-value pairs. You can add, iterate, read and delete properties (properties) - all as in hash tables. Why then these new features in the language?

Well, in some programs, objects are used like that, and if it works, then you have no special reason to use it on a Map or Set . However, there are problems with using normal objects:

• Objects used in this way cannot contain methods without risking a collision.
• Because of the first clause, programs must use Object.create(null) instead of simple {} , or watch carefully that the built-in methods (such as Object.prototype.toString ) are not interpreted as data.
• The keys can only be strings or, in the case of ES6, characters. Objects cannot be keys.
• There is no effective way to get the amount of properties of an object.

ES6 adds trouble to this approach — regular objects are no longer iterable , that is, they will not work with a for-of loop, an operator ... and so on.

Again, in many programs this is not important and you can continue to use regular objects. Map and Set - for other cases. To protect against collisions between data and embedded properties (properties), collections in ES6 do not expose data as properties. This means that you can not get to the data using expressions like obj.key or obj[key] . You have to write map.get(key) . Also, entries in the hash table (as opposed to properties) are not inherited using the prototype chain.
The advantage is that Map and Set , unlike ordinary objects, can have methods, both standard and custom, without conflicts.

Set

Set is a set of values. It is changeable, so elements can be added and removed. Looks like a simple array, right? But there are differences.

First, Set , unlike an array, never contains one element twice. If you try to add an existing value, nothing will happen.

 > var desserts = new Set("abcd"); > desserts.size 4 > desserts.add("a"); Set [ "a", "b", "c", "d" ] > desserts.size 4 

Note : the original used emoji, which are problematic to copy. The meaning is the same anyway.

The example above uses strings, but Set can contain any objects. And, as with strings, when you try to add a duplicate, nothing will be added.

Secondly, Set stores data in such a way that checking for the presence of an element in a set is very fast.

 > // ,   "zythum" . > arrayOfWords.indexOf("zythum") !== -1 //  true > setOfWords.has("zythum") //  true 

Indexing in Set not available.

 > arrayOfWords[15000] "anapanapa" > setOfWords[15000] // set    undefined 

Here are all available operations:

• new Set creates a new empty set.
• new Set(iterable) creates a set and fills it with data from any iterable source .
• set.size returns the number of elements in the set.
• set.has(value) returns true if the set contains the given value.
• set.add(value) adds an element to the set. As you remember, if you try to add an existing one, nothing will happen.
• set.delete(value) removes an element from a set. Like add (), returns a reference to the set, which allows you to call methods one after another (a la Fluid Interface - approx .)
• set[Symbol.iterator]() returns a new iterator over the values ​​in the set. It is usually not called directly, but this is what makes the sets iterable. So you can write for (v of set) {...} and so on.
• set.forEach(f) easiest to explain in code. This is a brief record of the following expression:
  

   for (let value of set) f(value, value, set); 

  
  This is the equivalent of .forEach() in arrays.
  
• set.clear() removes all elements.
• set.keys(), set.values(), set.entries() return various iterators. They are designed for compatibility with Map, so about them later.

Of these features, the most powerful is new Set(iterable) because it works at the level of data structures. You can use it to convert an array into a Set , remove duplicates into one line of code. Or pass the generator there, it will execute and assemble the elements into a multitude. This is also a method for copying an existing Set .

I promised you last week to complain about the new collections in ES6. Perhaps I'll start. No matter how good a Set is, there are methods that would be nice to include in the following versions of the standard:

• Functional helpers that exist in arrays of the type ap(), .filter(), .some() and .every() .
• Non-mutable operations set1.union(set2) and set1.intersection(set2).
• Methods that operate on many values ​​at once, of type set.addAll(iterable), set.removeAll(iterable) and set.hasAll(iterable)

The good news is that you can implement all this yourself using the methods provided by ES6.

Due to the volume of the material I decided to split it into 2 parts. In the second part about the Map and weak collections.