As briefly mentioned, the left-side operand of an assignment operator (... =) can be specified as a destructuring object or array pattern, like so:

let position = { x: 123, y: 456 };
let { x, y } = position;
x; // => 123
y; // => 456

These patterns typically look like Object or Array literals as they start and end with {} and [] respectively. They are, however, slightly different. 

With the destructuring object pattern, where you want to declare the identifier or property you wish to assign to, you must place it as if it were a value in an object literal. That is, where { foo: bar } usually means assign bar to foo, in a destructuring pattern, it means assign the value of foo to the identifier, bar. It is reversed. Where the name of the property of the value you wish to access matches the name that you wish to be assigned in the local scope, you can use a shorter syntax of simply { foo }, as shown here:

let message = { body: 'Dear Customer...' };

// Accessing `body` and assigning to a different name (`theBody`): 
const { body: theBody } = message;
theBody; // => "Dear Customer..."

// Accessing `body` and assigning to the same name (`body`):
const { body } = message;
body; // => "Dear Customer..."

For arrays, the slots of syntax where you would usually designate the values (that is, [here, here, and here]) are used to designate the identifiers to which you wish to assign your values, so each identifier in a sequence relates to the same index elements in the array:

let [a, b, c] = [1, 2, 3];
a; // => 1
b; // => 2
c; // => 3

You can also use the rest operator (...foo) to instruct JavaScript to assign the rest of the properties to a given identifier. Here's an example of using it within the destructuring array pattern:

let [a, b, c, ...others] = [1, 2, 3, 4, 5, 6, 7];
others; // => [4, 5, 6, 7];

And here's an example of using it within the destructuring object pattern:

let { name, ...otherThings } = {
 name: 'James', hobby: 'JS', location: 'Europe'
};
name; // => "James"
otherThings; // => { hobby: "JS", location: "Europe" }

Destructuring can also occur for object structures that involve multiple levels of hierarchy:

let city = {
  suburb: {
    inhabitants: ['alice', 'steve', 'claire']
  }
};

If we wish to extract the inhabitants array and assign it to a variable of the same name, then we can do the following:

let { suburb: { inhabitants } } = city;
inhabitants; // => ["alice", ...]

And a destructuring array pattern can be embedded in a destructuring object pattern and vice versa:

let {
  suburb: {
    inhabitants: [firstInhabitant, ...otherInhabitants]
  }
} = city;

firstInhabitant; // => "alice"
otherInhabitants: // => ["steve", "claire"]

Destructuring assignment is very useful in avoiding otherwise length, assignments like this:

let firstInhabitant = city.suburb.inhabitants[0];

However, it should be used with reservation as it can sometimes overcomplicate things for those who have to read your code. While it may appear intuitive when writing it for the first time, destructuring assignments are notoriously difficult to untangle. Consider the following statement:

const [{someProperty:{someOtherProperty:[{foo:baz}]}}] = X;

This is cognitively expensive to untangle. It would, perhaps, be more intuitive to express this logic traditionally:

const baz = X[0].someProperty.someOtherProperty[0].foo;

On the whole, destructuring assignment is an exciting and useful feature of the JavaScript language, but it should be used in a guarded way with consideration of the possibility of the confusion it can cause.