Today I learned a really nice piece of syntactic sugar from ECMAScript 2015 (formerly known as ES6) that I don’t believe I’ve made use of before: destructuring assignment. This breaks up a complex structure into simpler component parts. It can be used as a shorthand way of breaking up an objects members into a set of local variables that can increase legibility of your code. It also allows you to assign default values for parts that might be missing from the original structure.
For arcade.ly I don’t tend to make much use of libraries on the client side. This is because, as I’ve said elsewhere, when I started building these arcade games I wanted to see how far I could get using only the APIs built directly in to web browsers. I wanted to become more familiar with the capabilities built directly into browsers.
The server is a different story: I’ve made significant use of libraries because it’s tricky to build a Node back-end of any substance without them. Also, who really wants to write services for HTTP2 support, logging, and database access themselves?
I’ve also allowed myself to slip a bit when it comes to pages that aren’t hosting games: bootstrap’s snuck in there, I’m using the AlphaDust theme for Hexo - although the blog itself is all precompiled to static HTML - and so on. For me these aren’t the fun bits to build so I defer to the excellent work of others.
When it comes to the games I only use lodash, plus Beyonk’s excellent gdpr-cookie-consent-banner. For the latter I just wanted something that would work well across all pages and, because it’s kind of fiddly and for me not that interesting, I was happy enough to use something built by others. I’ve made a few tweaks to the behaviour, but nothing major, and just load it in as a separate bundle at the very bottom of every page so it doesn’t slow down rendering.
Recently, after a friend reported a bug that I couldn’t reproduce relating to this library, I added a global error handler that simply fires error messages, line numbers, and source files wrapped up in events to Google Analytics.
IE11 was pretty unhappy about this line of code:
And whilst IE11 does support some of ES2015 (see https://caniuse.com/#feat=es6), apparently destructuring assignment isn’t covered. Easy enough to fix.
Getting back to the code, what does the above line actually do? Quite a bit:
It assigns a number of local variables based on members of
It drills in to one of those members (
tick) and assigns the value of its
tick$$1field to a local variable (also called
It assigns default values to all local variables except
Defaults can be any type of value:
durationare set to integers;
tick$$1are set to functions
This short line of code is therefore equivalent to the much more verbose, and much harder to read:
I know which I prefer, but IE11 doesn’t agree with me unfortunately.
Some obvious and not so obvious points:
We haven’t defined
noop. For our purposes their values aren’t really important but, for the sake of completeness, I’ve provided definitions below
Note that the local variable names generally need to match the names of fields/members in the object being destructured: any variables that don’t will just be set to
undefinedunless defaults are specified (this behaviour can prove very useful though!)
There’s absolutely no requirement to destructure all fields in an object or all members of an array: you can take as many or as few of them as you like
Here’s an example showing what our
config object might look like to make the situation clearer:
And, as promised, here are the definitions for
noop functions, which we’re using as default values for
As you can see, destructuring assignments are a powerful technique for reducing bloat and making code more readable: enjoy using them!