Frontend Academy · Lesson

Object Destructuring and Spread

Extract object properties with destructuring, clone and merge objects with the spread operator, and use rest parameters in function signatures.

Object Destructuring and Spread is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Destructuring?

Destructuring extracts values from objects and arrays into named variables. It's shorthand for multiple property access statements — it makes code concise and clearly communicates which properties are used.

Object Destructuring Basics

Use curly braces on the left side of an assignment to extract named properties.

const user = { name: 'Alice', age: 30, role: 'admin' };

// Without destructuring:
const name = user.name;
const age = user.age;

// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age);  // 30

Renaming Destructured Variables

Use property: newName syntax to rename a property while destructuring. Useful when the property name conflicts with an existing variable or isn't descriptive enough.

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

Default Values in Destructuring

If a property is undefined, a default value is used. Combine with renaming.

const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)

Nested Object Destructuring

Destructure nested objects by providing nested patterns.

const order = {
  id: 42,
  customer: { name: 'Bob', email: 'bob@example.com' },
  total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'

Array Destructuring

Use square brackets to destructure arrays by position. Skip elements with commas.

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

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

Function Parameter Destructuring

Destructure directly in function parameters for cleaner APIs and self-documenting code. Very common in React component functions.

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' });          // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'

The Spread Operator on Objects

The spread operator { ...obj } creates a shallow copy of an object and can merge objects. Later keys override earlier ones when keys collide.

const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }

The Spread Operator on Arrays

[...arr] creates a shallow copy of an array. Use spread to concatenate arrays and to add items at the start or end immutably.

const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base];   // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]

Rest Syntax in Destructuring

The rest syntax collects remaining properties or elements into a new object or array. Rest must be the last pattern.

const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

Shallow vs Deep Copy

Both spread and destructuring create shallow copies. Nested objects and arrays are still shared references. Deep clone with structuredClone(obj) (modern) or JSON.parse(JSON.stringify(obj)) (legacy).

const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99;           // a.x is still 1 (shallow copy OK)
b.nested.y = 99;    // a.nested.y is now 99! (reference shared)

Quick Check

What does const { a, ...rest } = obj do?

Recap: Destructuring and Spread

Object destructuring extracts named properties. Array destructuring extracts by position. Rename with colon, set defaults with =. Nested patterns for deep objects. Spread creates shallow copies and merges objects/arrays. Rest collects remaining properties/elements.

Frequently asked questions

Is the “Object Destructuring and Spread” lesson free?

Yes — the full text of “Object Destructuring and Spread” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Object Destructuring and Spread”?

Extract object properties with destructuring, clone and merge objects with the spread operator, and use rest parameters in function signatures. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Object Destructuring and Spread” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy