Destructuring

Unpack arrays and objects into variables with clean, readable syntax

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.

Upgrade

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

let, const & var0%

Explanation

lets you extract values from arrays and objects into named variables in a single expression.

Object destructuring:

javascript const user = { name: 'Alice', age: 30, city: 'NY' }; const { name, age } = user; console.log(name); // 'Alice'

Rename while destructuring:

javascript const { name: userName } = user; console.log(userName); // 'Alice'

Default values:

javascript const { name, role = 'user' } = user; console.log(role); // 'user' (key didn't exist in object)

Array destructuring:

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

Nested destructuring:

javascript const { address: { city } } = { address: { city: 'Paris' } }; console.log(city); // 'Paris'

Function parameters — very common in React: ``javascript function greet({ name, age }) { return ${name} is ${age}; }

Examples

Swap variables with array destructuring

Elegant variable swap — no temp variable needed

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

Destructuring in function params

Destructuring in arrow function params — very common in React

const users = [
  { id: 1, name: 'Alice', score: 95 },
  { id: 2, name: 'Bob',   score: 82 },
];
users.map(({ name, score }) => `${name}: ${score}`);
// ['Alice: 95', 'Bob: 82']

How well did you understand this?

Next in JavaScript Core

Spread & Rest

Continue

Unlocks

Spread & Rest