Destructuring Assignment

Destructuring is the modern way to unpack values out of arrays and objects into their own variables — in a single, readable line. If you've ever written const name = user.name; const age = user.age; three times in a row, this lesson is about to save you a lot of typing.

Learn Destructuring Assignment in our free JavaScript course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick…

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

It's everywhere in real codebases: React props, API responses, function options, and module imports all lean on it heavily.

What You'll Learn in This Lesson

📚 Prerequisites: You should know how variables , arrays, and objects work. Destructuring is just a shortcut for reading values you already understand.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

• Download Node.js to run JavaScript on your computer
• Use your browser's Developer Console (Press F12) to test code snippets
• Create a .html file with <script> tags and open it in your browser

📦 Real-World Analogy: Destructuring is like unpacking a delivery box :

• • The box (array/object) arrives full of items
• • Instead of reaching back in every time, you lay each item on the counter with its own label
• • Arrays are unpacked by position (first item, second item…)
• • Objects are unpacked by name (the item labelled "title", the one labelled "price")

1️⃣ Array Destructuring — Unpack by Position

Wrap variable names in square brackets on the left of = . They fill up from the array in order. You can skip elements with a bare comma, and grab "the rest" with the ...rest syntax.

2️⃣ The Famous One-Line Swap

Before destructuring, swapping two variables needed a temporary third one. Now it's a single, almost self-explanatory line — a favourite in interviews and a genuinely handy trick.

3️⃣ Object Destructuring — Unpack by Name

Use curly braces. The variable name must match the property key. Order does not matter — JavaScript looks up each key by name. This is the form you'll use most often, especially with API data and configuration objects.

4️⃣ Renaming & Default Values

Two power-ups make object destructuring shine. Rename with key: newName when a property name clashes or is awkward. Add = fallback to supply a default when a value is missing. Remember: the default only kicks in for undefined , not for null or 0 .

🎯 Your Turn #1 — Pull Out Two Fields

Destructure title and author from the book object.

5️⃣ Nested Destructuring

Objects often hold other objects. You can reach inside by mirroring the shape of the data. It reads cleanly, but beware: if an intermediate object is missing, you'll get a real error — so add defaults at each level when the data might be incomplete.

6️⃣ Destructuring Function Parameters

This is where destructuring really pays off. Instead of one positional argument after another, accept a single options object and destructure it in the parameter list — complete with defaults. Callers can pass fields in any order and skip the ones they don't need.

🎯 Your Turn #2 — Swap Two Values

Use array destructuring to swap x and y in one line.

🧩 Reorder Challenge

These lines are scrambled. Reorder them so it logs Mara 90 .

Why: the object must exist before you can destructure it, and the variables must exist before you log them.

🧠 Quick Recall

Predict the output before revealing the answer.

0 — defaults only replace undefined . 0 is a real value, so it stays.

y — the leading comma skips the first element, so second grabs the one at index 1.

9 — x: renamed reads property x but stores it in a variable named renamed .

Common Errors & Fixes

• 1️⃣ Using [] for objects or {} for arrays
• 2️⃣ Destructuring null or undefined
• 3️⃣ Forgetting parentheses when assigning to existing vars
• 4️⃣ Going one level too deep into missing data

Quick Reference — Destructuring

Goal

Syntax

Array by position

const [a, b] = arr;

Object by name

const { a, b } = obj;

Rename

const { a: x } = obj;

Default

const { a = 1 } = obj;

Rest

const [first, ...rest] = arr;

In parameters

function f({ a, b } = {}) {}

Frequently Asked Questions

Lesson Complete — Destructuring Assignment!

• ✅ Arrays unpack by position with [ ]
• ✅ Objects unpack by name with { }
• ✅ Rename with key: newName , default with = value
• ✅ Destructure parameters for clean, self-documenting functions

Up next: Spread & Rest Operators — the ... that copies, merges, and gathers. 🌐

Practice quiz

Continue this course

• Previous: The this Keyword (call, apply & bind)
• Next: Spread & Rest Operators

Related lessons

• variables