Visionary. Value focused.

How you do anything is how you do everything.

ES9 new features reviews and examples

ES9 or ECMAScript version 9 was finalized on June, 2018. It brings various new features into Javascript standard that we can leverage to make our lives easier. In this post, we will discuss about them and how they help changing the way we use Javascript.

Since most details are available on other websites like Mozilla.org, w3schools, etc., I’ll just talk about scenarios that I think most of us will encounter every day.

Tl; dr;

ES9 brings us the following features:

  • JSON superset: allows string to allow unescaped \u2028 and \u2029 characters.
  • Symbol.prototype.description: expose description publicly for Symbol objects
  • Function.prototype.toString revision: prints all function’s code to the console
  • Object.fromEntries: converts an array of key-value pairs to an object
  • Well-formed JSON.stringify: converts ill-formed UTF-16 to escaped sequence string
  • String.prototype.{trimStart,trimEnd}: more options to trim string
  • Array.prototype.{flat,flatMap}: lodash/underscore-like functions

More details on the new features are listed here.

JSON superset

Details: https://github.com/tc39/proposal-json-superset

Remarks: most of us will not encounter a need for this feature, since it deals with an edge case of evaluating unicode characters.

Symbol.prototype.description

Details: https://github.com/tc39/proposal-Symbol-description

Remarks: exposing Symbol’s description can be useful when we manage a big list of symbols. Previously, given a Symbol object, we will never know what it represents until we print the object out.

const symbol = Symbol('some description');
console.log(symbol.description);
// "some description"

Function.prototype.toString

Details: https://github.com/tc39/Function-prototype-toString-revision

Remarks: this is a useful feature that I can use every day. When I have to, say, try to know what the `onClick` event handler do, without having to search through a big code base. Now I just need to print the function out, and I see it’s full source code. And in development environment, that is the full, un-minified version of the code.

const fn = () => { console.log('test'); };
fn.toString();
// "() => { console.log('test'); }"

Object.fromEntries

Details: https://github.com/tc39/proposal-object-from-entries

Remarks: I have a use case for exactly this in my previous projects. Before, I had to create a custom function to handle the conversion. This feature definitely makes my life easier.

const arr = [
  ['a', 'b'],
  ['c', 'd'],
];
const convert = (data) =>
  data.reduce((obj, keyValue) => {
    obj[keyValue[0]] = keyValue[1];
    return obj;
  }, {});
// old way
convert(arr);
// {a: 'b', c: 'd'}
// new way
Object.fromEntries(arr);
// {a: 'b', c: 'd'}

Well-formed JSON.stringify

Details: https://github.com/tc39/proposal-well-formed-stringify

Remarks: Escaping unicode characters have always been a headache for us. By integrating this into Javascript standard, our lives will continue to be easier and easier. I have spent too many hours pulling my hair out because of a stupid unicode characters not escaping correctly. As a conclusion, this feature is a life saver. You can check out the examples in the link.

String.prototype.{trimStart,trimEnd}

Details: https://github.com/tc39/proposal-string-left-right-trim

Remarks: we already have the same function, if not better in lodash. Let us take a look at the code to understand better.

const str = '       some actual string   $$   ';
_.trimStart(str);
// 'some actual string   $$   '
_.trimEnd(str);
// '       some actual string   $$'
_.trimEnd(str, '$ ');
// '       some actual string'
str.trimStart();
// 'some actual string   $$   '
str.trimEnd();
// '       some actual string   $$'

As we can see, for Lodash we can specify characters to trim as well, while the ES9 standard version does not. Therefore this feature may not be beneficial to me as much as it does to you.

Array.prototype.{flat,flatMap}

Details: https://github.com/tc39/proposal-flatMap

Remarks: quite similar to lodash’s equivalent. Therefore it will come in handy when I have to deal with environment that does not allow me to install lodash.

const arr = [1, 2, [3, 4, [5, 6]]];
array.flat();
[1, 2, 3, 4, [5, 6]]
// flatten all nested arrays
array.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

const flatArr = [1, 2];
flatArr.flatMap((val) => [val, val * 2, val * 3]);
// [1, 2, 3, 2, 4, 6];

Summary

“What’s known as bleeding-edge technology,” sez Lucas. “No proven use, high risk, something only early-adoption addicts feel comfortable with.” ― Thomas Pynchon, Bleeding Edge

Living on the bleeding-edge version may not be the wisest thing to do on production, stable product. Therefore we will need to wait for a while before these features become more stable. However, we can start using them in small projects, reaping the benefits and getting familiar before we implement them into the big projects.

As usual, if you think this is useful, let us share the knowledge. You can read about my other posts here.

3 Responses

  1. manh cuong says:

    review ok chủ thớt chuẩn đới

  2. Monicagax says:

    Hello, I want to work in your company on a voluntary basis, can you offer me anything?
    a little about me:https://about.me/soniaj.robinson

Leave a Reply

Your email address will not be published. Required fields are marked *