Apps Script V8 adds destructuring from  JavaScript ES6. Legacy Apps Script already had destructuring of arrays added fairly recently, but v8 gives full a destructuring capability.

Destructuring: What is it?

It’s a way of plucking elements or property values from arrays or objects, assigning them to individual variables so they can be handled more easily and concisely.

Deconstructing arrays

Legacy Apps Script already allows you to do a subset of this, where elements are positionally extracted from an array – in this case the kind of data you’d get back from a getValues() on a sheet

With V8, you also get the  …rest syntax which allows you to assign everything else in the array that you haven’t specifically assigned to other variables.

That’s equivalent (but rather more meaningful) to something like this that you may have done in legacy Apps Script

let and const

These behave exactly as normal, so

Destructuring objects

Completely new in V8 is the ability to deconstruct objects. You can declare new variables the same as the property names of the object you want to extract from.

Assigning alternative names

The variables you declare, by default, have the same name as the property from which they were extracted, but you can change that too.

Default values

Newly declared variables can have default values in both array and object destructuring. This examples combines all those possibilities.

object …rest

Just as with arrays, you can use …rest with objects.

Skipping

You may not want every element of an array, so you can simply miss out variable names for the elements you don’t want.

Combining destructuring arrays and objects

All of those things can be combined, like this

Array arguments and destructuring

One of the big wins for destructuring is the role it plays in decluttering array arguments. Now the arguments themselves can be destructured.

For all these examples, I’m using the usual data below, which I won’t bother repeating from now on.

Passing as a plain argument.

This passes the thing that needs to be logged to the logger and is simple when only one or a few arguments.

Passing as an undestructured object

Another alternative is to pass the object, and the logger knows which property to extract

Destructing in the argument list

In this model, everything discussed destructuring (including renaming, defaulting, skipping) above can be achieved in the argument list of the receiving function.

This may not seem huge with only a few arguments, but one of the common errors in functions with many arguments is getting them in the wrong order or having to provide values for optional arguments. With destructuring the order is irrelevant, and you only need to pick out the values that are required.

Variable number of arguments

Dealing with an unknown number of variables in functions has always been a bit of a hack. A function declared with function has a special variable called arguments available for use, which is an array-like object which can be interrogated to figure out what arguments were passed. Before you can use it though, you have to convert it into a genuine array – which we can by using the slice method from the Array prototype – as below. Once that’s done, we can proceed normally, treating the argument list as an array.

The arguments variable doesn’t exist in arrow functions, but there is something better. Spread syntax.

Spread syntax

We’ve covered some of the ideas of spread syntax already (it’s like …rest but in reverse), but let’s look a little deeper. Just as in destructuring, spread syntax applies to both arrays and object literals.

Copying an array

These are all equivalent

As are these

Copying an object literal

Copying and replacing properties

Note that spreading doesn’t make a deep copy of the object. Consider this example

Gives

If you then amend jane the difference will be reflected in the doe object

Like this

So spreading will only copy pointers to other objects, not clone the object themselves.

Summary

More great cleaning up of JavaScript courtesy of ES6. These destructuring and spreading capabilities, which at first may again seem a little like syntactic sugar, have contributed greatly to  the development of state management frameworks such as Vuex and Redux for client side apps. V8 brings some of that cleanliness to Apps Script.