Object Destructuring | Dev Notes

DESTRUCTURING IN JAVASCRIPT

Destructuring is a special syntax that lets you take values from objects or arrays and put them into variables.

It is useful when you need data from a bigger structure and do not want to keep writing long property access again and again.

You will learn:

what destructuring is
why destructuring is useful
how object destructuring works
what happens with missing properties
how renaming works
how default values work
how destructuring works in loops
how destructuring works in function parameters
what the parameter object pattern is
what deep destructuring is

1. What is destructuring?

Destructuring lets you take values from an object or array and save them into variables.

Diagram 1. Main idea

Object or array
↓
take needed values out
↓
save them into variables

Destructuring means:

unpack data from a structure into variables

2. Why destructuring is needed

Without destructuring, you often repeat the object name many times. That makes the code longer and more noisy.

With destructuring, you extract the needed values once and then use the shorter variable names.

Without destructuring

const user = {
  name: "Jacob",
  age: 32
};

console.log(user.name); // Jacob
console.log(user.age); // 32

With destructuring

const user = {
  name: "Jacob",
  age: 32
};

const { name, age } = user;
console.log(name); // Jacob
console.log(age); // 32

Diagram 2. Before and after

Without destructuring
↓
user.name
user.age

With destructuring
↓
name
age

The result is the same, but the second version is easier to read.

3. Object destructuring

Object destructuring is used when you want to extract values from an object.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

const { title, author, isPublic, rating } = book;

const accessType = isPublic ? "public" : "private";
const message = `Book ${title} by author ${author} with rating ${rating} is in ${accessType} access!`;

Destructuring is written on the left side of the assignment. The variable names inside {} usually match the property names in the object. The order does not matter.

Diagram 3. Object destructuring structure

const { title, author, isPublic, rating } = book;

Left side:
variables to create

Right side:
object to unpack

JavaScript looks for properties with the same names inside the object and puts their values into the variables.

4. Destructuring non-existent properties

If the property exists, the variable gets its value.

If the property does not exist, the variable gets undefined.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

const { title, bookTitle, coverImage, bookRating } = book;

console.log(title); // "The Last Kingdom"
console.log(bookTitle); // undefined
console.log(coverImage); // undefined
console.log(bookRating); // undefined

This happens because the object has only title, not bookTitle, coverImage, or bookRating.

Diagram 4. Missing properties

Object has property?
│
├─ yes → variable gets value
└─ no  → variable gets undefined

5. Default values in destructuring

To avoid undefined for missing properties, you can set a default value with =.

That default value is used only if the property does not exist in the object.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

const {
  title,
  author,
  coverImage = "https://via.placeholder.com/640/480"
} = book;

console.log(title); // "The Last Kingdom"
console.log(author); // "Bernard Cornwell"
console.log(coverImage); // "https://via.placeholder.com/640/480"

Diagram 5. Default value logic

Property exists?
│
├─ yes → use real value
└─ no  → use default value

Default values are very useful when some fields may be missing.

6. Renaming a variable during destructuring

Sometimes you want the property value, but you want the variable to have a different name.

For that, use:

propertyName: newVariableName

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

const { title, author: bookAuthor, isPublic, rating: bookRating } = book;

console.log(title); // "The Last Kingdom"
console.log(bookAuthor); // "Bernard Cornwell"
console.log(isPublic); // true
console.log(bookRating); // 8.38

Here:

author goes into bookAuthor
rating goes into bookRating

Diagram 6. Renaming syntax

author: bookAuthor

Take value from property:
author

Store it in variable:
bookAuthor

7. Renaming with default values

You can combine renaming and default values.

const book = {
  title: "The Last Kingdom",
  coverImage:
    "https://images-na.ssl-images-amazon.com/images/I/51b5YG6Y1rL.jpg",
};

const {
  title,
  coverImage: bookCoverImage = "https://via.placeholder.com/640/480",
} = book;

console.log(title); // "The Last Kingdom"
console.log(bookCoverImage); // real image URL

And if the property is missing:

const book = {
  title: "The Dream of a Ridiculous Man",
};

const {
  title,
  coverImage: bookCoverImage = "https://via.placeholder.com/640/480",
} = book;

console.log(title); // "The Dream of a Ridiculous Man"
console.log(bookCoverImage); // "https://via.placeholder.com/640/480"

JavaScript first looks for the property, then saves it into the renamed variable, and if the property is missing, it uses the default value.

Diagram 7. Rename + default

coverImage: bookCoverImage = "default-url"

If coverImage exists
↓
bookCoverImage = coverImage value

If coverImage does not exist
↓
bookCoverImage = default value

8. Destructuring in loops

When you loop through an array of objects, you often keep writing book.title, book.author, and book.rating.

Destructuring makes this shorter.

Normal version

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
];

for (const book of books) {
  console.log(book.title);
  console.log(book.author);
  console.log(book.rating);
}

Version with destructuring inside the loop

for (const book of books) {
  const { title, author, rating } = book;

  console.log(title);
  console.log(author);
  console.log(rating);
}

Shorter version

for (const { title, author, rating } of books) {
  console.log(title);
  console.log(author);
  console.log(rating);
}

Diagram 8. Destructuring in a loop

books array
↓
take one object
↓
destructure title, author, rating
↓
use short variables

This is very common when working with arrays of objects.

9. Parameter destructuring

When an object is passed into a function, you can destructure it inside the function.

Without destructuring

