Stupid ES6 tricks

Here are a few ES6 techniques that aren’t really tricks, just exploiting some of the new syntax either to reduce code, improve readability, or possibly just have fun. I’m planning on collecting more here, so please feel free to bookmark and check back every once in a while. Also, if you have some fun tricks that I don’t mention here, please write a response!

Destructuring

Destructuring is my hands-down favorite part of ES6 syntax. It’s also in Node 6 now too, so I use it on both the frontend and the backend. Check out Mozilla’s explanation if you’re not familiar with the basic concept, but TL;DR it let’s you assign variables to deeply nested parts of a value easily.

Simple examples:

Renaming

One feature of destructuring you might not know about is renaming while destructuring. If you’ve used ES6 modules, you might know of the as operator for renaming imports and wondered, as I did, why as doesn’t work in destructuring. Well, that’s because destructuring has a different syntax!

In conjunction with default parameters

Default parameters let you assign values to parameters that are not passed by the user, but what if you planned to destructure when they do pass in params? No problem… you have a “left-hand side” of an assignment (a.k.a. an lvalue) with default parameters, so you can use destructuring there too!

Destructuring itself also has default values, so you can intermix the two!

Assigns, branches, and leaves

You can destructure deeply into an object (or array!), but intermediate keys of objects don’t get assigned when you do that. What if you want both the intermediate keys (branch nodes) and some deep node too? Just ask for it! In other words, as we show in the example below, you simply declare any variable you want (intermediate in this case) and use it again as a specification for descending to another level (intermediate -> nested).

Idiomatic command line arguments for Node

Node is great for writing scripts. For command line argument you can extract them from process.argv. If you’re doing anything complicated, or really anything intended to be used by humans, you’re best off using something like yargs to parse them. But… if you’ve got a script that simply takes a small number of arguments, you can use array destructuring to skip the first two arguments (usually the node path itself and then the script path) and assign the rest to variables, e.g.

Enhanced Object Literals

The upgrades to the object literal syntax are really cool and we used some examples above with the “property value shorthand.”

The first technique is not a trick at all so much as a way to avoid binding if you don’t need it. Say you want to expose a variable or a function externally, but also want to use it within functions you’re exporting as a utility object. The technique of declaring them outside your returned object and then including them below allows you to avoid binding.

With JSX

Ok, so this is not properly ES6, but you can use some ES6 features like property value shorthand very conveniently with JSX spread/rest syntax.

Object.assign

Object.assign is a fantastic new addition that’s great for keeping things immutable (or at least only doing ephemeral mutations to intermediate objects). But did you know you can use it for setting array values too?

What are yours?

Got any favorite ES6 tricks or techniques that I missed? Respond with them below!

If you’re interested in working with us, discussing issues like these and others, please check out our jobs page and get in touch!