Please support this book: buy it (PDF, EPUB, MOBI) or donate

10. Destructuring

10.1 Overview

Destructuring is a convenient way of extracting multiple values from data stored in (possibly nested) objects and Arrays. It can be used in locations that receive data (such as the left-hand side of an assignment). How to extract the values is specified via patterns (read on for examples).

10.1.1 Object destructuring

Destructuring objects:

  1. const obj = { first: 'Jane', last: 'Doe' };
  2. const {first: f, last: l} = obj;
  3.     // f = 'Jane'; l = 'Doe'
  4.  
  5. // {prop} is short for {prop: prop}
  6. const {first, last} = obj;
  7.     // first = 'Jane'; last = 'Doe'

Destructuring helps with processing return values:

  1. const obj = { foo: 123 };
  2.  
  3. const {writable, configurable} =
  4.     Object.getOwnPropertyDescriptor(obj, 'foo');
  5.  
  6. console.log(writable, configurable); // true true

10.1.2 Array destructuring

Array destructuring (works for all iterable values):

  1. const iterable = ['a', 'b'];
  2. const [x, y] = iterable;
  3.     // x = 'a'; y = 'b'

Destructuring helps with processing return values:

  1. const [all, year, month, day] =
  2.     /^(\d\d\d\d)-(\d\d)-(\d\d)$/
  3.     .exec('2999-12-31');

10.1.3 Where can destructuring be used?

Destructuring can be used in the following locations (I’m showing Array patterns to demonstrate; object patterns work just as well):

  1. // Variable declarations:
  2. const [x] = ['a'];
  3. let [x] = ['a'];
  4. var [x] = ['a'];
  5.  
  6. // Assignments:
  7. [x] = ['a'];
  8.  
  9. // Parameter definitions:
  10. function f([x]) { ··· }
  11. f(['a']);

You can also destructure in a for-of loop:

  1. const arr = ['a', 'b'];
  2. for (const [index, element] of arr.entries()) {
  3.     console.log(index, element);
  4. }
  5. // Output:
  6. // 0 a
  7. // 1 b

10.2 Background: Constructing data versus extracting data

To fully understand what destructuring is, let’s first examine its broader context.

JavaScript has operations for constructing data, one property at a time:

  1. const obj = {};
  2. obj.first = 'Jane';
  3. obj.last = 'Doe';

The same syntax can be used to extract data. Again, one property at a time:

  1. const f = obj.first;
  2. const l = obj.last;

Additionally, there is syntax to construct multiple properties at the same time, via an object literal:

  1. const obj = { first: 'Jane', last: 'Doe' };

Before ES6, there was no corresponding mechanism for extracting data. That’s what destructuring is – it lets you extract multiple properties from an object via an object pattern. For example, on the left-hand side of an assignment:

  1. const { first: f, last: l } = obj;

You can also destructure Arrays via patterns:

  1. const [x, y] = ['a', 'b']; // x = 'a'; y = 'b'

10.3 Patterns for destructuring

The following two parties are involved in destructuring:

  • Destructuring source: the data to be destructured. For example, the right-hand side of a destructuring assignment.

  • Destructuring target: the pattern used for destructuring. For example, the left-hand side of a destructuring assignment. The destructuring target is either one of three patterns:

  • Assignment target. For example: x

    • An assignment target is usually a variable. But in destructuring assignment, you have more options, as I’ll explain later.
  • Object pattern. For example: { first: «pattern», last: «pattern» }
    • The parts of an object pattern are properties, the property values are again patterns (recursively).
  • Array pattern. For example: [ «pattern», «pattern» ]
    • The parts of an Array pattern are elements, the elements are again patterns (recursively). That means that you can nest patterns, arbitrarily deeply:
  1. const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true };
  2. const { a: [{foo: f}] } = obj; // f = 123

10.3.1 Pick what you need

If you destructure an object, you mention only those properties that you are interested in:

  1. const { x: x } = { x: 7, y: 3 }; // x = 7

