ECMAScript Goodies II: Check out the ES2017 Minor Features

What are the best minor features of ES2017 and what's on the list for ES2018? This two-part series explores the latest and greatest features of ECMAScript. This part explores minor features like Object.values/Object.entries and string padding, where Part 1 covered major features.

Let's check in with ECMA International, Technical Committee 39! It turns out the 6 in ES6 does not stand for the number of years it takes for a release. I kid! Since ES6/ES2015 took so long to release (6 years, hence my jab) the committee decided to move to a yearly small-batch release instead. I'm a big fan of this and I think the momentum keeps things moving and JavaScript improving. What presents did we get for ES2017 and what's on our list for ES2018?

ES2017

In January, at the TC39 meeting, the group settles on the ECMAScript proposals that would be slated as the features of ES2017 (also referred to ES8, which probably should be nixed to avoid confusion). This list included:

Object.entries{}

This method takes what Object.values() does one step further. Looking at an object, a data structure of key-value pairs, each of those pairs is an entry. When you call Object.entries() it is returning an array containing an array for each of those entries.

String Padding

I didn't think I was going to have to say this again but, left pad. Yes, the left pad debacle of 2016 raised the attention of the JavaScript community enough for TC39 to add string padding. To be fair though, it was about time for JavaScript to have some native methods to handle Strings. ✨ Welcome padStart/padEnd to the family, which currently was just a lonely String.prototype.trim (est. ES5)!

You are all smart people so you probably can surmise what each of these methods do. So, I'll just show you some examples instead of using my words.

To review this, both methods take an integer parameter that is telling them how long the final length of the string, including the padding, should be. If you pass a number shorter or equal to the original length of the string, nothing will change. Bravo, on wasting your time (just kidding 😁). You can also pass a string and padStart/padEnd will repeatedly add each item of that string to the start or end of the original string until the length matches the passed length parameter. As you can see in my example above, since I wanted a length of 11, padStart added ` 'yum' then the 'yu' and stopped. Emoji are very important so I wanted to remind you of their tricky string lengths, more information in this handy blog post.

Developers will, more than likely, take advantage of these methods which will also let them remove libraries they were using to accomplish string manipulation. There are more methods in the pipeline: trimStart/trimEnd is currently at stage 2 (out of the 4 stages, here's the process break down again 🙂👍). This will let us trim or remove starts and ends of strings. Fun fact: this proposal started out with trimLeft and trimRight but has been updated to trimStart and trimEnd to stay consistent with padStart and padEnd. Yay, consistency! It also helps with any confusion whether a language is read right-to-left or left-to-right.

Why do we need these methods? Well the proposer, Jordan Harband, puts it well here:

There is not a single method in ECMAScript capable of simplifying a proper copy between two objects. In these days more than ever, where functional programming and immutable objects are essential parts of complex applications, every framework or library is implementing its own boilerplate in order to properly copy properties between composed objects or prototypes.

— Jordan Harband

With this addition you can now use getPrototypeOf and getOwnPropertyDescriptors with objectCreate to copy object and easily give it the same prototype and property descriptors. Before, this was most often done using Object.assign, which would grab an object's properties and symbols instead of descriptors. That approach left the risk of discarding possible accessors.

Appreciation Pause

Now, there are a lot of great people that are and have been on TC39, I would like to thank them all for their work. Doing this list has also put someone's name in writing multiple times: Jordan Harband. So, I just wanted to take a quick pause to 👏👏👏👏 Jordan, who is currently on a solid 1,325 day GitHub contributions streak as of December 1, 2017. Thanks for all you do for JavaScript, Jordan!!

Trailing Commas

I must admit, I think trailing commas looks super sloppy and I have never been a big fan.

let why = [
'really?',
'must you?',
'yuck 😝',
]

That being said, I get it. I have had many occasions where I add an item to an array, a key value pair to an object, or delete an item and have had to remove or add a comma. I am one with the concept of minimizing how many keystrokes you must use. keysleft.com says I only have 213,407,968 and I just blew through 117 in this sentence alone! I've also heard the argument for the benefits this will add to checking your git diffs since you would only need to edit one line when adding function parameters, array items, etc. TBTH I'll probably take on this convention from now on. Okay, TC39? You win! 😘

What's to Come in 2018

There is an awesome, emoji-laden table of proposals and what stages they are in located here. You can also see the finished proposals including one that is already ready for 2018 publication!

Usually, at this point we're looking at Stage 4 proposals, which are proposals that will definitely be added in the next release, and Stage 3 proposals, which are proposals that have a good chance of being included in the next release.

So far, the stage 4-ers are:

Template Literal Revision proposed by Tim Disney. Currently, the escape sequence in template literals is problematic for embedding languages like domain-specific languages. This proposal will remove the restriction on escape sequences. To understand more click here 👆.

s (dotAll) flag for regular expressions by Mathias Bynens. This proposal is all about emoji!🎈 Okay, not entirely, but it introduces the /s flag into regular expressions to make up for the dot's (.) shortcomings (like not matching with non-BMP character such as emoji). There is more to it though, so check out Mathias's proposal.

The list of stage 3-ers is a bit longer so I will give you this helpful link to see the table and an image of it down below. How nice is that 😉.

Read Part 1

As mentioned above, this is the second post in a two-part series. If you haven't seen the first part, that's where we covered the major features we listed earlier. You can check it out here.

Tara Z. Manicsic

Tara Z. Manicsic is a lifelong student, teacher, and maker. She has spent her career using JavaScript on both back-end and front-end to create applications. A Developer Advocate for Progress, Google Developer Expert, and international technical speaker, she focuses on conveying the codebase she has learned. She also works in her community launching & directing the Cincinnati Chapter of Women Who Code and the Cincinnati branch of NodeSchool.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.