Destructuring is the practice of declaring variables (either with let or const) that directly extract fields or cells from compound objects. Destructuring is typical in functional languages and Javascript has adopted several forms of destructuring that simplify coding in many ways.

Getting an object's fields

Given an object like and some code that uses it, accessing every field through the original variable produces code that is readable but long:

let message = {
  from: "James Bond",
  to: "M",
  text: "Target terminated",
};

console.log(`
From: ${message.from}
To: ${message.to}
Text: ${message.text}
`);

To make this shorter and equally readable, we can destructure the message first with:

let { from, to, text } = message;

This instruction declares 3 variables which com from the fields of message with analogous names. They are initialized with the values found inside message, so destructuring is like the inverse of object creation. If the requested fields are not in message, then the variables are simply undefined.

Once the object is destructured, showing the message is clearer and shorter:

console.log(`From: ${from}\nTo: ${to}\nText: ${text}`);

Nested objects

We can also destructure nested objects:

let header = {
  title: "King Lear",
  size: { height: 121, height: 62 }
};
const { title, size: { width } } = header;

Mapping to new names

And map the given fields to new names:

let person = {
  firstName: "James",
  lastName: "Bond"
};
// firstName -> first, lastName -> last
const { firstName: first, lastName: last } = person;
console.log(`${first} ${last}`);

Rest of fields

If we don't know the fields of an object except for two, the spread ... syntax will accumulate the "rest" of the fields:

const { text, ...other } = message;

The other variable refers to an object having all fields that are in message but which are not named text.

Destructuring parameters

In functions that receive objects, destructuring can be made directly in the header, so this function:

function showMessageText(msg) {
  const { text } = msg;
  console.log(`Text: ${text}`);
}

is exactly the same as this one

function showMessageText({ text }) {
  console.log(`Text: ${text}`);
}

Destructuring Arrays

Arrays can also be destructured using the notation:

let [a, b, c] = someArray;

Here, a, b and c will be 3 variables taking the values of the first 3 cells of the array. If the array doesn't have enough cells, the variables that are outside the range will be undefined.

Rest of cells

The spread operator ... has the same meaning that it has with objects, except it gets the rest in order:

let A = [1, 2, 3, 4, 5];
let [head, ...rest] = A;
// head = 1
// rest = [2, 3, 4, 5]