Today I learned: destructuring assignment in JavaScript

1 May 2020

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.

Contents
Background
Destructuring assignment example

Background

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.

What I discovered is that I had been a bit unwary in pulling the library in without looking at it in a bit more detail because its use of ES6 (and later) JavaScript syntax wasn’t playing well with Internet Explorer 11. Unbelievably IE11 still accounts for anywhere up to 2% of site users who actually play games and, whilst many of the errors wouldn’t stop them, there’s been the odd one that would, which I’ve wanted to fix. Plus, of course, I want to ensure the GDPR consent banner appears for everyone (so far I’m not bothering to hide it automatically for people outside the EU, or not covered by CCPA), and that cookies are allowed/denied accordingly.

Destructuring assignment example

IE11 was pretty unhappy about this line of code:

var { delay = 0, duration = 300, easing = identity, tick: tick$$1 = noop, css } = config;

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 config
It drills in to one of those members (tick) and assigns the value of its tick$$1 field to a local variable (also called tick$$1)
It assigns default values to all local variables except css
Defaults can be any type of value: delay and duration are set to integers; easing and tick$$1 are set to functions

This short line of code is therefore equivalent to the much more verbose, and much harder to read:

var delay = config.delay || 0,
    duration = config.duration || 300,
    easing = config.easing || identity,
    tick$$1 = (config.tick ? config.tick.tick$$1 : noop) || noop,
    css = config.css;

I know which I prefer, but IE11 doesn’t agree with me unfortunately.

Some obvious and not so obvious points:

We haven’t defined identity and 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 undefined unless defaults are specified (this behaviour can prove very useful though!)
It’s also possible to destructure the values in an array: see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment for an example
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:

var config = {
    delay: 200,
    duration: 500,
    easing: function gimmeSomeEase(thingummy) {
        var aResult = ...;
        // Maybe do some stuff here
        return aResult;
    },
    tick: {
        tick$$1: function () {
            // Do some other stuff here
        }
    },
    css: 'foreground-color: #AAAAAA'
};

And, as promised, here are the definitions for identity and noop functions, which we’re using as default values for easing and tick$$1:

    function noop() { }

    function identity(x) { return x; };

As you can see, destructuring assignments are a powerful technique for reducing bloat and making code more readable: enjoy using them!

Filed Under

Category:Web Dev

Tags:javascript · gamedev · indiedev · destructuring · es015 · es6

I'd love to hear your views.

You can drop me a line, or write your own post and send me a link. Anything interesting I receive I'll add here.

Today I learned: destructuring assignment in JavaScript

Contents

Background

Destructuring assignment example

Filed Under