What is destructuring assignment?

The short answer

Destructuring lets you unpack values from arrays or properties from objects into separate variables in a single statement. Instead of accessing values one by one, you extract them all at once. It is used everywhere in modern JavaScript and React.

Object destructuring

const user = { name: 'John', age: 30, city: 'NYC' };
// Without destructuring:
// const name = user.name;
// const age = user.age;
// With destructuring
const { name, age, city } = user;

Renaming variables:

const { name: userName, age: userAge } = user;
console.log(userName); // "John"

Default values:

const { name, role = 'viewer' } = user;
console.log(role); // "viewer" (user has no role property)

The default applies only when the value is undefined. A property set to null stays null.

Array destructuring

Array destructuring replaces reading each element by its index:

const colors = ['red', 'green', 'blue'];
// Without destructuring:
// const first = colors[0];
// const second = colors[1];
const [first, second, third] = colors;
// first = "red", second = "green", third = "blue"

Brackets on the right of = pack values into an array. Brackets on the left of = unpack values from an array, in order.

Skipping elements: leave the variable name out and keep the comma as a placeholder. Several gaps work the same way:

const cars = ['Ford', 'Toyota', 'Honda', 'BMW', 'Audi'];
const [, secondCar, , , fifthCar] = cars;
console.log(secondCar); // "Toyota"
console.log(fifthCar); // "Audi"

With many gaps, index access (cars[1], cars[4]) is easier to read.

Swapping variables:

let a = 1,
  b = 2;
[a, b] = [b, a]; // a = 2, b = 1

In function parameters

This is very common in React:

// Destructure props directly
function UserCard({ name, age, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}
// Destructure hook returns
const [count, setCount] = useState(0);

Options objects: with several positional arguments, the call site does not say what each value means:

drawShape('rectangle', 50, 100, '#00F');

If the function takes one object and destructures it, every value gets a label at the call site, and the order no longer matters:

function drawShape({ type, width, height, color }) {
  // ...
}
drawShape({
  type: 'rectangle',
  width: 50,
  height: 100,
  color: '#00F',
});

Calling with no argument: destructuring undefined throws:

function createChart({ type = 'line' }) {}
createChart(); // TypeError: Cannot read properties of undefined

Give the whole parameter a default of {}:

function createChart({ type = 'line' } = {}) {}
createChart(); // type is "line"

Default parameters covers this pattern in more detail.

Nested destructuring

const user = {
  name: 'John',
  address: { city: 'NYC', zip: '10001' },
};
const {
  address: { city },
} = user;
console.log(city); // "NYC"

Interview Tip

Show both object and array destructuring with a quick example each. The function parameter destructuring (React props) is the most practical example. Mentioning variable swapping with array destructuring is a nice bonus.

Why interviewers ask this

Destructuring is used in almost every line of modern JavaScript and React code. Interviewers want to confirm you are comfortable with the syntax and know its common patterns.

Conceptual