function printUserInfo(user) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Hobby: ${user.hobby}`);
}

printUserInfo({
  name: "Alice",
  age: 25,
  hobby: "dancing"
});

Destructuring inside the function body

function printUserInfo(user) {
  const { name, age, hobby } = user;
  console.log(`Name: ${name}, Age: ${age}, Hobby: ${hobby}`);
}

printUserInfo({
  name: "Alice",
  age: 25,
  hobby: "dancing"
});

Destructuring directly in the parameter list

function printUserInfo({ name, age, hobby }) {
  console.log(`Name: ${name}, Age: ${age}, Hobby: ${hobby}`);
}

printUserInfo({
  name: "Alice",
  age: 25,
  hobby: "dancing"
});

All three versions work, but the last one is often the cleanest when the function clearly needs only those fields.

Diagram 9. Parameter destructuring

Function gets object
↓
destructure needed fields
↓
use short variable names inside function

10. The parameter object pattern

If a function has many parameters, it becomes hard to remember what each value means and what order to pass them in.

The parameter object pattern solves this by replacing many separate parameters with one object that has named properties.

Hard-to-read version

function doStuffWithBook(title, pages, downloads, rating, isPublic) {
  console.log(title);
  console.log(numberOfPages);
}

doStuffWithBook("The Last Kingdom", 736, 10283, 8.38, true);

This call is hard to read because the meaning of each number is not obvious.

Better version

function doStuffWithBook(book) {
  console.log(book.title);
  console.log(book.pages);
}

doStuffWithBook({
  title: "The Last Kingdom",
  pages: 736,
  downloads: 10283,
  rating: 8.38,
  isPublic: true,
});

Diagram 10. Parameter object pattern

Many separate parameters
↓
harder to read

One object with named properties
↓
clearer and easier to understand

This pattern is very common in modern JavaScript.

11. Parameter object + destructuring

The parameter object pattern works even better with destructuring.

In the function body

function doStuffWithBook(book) {
  const { title, pages, downloads, rating, isPublic } = book;
  console.log(title);
  console.log(pages);
}

Directly in the function signature

function doStuffWithBook({ title, pages, downloads, rating, isPublic }) {
  console.log(title);
  console.log(pages);
}

Both versions work. The second version is usually shorter and cleaner.

Diagram 11. Best practical use

One object parameter
↓
destructure needed fields
↓
function code becomes cleaner

12. Deep destructuring

Objects often contain nested objects.

const user = {
  name: "Jacques Gluke",
  tag: "jgluke",
  stats: {
    followers: 5603,
    views: 4827,
    likes: 1308,
  },
};

At first, normal destructuring gives you the stats object itself:

const { name, tag, stats } = user;

console.log(name); // Jacques Gluke
console.log(tag); // jgluke
console.log(stats); // { followers: 5603, views: 4827, likes: 1308 }

But if you want values from inside stats, you can use deep destructuring.

Diagram 12. Nested object idea

user
│
├─ name
├─ tag
└─ stats
   ├─ followers
   ├─ views
   └─ likes

Deep destructuring lets you unpack values from inside nested objects.

13. Deep destructuring syntax

const user = {
  name: "Jacques Gluke",
  tag: "jgluke",
  stats: {
    followers: 5603,
    views: 4827,
    likes: 1308,
  },
};

const {
  name,
  tag,
  stats: { followers, views, likes },
} = user;

console.log(name); // Jacques Gluke
console.log(tag); // jgluke
console.log(followers); // 5603
console.log(views); // 4827
console.log(likes); // 1308

Here JavaScript:

finds stats
opens that nested object
extracts followers, views, and likes from it

Diagram 13. Deep destructuring flow

user
↓
stats
↓
followers, views, likes
↓
save into local variables

14. Deep destructuring with renaming and defaults

Deep destructuring can also use default values and renamed variables.

const user = {
  name: "Jacques Gluke",
  tag: "jgluke",
  stats: {
    followers: 5603,
    views: 4827,
    likes: 1308,
  },
};

const {
  name,
  tag,
  stats: { followers = 0, views: userViews = 0, likes: userLikes = 0 },
} = user;

console.log(name); // Jacques Gluke
console.log(tag); // jgluke
console.log(followers); // 5603
console.log(userViews); // 4827
console.log(userLikes); // 1308

Inside the nested object:

followers keeps the same name
views becomes userViews
likes becomes userLikes
= 0 gives fallback values if a property is missing

Diagram 14. Deep rename + default

stats: {
  followers = 0,
  views: userViews = 0,
  likes: userLikes = 0
}

Nested property
↓
can keep same name
or be renamed
and can have default value

15. Easy memory rules

Destructuring = unpack values into variables
Missing property = undefined
Default value = backup value
Renaming = property: newName
Deep destructuring = unpack nested object values

16. Quick summary

Destructuring is syntax for extracting values from objects or arrays into variables.
Object destructuring reduces repeated property access and makes code cleaner.
If a property does not exist, the variable becomes undefined.
Default values can be used to avoid undefined.
Variables can be renamed during destructuring with :.
Destructuring can be used in loops and in function parameters.
The parameter object pattern replaces many separate parameters with one object.
Deep destructuring is used for nested objects.

17. Final conclusion

If you understand these ideas:

object destructuring
default values
renaming
parameter destructuring
parameter object pattern
deep destructuring

then you already have a strong foundation for using destructuring in real JavaScript code.

This topic is very important because destructuring is used everywhere in modern JavaScript:

objects
loops
function parameters
arrays of objects
nested data from APIs

← Back