If you destructure an Array, you can choose to only extract a prefix:

  1. const [x,y] = ['a', 'b', 'c']; // x='a'; y='b';

10.4 How do patterns access the innards of values?

In an assignment pattern = someValue, how does the pattern access what’s inside someValue?

10.4.1 Object patterns coerce values to objects

The object pattern coerces destructuring sources to objects before accessing properties. That means that it works with primitive values:

  1. const {length : len} = 'abc'; // len = 3
  2. const {toString: s} = 123; // s = Number.prototype.toString
10.4.1.1 Failing to object-destructure a value

The coercion to object is not performed via Object(), but via the internal operation ToObject(). The two operations handle undefined and null differently.

Object() converts primitive values to wrapper objects and leaves objects untouched:

  1. > typeof Object('abc')
  2. 'object'
  3.  
  4. > var obj = {};
  5. > Object(obj) === obj
  6. true

It also converts undefined and null to empty objects:

  1. > Object(undefined)
  2. {}
  3. > Object(null)
  4. {}

In contrast, ToObject() throws a TypeError if it encounters undefined or null. Therefore, the following destructurings fail, even before destructuring accesses any properties:

  1. const { prop: x } = undefined; // TypeError
  2. const { prop: y } = null; // TypeError

As a consequence, you can use the empty object pattern {} to check whether a value is coercible to an object. As we have seen, only undefined and null aren’t:

  1. ({} = [true, false]); // OK, Arrays are coercible to objects
  2. ({} = 'abc'); // OK, strings are coercible to objects
  3.  
  4. ({} = undefined); // TypeError
  5. ({} = null); // TypeError

The parentheses around the expressions are necessary because statements must not begin with curly braces in JavaScript (details are explained later).

10.4.2 Array patterns work with iterables

Array destructuring uses an iterator to get to the elements of a source. Therefore, you can Array-destructure any value that is iterable. Let’s look at examples of iterable values.

Strings are iterable:

  1. const [x,...y] = 'abc'; // x='a'; y=['b', 'c']

Don’t forget that the iterator over strings returns code points (“Unicode characters”, 21 bits), not code units (“JavaScript characters”, 16 bits). (For more information on Unicode, consult the chapter “Chapter 24. Unicode and JavaScript” in “Speaking JavaScript”.) For example:

  1. const [x,y,z] = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'

You can’t access the elements of a Set via indices, but you can do so via an iterator. Therefore, Array destructuring works for Sets:

  1. const [x,y] = new Set(['a', 'b']); // x='a'; y='b’;

The Set iterator always returns elements in the order in which they were inserted, which is why the result of the previous destructuring is always the same.

10.4.2.1 Failing to Array-destructure a value

A value is iterable if it has a method whose key is Symbol.iterator that returns an object. Array-destructuring throws a TypeError if the value to be destructured isn’t iterable:

  1. let x;
  2. [x] = [true, false]; // OK, Arrays are iterable
  3. [x] = 'abc'; // OK, strings are iterable
  4. [x] = { * [Symbol.iterator]() { yield 1 } }; // OK, iterable
  5.  
  6. [x] = {}; // TypeError, empty objects are not iterable
  7. [x] = undefined; // TypeError, not iterable
  8. [x] = null; // TypeError, not iterable

The TypeError is thrown even before accessing elements of the iterable, which means that you can use the empty Array pattern [] to check whether a value is iterable:

  1. [] = {}; // TypeError, empty objects are not iterable
  2. [] = undefined; // TypeError, not iterable
  3. [] = null; // TypeError, not iterable

10.5 Default values

Default values are an optional feature of patterns. They provide a fallback if nothing is found in the source. If a part (an object property or an Array element) has no match in the source, it is matched against:

  • its default value (if specified; it’s optional)
  • undefined (otherwise) Let’s look at an example. In the following destructuring, the element at index 0 has no match on the right-hand side. Therefore, destructuring continues by matching x against 3, which leads to x being set to 3.
  1. const [x=3, y] = []; // x = 3; y = undefined

