Top 7 JavaScript Object Destructuring Techniques
Tags: development, javascript, webdev, productivity
Published: 2022-08-08 12:47:52

---
title: Top 7 JavaScript Object Destructuring Techniques
published: true
date: 2022-08-08 10:30:31 UTC
tags: development, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/top-7-javascript-object-destructuring-techniques.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khoenln43ukf0158icr1.png
---

[JavaScript](https://en.wikipedia.org/wiki/JavaScript "Wikipedia link to JavaScript") object destructuring was introduced with the [ES6](https://www.w3schools.com/js/js_es6.asp "JavaScript ES6") update to help developers extract multiple properties from objects at once. This was revolutionary since objects are widely used in JavaScript as a complex data structure.

There are multiple object destructuring techniques available in JavaScript. As developers, we must understand these techniques to write clean code and improve our efficiency.

This article will discuss the top seven JavaScript object destructuring techniques to give you a better understanding of how and when they should be used.

## What is JavaScript object destructuring?

Object destructuring is the process of extracting multiple properties or items from objects at once. This technique is really useful when accessing object properties in JavaScript.

For example, suppose you have an object named **article** with multiple properties like in the following code example:

```js
let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: 'Chameera'
};
```

Without object restructuring, you will have to extract the properties like this:

```js
let id = article.id; 
let title = article.title;
let writer = article.writer;
```

However, if you use object destructuring, you can extract all the properties with a single line of code:

```js
let { id, title, writer } = article;

console.log(id); // 001
console.log(title); // JavaScript Object Destructuring
console.log(writer); // Chameera
```

Here, the object properties are assigned to **articleId** , **articleName** , and **writerName** , respectively. If the variables have the same name as the object properties, you can write the code more concisely as follows:

```js
let { id, title, writer } = article;

console.log(id); // 001
console.log(title); // JavaScript Object Destructuring
console.log(writer); // Chameera
```

We have seen how JavaScript object destructuring works, so let’s discuss different techniques we can use.

### 1. Nested object destructuring

As developers, we often have to deal with nested objects. With the traditional approach, we have to follow the dot notation to access the nested properties.

```js
let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: {
    name: 'Chameera'
  }
};

console.log(article.writer.name) // Chameera
```

However, object destructuring allows you to extract nested properties without using multiple destructuring assignments directly.

```js
let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: {
    name: 'Chameera'
  }
};

let { 
  id: articleId, 
  title: articleTitle, 
  writer: { 
    name: writerName 
  } 
} = article;

console.log(articleId); // 001
console.log(articleTitle); // JavaScript Object Destructuring
console.log(writerName); // Chameera
```

### 2. Destructuring function arguments

There are scenarios where we pass objects into functions and access the properties of those functions using dot notation like this:

```js
let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let displayDetails = (article) = > {
  console.log(article.title); // JavaScript Object Destructuringconsole.log(article.writer); // Chameera
};

displayDetails(article);
```

With object destructuring, we can extract the object properties from the function signature.

```js
let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let displayDetails = ({title, writer}) = > {
  console.log(title); // JavaScript Object Destructuring
  console.log(writer); // Chameera
};

displayDetails(article);
```

### 3. Destructuring with default values

Sometimes, the same types of objects might not have the exact number of properties. You can assign default values for the properties using object destructuring in such situations.

For example, suppose you are getting a list of articles from a database, and some articles do not have a subtitle. In such situations, you can assign a default value while destructuring. If the object contains a subtitle, the real value will be assigned to the variable. If not, default values will be assigned.

```js
let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let { title, subtitle = 'No Sub Title', writer} = article;

console.log(title); // JavaScript Object Destructuring
console.log(subtitle); // No Sub Title
console.log(writer); // Chameera

let article = { 
  title: 'JavaScript Object Destructuring',
  subtitle: 'Top 7 JavaScript Object Destructuring Techniques',
  writer: 'Chameera'
};

let { title, subtitle = 'No Sub Title' writer} = article;

console.log(title); // JavaScript Object Destructuring
console.log(subtitle); // Top 7 JavaScript Object Destructuring Techniques
console.log(writer); // Chameera
```

### 4. Destructuring null objects

In JavaScript, it is common to return objects from functions, and developers directly extract the properties of the returned object using object destructuring.

```js
function getArticle() {
   
  let article = { 
    title: 'JavaScript Object Destructuring',
    subtitle: 'Top 7 JavaScript Object Destructuring Techniques'
  };

  return article.
}

let { title, subtitle} = getArticle();
```

However, there can be scenarios where the returned object is null. In such situations, we need to modify the object destructuring statement to handle null objects. If not, the application will throw a **TypeError**.

```js
function getArticle() {
  return null.
}

let { title, subtitle} = getArticle(); // Type Error
let { title, subtitle} = getArticle() || {}; // No Error
```

### 5. Using the rest parameter

The rest parameter (…) allows functions to accept an indefinite number of arguments as an array.

```js
function myFunction(a, b, ...theArgs) {
  // ...
}
```

We can use this rest parameter in object destructuring as well. If there are many properties in an object, we can assign the essential values to variables and unpack all the remaining values to another object using the rest parameter.

```js
let languages = {
  language1 : 'Java', 
  language2 : 'JavaScript', 
  language3 : 'C', 
  language4 : 'Python', 
  language5 : 'C#', 
  language6 : 'C++', 
  language7 : 'Ruby'
};

let { language1, language2, ...otherLanguages } = languages;

console.log(language1); // Java
console.log(language2); // JavaScript
console.log(otherLanguages) ;
/* 
{ "language3": "C","language4" : "Python","language5": "C#","language6": "C++",
  "language7": "Ruby"
} */
```

### 6. Assigning dynamic object keys

In all the previous examples, object keys were fixed. So, can we use object destructuring if the object keys are dynamic? Yes. We can assign object keys dynamically when destructuring.

For example, suppose you have an object of users like below, and you need to extract the designation based on the username dynamically.

```js
let users = {
  Paul: 'Software Engineer',
  Mike: 'Senior Software Engineer',
  George: 'Team Lead',
  ... 
};
```

In such situations, we can restructure the object using a variable as the object key to only fetch the required value.

```js
let users = {
  Paul: 'Software Engineer',
  Mike: 'Senior Software Engineer',
  George: 'Team Lead',
  ... 
};

let userKey = 'Mike';
let { [userKey] : selectedUser } = users;

console.log(selectedUser); // Senior Software Engineer
```

Likewise, you can change the value of the **userKey** variable and fetch the user details dynamically.

### 7. Combined object and array destructuring

JavaScript supports both object and array destructuring. If you have an array with multiple objects inside, you can combine the power of both object and array destructuring to extract nested objects and their properties easily.

```js
let languages = [
  { id: 1, name: 'Java' }, 
  { id: 2, name: 'JavaScript' },
  { id: 3, name: 'C' }, 
  { id: 4, name: 'Python' },
  { id: 5, name: 'C#' },
  { id: 6, name: 'C++' },
  { id: 7, name: 'Ruby' }
];

let [, , , { name }, , ,] = languages;

console.log(name) //Python
```

As you can see, I have used commas to skip the array objects. It is a feature in JavaScript array destructuring. You can use commas to skip elements of the array and only get the required elements.

## Conclusion

In this article, I discussed seven JavaScript destructuring techniques every developer should know. However, the above list is only a subset of available object destructuring techniques.

If you haven’t used object destructuring in JavaScript before, you can start with the techniques in this article and gradually move on to others. Adopting these techniques will improve your coding skills and make your code more readable.

I hope you found this article helpful. Thank you for reading.

Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2 UI controls") is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a [free trial](https://www.syncfusion.com/downloads/essential-js2 "Free evaluation of the Syncfusion Essential Studio") to evaluate the controls today.

If you have any questions or comments, you can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in 2022 Volume 2: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-2-essential-js-2.aspx "Blog: What’s New in 2022 Volume 2: Essential JS 2")
- [Using Design Patterns in JavaScript —The Ultimate Guide](https://www.syncfusion.com/blogs/post/using-design-patterns-in-javascript-the-ultimate-guide.aspx "Blog: Using Design Patterns in JavaScript —The Ultimate Guide")
- [Pure and Impure Functions in JavaScript: A Complete Guide](https://www.syncfusion.com/blogs/post/pure-and-impure-functions-in-javascript-a-complete-guide.aspx "Blog: Pure and Impure Functions in JavaScript")
- [Introducing License Key Validation for the Essential JS 2 Platforms](https://www.syncfusion.com/blogs/post/introducing-license-key-validation-for-the-essential-js-2-platforms.aspx "Blog: Introducing License Key Validation for the Essential JS 2 Platforms")