Destructuring in JavaScript

Why grab values out

An object is a bundle of labeled values. To read one, you write the object name, a dot, and the label. That's fine once. When a function uses the same values again and again, you end up typing user. over and over.

const user = { name: "Mia", age: 7, city: "Oslo" };
console.log(user.name); // prints: Mia
console.log(user.age); // prints: 7

Destructuring copies the values you want into plain variables. Your code gets shorter, with fewer dots and repeated names, and the first line shows right away which values the code needs.

Objects use curly braces

Put curly braces on the left side of the = and list the names you want. Each name must match a property name in the object. The order inside the braces does not matter, because JavaScript matches by name.

const bitsy = { name: "Bitsy", age: 2 };
const { name, age } = bitsy;
console.log(name); // prints: Bitsy
console.log(age); // prints: 2
console.log(bitsy); // prints: { name: 'Bitsy', age: 2 }

The object is unchanged afterwards. Like the toy box, it still has everything.

Two handy extras. You can give a variable a different name with a colon, and you can give a fallback with = for a property that is missing (or undefined).

const bitsy = { name: "Bitsy", age: 2 };
const { name: robotName, color = "teal" } = bitsy;
console.log(robotName); // prints: Bitsy
console.log(color); // prints: teal

If you ask for a name the object does not have and give no fallback, you get undefined.

Arrays use square brackets

Arrays work too, with square brackets on the left. Arrays have no labels, so here order matters, not names. The first spot gets the first item, the second spot gets the second, and so on.

const [first, second] = ["apple", "pear"];
console.log(first); // prints: apple
console.log(second); // prints: pear

You can pick any names you like. To skip an item, leave its spot empty with an extra comma.

const snacks = ["apple", "pear", "plum"];
const [, , last] = snacks;
console.log(last); // prints: plum

The twist: swap two variables

Normally, swapping two variables needs a third one to hold a value while you move things around. With array destructuring you can do it in one line.

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

The right side builds a small new array, [2, 1], from the current values. Then the left side unpacks it, first spot into a, second spot into b. No extra variable needed.

When to use it

• When you read several properties from the same object, such as settings or a user record.
• In function parameters, like function greet({ name, age }), so the function says up front what it expects.
• When a function returns an array of results, such as const [min, max] = range(scores).

If you only need one value once, a plain user.name is just as clear.

Rule of thumb