You can also use default values in object patterns:

  1. const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

10.5.1 undefined triggers default values

Default values are also used if a part does have a match and that match is undefined:

  1. const [x=1] = [undefined]; // x = 1
  2. const {prop: y=2} = {prop: undefined}; // y = 2

The rationale for this behavior is explained in the next chapter, in the section on parameter default values.

10.5.2 Default values are computed on demand

The default values themselves are only computed when they are needed. In other words, this destructuring:

  1. const {prop: y=someFunc()} = someValue;

is equivalent to:

  1. let y;
  2. if (someValue.prop === undefined) {
  3.     y = someFunc();
  4. } else {
  5.     y = someValue.prop;
  6. }

You can observe that if you use console.log():

  1. > function log(x) { console.log(x); return 'YES' }
  2.  
  3. > const [a=log('hello')] = [];
  4. > a
  5. 'YES'
  6.  
  7. > const [b=log('hello')] = [123];
  8. > b
  9. 123

In the second destructuring, the default value is not triggered and log() is not called.

10.5.3 Default values can refer to other variables in the pattern

A default value can refer to any variable, including other variables in the same pattern:

  1. const [x=3, y=x] = [];     // x=3; y=3
  2. const [x=3, y=x] = [7];    // x=7; y=7
  3. const [x=3, y=x] = [7, 2]; // x=7; y=2

However, order matters: the variables x and y are declared from left to right and produce a ReferenceError if they are accessed before their declarations:

  1. const [x=y, y=3] = []; // ReferenceError

10.5.4 Default values for patterns

So far we have only seen default values for variables, but you can also associate them with patterns:

  1. const [{ prop: x } = {}] = [];

What does this mean? Recall the rule for default values: If a part has no match in the source, destructuring continues with the default value.

The element at index 0 has no match, which is why destructuring continues with:

  1. const { prop: x } = {}; // x = undefined

You can more easily see why things work this way if you replace the pattern { prop: x } with the variable pattern:

  1. const [pattern = {}] = [];

10.5.5 More complex default values

Let’s further explore default values for patterns. In the following example, we assign a value to x via the default value { prop: 123 }:

  1. const [{ prop: x } = { prop: 123 }] = [];

Because the Array element at index 0 has no match on the right-hand side, destructuring continues as follows and x is set to 123.

  1. const { prop: x } = { prop: 123 };  // x = 123

However, x is not assigned a value in this manner if the right-hand side has an element at index 0, because then the default value isn’t triggered.

  1. const [{ prop: x } = { prop: 123 }] = [{}];

In this case, destructuring continues with:

  1. const { prop: x } = {}; // x = undefined

Thus, if you want x to be 123 if either the object or the property is missing, you need to specify a default value for x itself:

  1. const [{ prop: x=123 } = {}] = [{}];

Here, destructuring continues as follows, independently of whether the right-hand side is [{}] or [].

  1. const { prop: x=123 } = {}; // x = 123

10.6 More object destructuring features

10.6.1 Property value shorthands

Property value shorthands are a feature of object literals: If the property value is a variable that has the same name as the property key then you can omit the key. This works for destructuring, too:

  1. const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8
  2.  
  3. // Same as:
  4. const { x: x, y: y } = { x: 11, y: 8 };

You can also combine property value shorthands with default values:

  1. const { x, y = 1 } = {}; // x = undefined; y = 1

10.6.2 Computed property keys

Computed property keys are another object literal feature that also works for destructuring. You can specify the key of a property via an expression, if you put it in square brackets:

  1. const FOO = 'foo';
  2. const { [FOO]: f } = { foo: 123 }; // f = 123

