Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Arrays

Assigning the values in the array to variables

let [a, b] = [1, 2];
console.log(a, b);
//=> 1 2

Combine with spread/rest operator (accumulates the rest of the values)

let [a, ...b] = [1, 2, 3];
console.log(a, b);
// => 1 [ 2, 3 ]

Omit values

const address = [221, 'Baker Street', 'London'];
const [ houseNo, , city ] = address;
console.log(houseNo, city)
// 221 'London'

Swap values without a temp variable

var a = 1, b = 2;
[b, a] = [a, b];
console.log(a, b);
// => 2 1

Objects

Selecting only some of the fields to destructure

const details = { firstName: 'Code', lastName: 'Burst', age: 22 };
const { firstName, age } = details;
console.log(firstName, age);
// Code 22

Combines spread and destructuring

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Advanced Usage

First understand this case

const { user } = {user: "Name1"};
console.log(user);

Now, think about how the above is being applied to the parameter passed to the map function.

var users = [
  { user: "Name1" },
  { user: "Name2" },
  { user: "Name2" },
  { user: "Name3" }
];

var names = users.map( ({ user }) => user );
console.log(names);
// => [ 'Name1', 'Name2', 'Name2', 'Name3' ]

In a for of loop

var users = [
  { user: "Name1" },
  { user: "Name2", age: 2 },
  { user: "Name2" },
  { user: "Name3", age: 4 }
];

for (let { user, age = "DEFAULT AGE" } of users) {
  console.log(user, age);
}

// => Name1 DEFAULT AGE
// => Name2 2
// => Name2 DEFAULT AGE
// => Name3 4

Resources

Object and Array Destructuring in JavaScriptui.dev

Destructuring - JavaScript | MDNMDN Web Docs