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.

📚 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:

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

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.

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.

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.

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 .

Destructure title and author from the book object.

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.

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.

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

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.

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 .

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

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary