JavaScript objects and arrays hold collections of values. Pulling individual values out of them is something you do constantly. Before destructuring, that meant writing a separate line for each value you needed. After destructuring, it means writing one line that does all of it at once.

Destructuring is a syntax that lets you unpack values from arrays and properties from objects into individual variables in a single, readable statement. It does not change what the language can do. It changes how much code you have to write to do it.

What Destructuring Means

The word comes from the idea of taking a structured thing apart. An object or array has a structure: a shape made of keys and values, or positions and values. Destructuring lets you pull pieces out of that structure and give them names you can use directly.

Before destructuring existed, extracting values from an object looked like this:

const user = { name: "Alice", age: 30, city: "London" };

const name = user.name;
const age = user.age;
const city = user.city;

Three values, three lines, each one reaching into the object with dot notation. This works, but it is repetitive. You write user. three times, and the variable names end up identical to the property names. Destructuring collapses all of that into one line.

Destructuring Arrays

Array destructuring pulls values out by position. The variables you declare on the left correspond to elements in the array from left to right.

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
console.log(third);  // blue

The square brackets on the left mirror the square brackets of the array. The first variable gets the first element, the second variable gets the second, and so on.

You do not have to capture every element. Skip positions you do not need using commas:

const [, second, , fourth] = [10, 20, 30, 40];
console.log(second); // 20
console.log(fourth); // 40

Each comma skips one position. The variables you do declare get the values at their corresponding positions.

One practical use case for array destructuring is functions that return multiple values as an array. React's useState hook is a well-known example:

const [count, setCount] = useState(0);

The hook returns a two-element array. Destructuring captures both values in one readable line.

Destructuring Objects

Object destructuring pulls values out by property name. The variables you declare on the left must match the keys of the object.

const user = { name: "Alice", age: 30, city: "London" };

const { name, age, city } = user;

console.log(name); // Alice
console.log(age);  // 30
console.log(city); // London

Unlike array destructuring, order does not matter here. JavaScript matches by key name, not position. { age, name } and { name, age } both work identically.

You can also rename a variable while destructuring if the property name is not what you want to use:

const { name: username, age: userAge } = user;

console.log(username); // Alice
console.log(userAge);  // 30

The syntax reads as: take the name property and call it username. The original property name stays on the left of the colon, the new variable name goes on the right.

Object destructuring in function parameters is especially useful. Instead of receiving a whole object and accessing its properties with dot notation throughout the function, you unpack exactly what you need at the point of declaration:

function greet({ name, city }) {
  return `Hello \({name}, welcome from \){city}`;
}

greet({ name: "Alice", age: 30, city: "London" });
// Hello Alice, welcome from London

The function receives the full object but immediately destructures only the properties it actually uses. The rest of the object is ignored. This makes the function's requirements explicit at a glance.

Default Values

Both array and object destructuring let you provide default values for cases where a value might not exist. If the property or element is undefined, the default is used instead.

With objects:

const settings = { theme: "dark" };

const { theme, language = "en", fontSize = 14 } = settings;

console.log(theme);    // dark
console.log(language); // en
console.log(fontSize); // 14

theme was present in the object so it used the object's value. language and fontSize were missing, so their defaults kicked in.

With arrays:

const [primary = "blue", secondary = "gray"] = ["red"];

console.log(primary);   // red
console.log(secondary); // gray

The array only had one element. primary got the actual value, secondary fell back to its default.

Defaults only apply when the value is undefined. A property explicitly set to null or 0 or an empty string will use that value, not the default. This is an important distinction when working with data that might contain intentional falsy values.

Benefits of Destructuring

Less repetition. The before-and-after comparison is the clearest way to see this. Three lines of const x = obj.x become one line. The reduction is not just visual. There are fewer places to make a typo, fewer places to update when a variable name changes.

Clearer function signatures. When a function takes an object and destructures it in the parameter list, you can see exactly which properties it needs without reading the function body. This is especially valuable in larger codebases where understanding what a function requires at a glance saves time.

Cleaner working with APIs. API responses are almost always objects with many properties. Destructuring lets you pull out just the properties your code needs and ignore the rest, keeping your code focused on what it actually uses.

Swapping variables. Array destructuring provides a clean way to swap two variables without a temporary third variable:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

The right side creates a temporary array. Destructuring assigns the values back in reversed order. The swap happens in one line.

Nested destructuring. When objects contain other objects, you can destructure multiple levels in one statement:

const response = {
  status: 200,
  data: {
    user: {
      name: "Alice",
      role: "admin"
    }
  }
};

const { data: { user: { name, role } } } = response;

console.log(name); // Alice
console.log(role); // admin

Each level mirrors the shape of the object. This can become difficult to read when nesting is deep, so it is worth pulling intermediate values out as separate destructuring statements when readability suffers.

Wrapping Up

Destructuring is one of those features that becomes natural very quickly and then feels indispensable. It reduces the noise of extracting values from objects and arrays, makes function requirements visible at the point of declaration, and integrates naturally with patterns like default values and renaming.

The underlying behavior is the same as what you were already doing. You are still reading properties, still assigning variables. Destructuring just lets you say all of it in one line, in a form that mirrors the shape of the data you are working with.