ES6 Miscellaneous New Features


Published: 2017-12-26
Updated: 2017-12-27
Web: http://fritzthecat-blog.blogspot.com/2017/12/es6-miscellaneous-new-features.html


ES6: ?

In recent Blogs I resumed the most important new ES6 features. What I left out was

In this article I will make up some other smaller ES6 topics I didn't mention yet.

ES6 Miscellaneous Tests

Click onto one of the buttons to get an example script into the text area. Below the script you find an explanation.

Description

Resume

All new ES6 features shown in this article, except proxying, have been missing in JavaScript. They are useful and valuable. Future will show whether the proxying features will make our source maintenance easier or harder. Code that is hard to read will always require more time.

As we talk about new features, there are also new Number functionalities you should look at. Did you know that is false in JavaScript, and ES6 doesn't change that?




Default parameters are assigned by simply adding an = value to the parameter declaration in function head. In this example, the function assignDefaultsToParameters() assigns "John" as default for parameter firstName, and "Doe" for lastName.

The assertions in function assignDefaultsToParameters() use the global JS variable arguments to check how many parameters have been passed to the function. That way it can ensure that mixing-in defaults has been executed correctly.

The get and set functions actually define a property that you can read from and write to. If no set is present, a write to that property will be simply ignored (no exception is thrown!).

The ES6 syntax is
get propertyName() { /* body */ }
and
set propertyName(singleValue) { /* body */ }
The body can contain any implementation you need.

This example defines an test-object with a property myName, and a getter/setter tuple that declares a property name (which actually doesn't exist). The getter returns the current value of myName property, with a prefix. The setter denies any new name by throwing an exception.

Mind that the underlying property myName still is publicly visible and writable, so this example does not demonstrate a safe write-protection mechanism!

get and set have become kind of keywords in ES6. You couldn't call testObject.name (without parentheses!) when the ES6-interpreter wouldn't treat them specially.

The new ES6 Proxy class facilitates to intercept certain operations on an object, like reading a property's value, writing to a property, or finding out whether a property exists (and some more).

This example shows a proxyDelegate wrapping a testObject. The proxy intercepts read- and write-access to any property, and the in operator.
When reading a property, it would throw an exception in case the property does not exist in the wrapped origin object.
When writing a property, it would do the same, but with a different message.
When testing whether a property is contained in wrapped object, it returns false for "name", but forwards to the in-operator of origin in any other case.

A Set is a collection that contains no duplicates.
A Map is a key-value container that contains no duplicate keys.

This example sets up a Set and tries out if duplicates are recognized. Then it sets up a Map and does the same. (Mind that a map.set() call will overwrite any preceding of the same key.) In a for-of loop it checks that no key has been stringified. Finally it ensures that also symbols and functions can be keys in maps. Try that out for Set!

The difference between a Map and an Object is that Object can not contain a key that is not a string (exceptions are ES6 symbol properties). That means, if some added key is not a string, it is stringified by the JS interpreter itself. Only the new Map provides us left-side keys that can be of any data type.

Consider also using WeakMap and WeakSet. I didn't give them an example here because garbage collection can not be triggered explicitly, and they are neither Iterable nor do they have a size property, thus they are not testable.

The new built-in class Intl.DateTimeFormat allows locale-specific date formattings. Intl most likely stands for "internationalization". (What a horrible long word!-)

You need to pass a string describing the locale to the constructor. (Do we have symbols for these?)
The example demonstrates this for American, English and German locales. Mind that they are all different!

There is also a new built-in class Intl.NumberFormat for locale-specific number formattings. Mind how fraction digits can be restricted via options-parameter. There are lots more options.


ɔ⃝ Fritz Ritzberger, 2017-12-26