Computed property keys allow you to destructure properties whose keys are symbols:

  1. // Create and destructure a property whose key is a symbol
  2. const KEY = Symbol();
  3. const obj = { [KEY]: 'abc' };
  4. const { [KEY]: x } = obj; // x = 'abc'
  5.  
  6. // Extract Array.prototype[Symbol.iterator]
  7. const { [Symbol.iterator]: func } = [];
  8. console.log(typeof func); // function

10.7 More Array destructuring features

10.7.1 Elision

Elision lets you use the syntax of Array “holes” to skip elements during destructuring:

  1. const [,, x, y] = ['a', 'b', 'c', 'd']; // x = 'c'; y = 'd'

10.7.2 Rest operator (…)

The rest operator lets you extract the remaining elements of an iterable into an Array. If this operator is used inside an Array pattern, it must come last:

  1. const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']

If the operator can’t find any elements, it matches its operand against the empty Array. That is, it never produces undefined or null. For example:

  1. const [x, y, ...z] = ['a']; // x='a'; y=undefined; z=[]

The operand of the rest operator doesn’t have to be a variable, you can use patterns, too:

  1. const [x, ...[y, z]] = ['a', 'b', 'c'];
  2.     // x = 'a'; y = 'b'; z = 'c'

The rest operator triggers the following destructuring:

  1. [y, z] = ['b', 'c']

10.8 You can assign to more than just variables

If you assign via destructuring, each assignment target can be everything that is allowed on the left-hand side of a normal assignment.

For example, a reference to a property (obj.prop):

  1. const obj = {};
  2. ({ foo: obj.prop } = { foo: 123 });
  3. console.log(obj); // {prop:123}

Or a reference to an Array element (arr[0]):

  1. const arr = [];
  2. ({ bar: arr[0] } = { bar: true });
  3. console.log(arr); // [true]

You can also assign to object properties and Array elements via the rest operator (…):

  1. const obj = {};
  2. [first, ...obj.prop] = ['a', 'b', 'c'];
  3.     // first = 'a'; obj.prop = ['b', 'c']

If you declare variables or define parameters via destructuring then you must use simple identifiers, you can’t refer to object properties and Array elements.

10.9 Pitfalls of destructuring

There are two things to be mindful of when using destructuring:

  • You can’t start a statement with a curly brace.
  • During destructuring, you can either declare variables or assign to them, but not both. The next two sections contain the details.

10.9.1 Don’t start a statement with a curly brace

Because code blocks begin with a curly brace, statements must not begin with one. This is unfortunate when using object destructuring in an assignment:

  1. { a, b } = someObject; // SyntaxError

The work-around is to put the complete expression in parentheses:

  1. ({ a, b } = someObject); // OK

The following syntax does not work:

  1. ({ a, b }) = someObject; // SyntaxError

With let, var and const, curly braces never cause problems:

  1. const { a, b } = someObject; // OK

10.10 Examples of destructuring

Let’s start with a few smaller examples.

The for-of loop supports destructuring:

  1. const map = new Map().set(false, 'no').set(true, 'yes');
  2. for (const [key, value] of map) {
  3.   console.log(key + ' is ' + value);
  4. }

You can use destructuring to swap values. That is something that engines could optimize, so that no Array would be created.

  1. [a, b] = [b, a];

You can use destructuring to split an Array:

  1. const [first, ...rest] = ['a', 'b', 'c'];
  2.     // first = 'a'; rest = ['b', 'c']

10.10.1 Destructuring returned Arrays

Some built-in JavaScript operations return Arrays. Destructuring helps with processing them:

  1. const [all, year, month, day] =
  2.     /^(\d\d\d\d)-(\d\d)-(\d\d)$/
  3.     .exec('2999-12-31');

If you are only interested in the groups (and not in the complete match, all), you can use elision to skip the array element at index 0:

  1. const [, year, month, day] =
  2.     /^(\d\d\d\d)-(\d\d)-(\d\d)$/
  3.     .exec('2999-12-31');

