What you'll be able to do

By the end of this page you should be able to pull properties out of an object and items out of an array with destructuring, set defaults when a field is missing, and avoid the classic crash when the whole object is undefined.

Previous post: Object.keys, values, and entries.

Who this is for

  • People who write const name = user.name; const id = user.id five times
  • Beginners who see const { name } = user in docs and want it in plain words
  • Anyone who hit Cannot destructure property ... of undefined

You can skip this if defaults and safe patterns already feel automatic. Come back when an API returns nothing and your destructuring line is the red error.

Object destructuring: names from keys

const user = { id: 1, name: "Asha", role: "editor" };
const { name, role } = user;
console.log(name); // "Asha"
console.log(role); // "editor"

Scenario A — read two fields for a card. Shorter than repeating user..

Scenario B — rename while pulling. const { name: displayName } = user puts the value in displayName.

Defaults when a key is missing

const settings = { theme: "light" };
const { theme, compact = false } = settings;
console.log(compact); // false

Scenario A — optional UI flag. Default keeps the page from seeing undefined.

Scenario B — default only fills undefined. If compact is explicitly false, the default does not override it — which is what you usually want.

The crash: destructuring undefined

const user = undefined;
// const { name } = user; // TypeError
const { name } = user ?? {}; // safe empty object

Scenario A — API failed and you got nothing. Guard with ?? {} or an if (!user) return before you destructure.

Scenario B — nested field missing. const { author } = post; const { name } = author ?? {}; — or wait for optional chaining habits; do not assume author exists.

Array destructuring: by position

const pair = ["html", "css"];
const [first, second] = pair;
console.log(first); // "html"

Scenario A — Object.entries pair. const [key, value] = pair.

Scenario B — skip an item. const [, second] = pair skips index 0.

Defaults work here too: const [a, b = "n/a"] = ["only"].

Function parameters

function greet({ name = "friend" }) {
  return "Hi, " + name;
}
console.log(greet({ name: "Asha" }));
console.log(greet({})); // Hi, friend
// greet(); // still throws — the argument itself is missing

Scenario A — options object. Destructuring in the parameter list is common.

Scenario B — make the whole argument optional. function greet({ name = "friend" } = {}) so greet() works.

A tiny practice file

Save as destructure.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>destructuring</title>
  </head>
  <body>
    <button id="go">Run</button>
    <pre id="out"></pre>
    <script>
      document.getElementById("go").addEventListener("click", function () {
        const user = { name: "Asha" };
        const { name, role = "reader" } = user;
        const entry = ["js", 10];
        const [topic, score] = entry;
        const missing = undefined;
        const { title = "Untitled" } = missing ?? {};
        document.getElementById("out").textContent =
          name + " / " + role + "\n" +
          topic + " = " + score + "\n" +
          "safe title: " + title;
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. Destructuring null or undefined. Guard first.

2. Mixing up rename syntax. { name: displayName } is rename, not a nested path.

3. Expecting defaults to replace null. Defaults apply to undefined, not null.

4. Array destructuring by name. Arrays use position, not key names.

5. Huge nested destructuring in one line. Split steps when it gets hard to read.

6. Forgetting parameter default = {}. greet() still crashes without it.

What to try before the next post

  1. Pull title and views from a post object.
  2. Add a default for a missing field.
  3. Destructuring a two-item entries pair.
  4. Build the tiny HTML file.

Next in this series: spread and rest on objects — copy fields into a new object, and why the copy is still shallow.

Try this next outside the series

Objects and references click faster when you connect them to state, payloads, and database-shaped data.

javascripttutorialsdevelopers