exec() returns null if the regular expression doesn’t match. Unfortunately, you can’t handle null via default values, which is why you must use the Or operator (||) in this case:

  1. const [, year, month, day] =
  2.     /^(\d\d\d\d)-(\d\d)-(\d\d)$/
  3.     .exec(someStr) || [];

Array.prototype.split() returns an Array. Therefore, destructuring is useful if you are interested in the elements, not the Array:

  1. const cells = 'Jane\tDoe\tCTO'
  2. const [firstName, lastName, title] = cells.split('\t');
  3. console.log(firstName, lastName, title);

10.10.2 Destructuring returned objects

Destructuring is also useful for extracting data from objects that are returned by functions or methods. For example, the iterator method next() returns an object with two properties, done and value. The following code logs all elements of Array arr via the iterator iter. Destructuring is used in line A.

  1. const arr = ['a', 'b'];
  2. const iter = arr[Symbol.iterator]();
  3. while (true) {
  4.     const {done,value} = iter.next(); // (A)
  5.     if (done) break;
  6.     console.log(value);
  7. }

10.10.3 Array-destructuring iterable values

Array-destructuring works with any iterable value. That is occasionally useful:

  1. const [x,y] = new Set().add('a').add('b');
  2.     // x = 'a'; y = 'b'
  3.  
  4. const [a,b] = 'foo';
  5.     // a = 'f'; b = 'o'

10.10.4 Multiple return values

To see the usefulness of multiple return values, let’s implement a function findElement(a, p) that searches for the first element in the Array a for which the function p returns true. The question is: what should findElement() return? Sometimes one is interested in the element itself, sometimes in its index, sometimes in both. The following implementation returns both.

  1. function findElement(array, predicate) {
  2.     for (const [index, element] of array.entries()) { // (A)
  3.         if (predicate(element, index, array)) {
  4.             // We found an element:
  5.             return { element, index };
  6.                 // Same as (property value shorthands):
  7.                 // { element: element, index: index }
  8.         }
  9.     }
  10.     // We couldn’t find anything; return failure values:
  11.     return { element: undefined, index: -1 };
  12. }

The function iterates over all elements of array, via the Array method entries(), which returns an iterable over [index,element] pairs (line A). The parts of the pairs are accessed via destructuring.

Let’s use findElement():

  1. const arr = [7, 8, 6];
  2. const {element, index} = findElement(arr, x => x % 2 === 0);
  3.     // element = 8, index = 1

Several ECMAScript 6 features allowed us to write more concise code: The callback is an arrow function; the return value is destructured via an object pattern with property value shorthands.

Due to index and element also referring to property keys, the order in which we mention them doesn’t matter. We can swap them and nothing changes:

  1. const {index, element} = findElement(···);

We have successfully handled the case of needing both index and element. What if we are only interested in one of them? It turns out that, thanks to ECMAScript 6, our implementation can take care of that, too. And the syntactic overhead compared to functions with single return values is minimal.

  1. const a = [7, 8, 6];
  2.  
  3. const {element} = findElement(a, x => x % 2 === 0);
  4.     // element = 8
  5.  
  6. const {index} = findElement(a, x => x % 2 === 0);
  7.     // index = 1

Each time, we only extract the value of the one property that we need.

10.11 The destructuring algorithm

This section looks at destructuring from a different angle: as a recursive pattern matching algorithm.

At the end, I’ll use the algorithm to explain the difference between the following two function declarations.

  1. function move({x=0, y=0} = {})         { ··· }
  2. function move({x, y} = { x: 0, y: 0 }) { ··· }

10.11.1 The algorithm

A destructuring assignment looks like this:

  1. «pattern» = «value»

We want to use pattern to extract data from value. I’ll now describe an algorithm for doing so, which is known in functional programming as pattern matching (short: matching). The algorithm specifies the operator ← (“match against”) for destructuring assignment that matches a pattern against a value and assigns to variables while doing so:

  1. «pattern» ← «value»

The algorithm is specified via recursive rules that take apart both operands of the ← operator. The declarative notation may take some getting used to, but it makes the specification of the algorithm more concise. Each rule has two parts:

  • The head (first line) describes the condition that triggers the rule.

  • The body (remaining lines) describes what happens if the rule is triggered. Let’s look at an example:

  • (2c) {key: «pattern», «properties»} ← obj 

  1.   «pattern» ← obj.key
  2.   {«properties»} ← obj
  • (2e) {} ← obj (no properties left) 
  1.   // Nothing to do

In rule (2c), the head means that this rule is executed if there is an object pattern with at least one property and zero or more remaining properties. That pattern is matched against a value obj. The effect of this rule is that execution continues with the property value pattern being matched against obj.key and the remaining properties being matched against obj.

In rule (2e), the head means that this rule is executed if the empty object pattern {} is matched against a value obj. Then there is nothing to be done.

Whenever the algorithm is invoked, the rules are checked top to bottom and only the first rule that is applicable is executed.

I only show the algorithm for destructuring assignment. Destructuring variable declarations and destructuring parameter definitions work similarly.

I don’t cover advanced features (computed property keys; property value shorthands; object properties and array elements as assignment targets), either. Only the basics.

10.11.1.1 Patterns

A pattern is either:

  • A variable: x
  • An object pattern: {«properties»}
  • An Array pattern: [«elements»] Each of the following sections describes one of these three cases.

The following three sections specify how to handle these three cases. Each section contains one or more numbered rules.

10.11.1.2 Variable
  • (1) x ← value (including undefined and null) 
  1.   x = value
10.11.1.3 Object pattern
  • (2a) {«properties»} ← undefined 
  1.   throw new TypeError();
  • (2b) {«properties»} ← null 
  1.   throw new TypeError();
  • (2c) {key: «pattern», «properties»} ← obj 
  1.   «pattern» ← obj.key
  2.   {«properties»} ← obj
  • (2d) {key: «pattern» = default_value, «properties»} ← obj 
  1.   const tmp = obj.key;
  2.   if (tmp !== undefined) {
  3.       «pattern» ← tmp
  4.   } else {
  5.       «pattern» ← default_value
  6.   }
  7.   {«properties»} ← obj
  • (2e) {} ← obj (no properties left) 
  1.   // Nothing to do
10.11.1.4 Array pattern

Array pattern and iterable. The algorithm for Array destructuring starts with an Array pattern and an iterable:

  • (3a) [«elements»] ← non_iterable assert(!isIterable(non_iterable)) 
  1.   throw new TypeError();
  • (3b) [«elements»] ← iterable assert(isIterable(iterable)) 
  1.   const iterator = iterable[Symbol.iterator]();
  2.   «elements» ← iterator

Helper function:

  1. function isIterable(value) {
  2.     return (value !== null
  3.         && typeof value === 'object'
  4.         && typeof value[Symbol.iterator] === 'function');
  5. }

Array elements and iterator. The algorithm continues with the elements of the pattern (left-hand side of the arrow) and the iterator that was obtained from the iterable (right-hand side of the arrow).

  • (3c) «pattern», «elements» ← iterator 
  1.   «pattern» ← getNext(iterator) // undefined after last item
  2.   «elements» ← iterator
  • (3d) «pattern» = default_value, «elements» ← iterator 
  1.   const tmp = getNext(iterator);  // undefined after last item
  2.   if (tmp !== undefined) {
  3.       «pattern» ← tmp
  4.   } else {
  5.       «pattern» ← default_value
  6.   }
  7.   «elements» ← iterator
  • (3e) , «elements» ← iterator (hole, elision) 
  1.   getNext(iterator); // skip
  2.   «elements» ← iterator
  • (3f) …«pattern» ← iterator (always last part!) 
  1.   const tmp = [];
  2.   for (const elem of iterator) {
  3.       tmp.push(elem);
  4.   }
  5.   «pattern» ← tmp
  • (3g) ← iterator (no elements left) 
  1.   // Nothing to do

Helper function:

  1. function getNext(iterator) {
  2.     const {done,value} = iterator.next();
  3.     return (done ? undefined : value);
  4. }

10.11.2 Applying the algorithm

In ECMAScript 6, you can simulate named parameters if the caller uses an object literal and the callee uses destructuring. This simulation is explained in detail in the chapter on parameter handling. The following code shows an example: function move1() has two named parameters, x and y:

  1. function move1({x=0, y=0} = {}) { // (A)
  2.     return [x, y];
  3. }
  4. move1({x: 3, y: 8}); // [3, 8]
  5. move1({x: 3}); // [3, 0]
  6. move1({}); // [0, 0]
  7. move1(); // [0, 0]

There are three default values in line A:

  • The first two default values allow you to omit x and y.
  • The third default value allows you to call move1() without parameters (as in the last line). But why would you define the parameters as in the previous code snippet? Why not as follows – which is also completely legal ES6 code?
  1. function move2({x, y} = { x: 0, y: 0 }) {
  2.     return [x, y];
  3. }

To see why move1() is correct, let’s use both functions for two examples. Before we do that, let’s see how the passing of parameters can be explained via matching.

10.11.2.1 Background: passing parameters via matching

For function calls, formal parameters (inside function definitions) are matched against actual parameters (inside function calls). As an example, take the following function definition and the following function call.

  1. function func(a=0, b=0) { ··· }
  2. func(1, 2);

The parameters a and b are set up similarly to the following destructuring.

  1. [a=0, b=0] ← [1, 2]
10.11.2.2 Using move2()

Let’s examine how destructuring works for move2().

Example 1. move2() leads to this destructuring:

  1. [{x, y} = { x: 0, y: 0 }] ← []

The single Array element on the left-hand side does not have a match on the right-hand side, which is why {x,y} is matched against the default value and not against data from the right-hand side (rules 3b, 3d):

  1. {x, y} ← { x: 0, y: 0 }

The left-hand side contains property value shorthands, it is an abbreviation for:

  1. {x: x, y: y} ← { x: 0, y: 0 }

This destructuring leads to the following two assignments (rules 2c, 1):

  1. x = 0;
  2. y = 0;

Example 2. Let’s examine the function call move2({z:3}) which leads to the following destructuring:

  1. [{x, y} = { x: 0, y: 0 }] ← [{z:3}]

There is an Array element at index 0 on the right-hand side. Therefore, the default value is ignored and the next step is (rule 3d):

  1. {x, y} ← { z: 3 }

That leads to both x and y being set to undefined, which is not what we want.

10.11.2.3 Using move1()

Let’s try move1().

Example 1: move1()

  1. [{x=0, y=0} = {}] ← []

We don’t have an Array element at index 0 on the right-hand side and use the default value (rule 3d):

  1. {x=0, y=0} ← {}

The left-hand side contains property value shorthands, which means that this destructuring is equivalent to:

  1. {x: x=0, y: y=0} ← {}

Neither property x nor property y have a match on the right-hand side. Therefore, the default values are used and the following destructurings are performed next (rule 2d):

  1. x ← 0
  2. y ← 0

That leads to the following assignments (rule 1):

  1. x = 0
  2. y = 0

Example 2: move1({z:3})

  1. [{x=0, y=0} = {}] ← [{z:3}]

The first element of the Array pattern has a match on the right-hand side and that match is used to continue destructuring (rule 3d):

  1. {x=0, y=0} ← {z:3}

Like in example 1, there are no properties x and y on the right-hand side and the default values are used:

  1. x = 0
  2. y = 0
10.11.2.4 Conclusion

The examples demonstrate that default values are a feature of pattern parts (object properties or Array elements). If a part has no match or is matched against undefined then the default value is used. That is, the pattern is matched against the default value, instead.