DEV Community

JavaScript object destructuring usages you must know

Tapas Adhikary on January 18, 2022

Introduction We use JavaScript objects to store data and retrieve it later. We store data(aka information) in key-value pairs. The key-v...

Read full post

Daniel Gropp • Jan 18 '22 • Edited

Nice 😎 this is an amazing and very useful feature. Another useful thing with object destructing is to destruct some properties and then use the spread operator to get the rest.

const obj = {name: “Moses”, age: 120, country: “Egypt”};
const {name, …rest} = obj;
console.log(name); // “Moses”
console.log(rest); // {age: 120, country: “Egypt”}

Thinh Nguyen • Jan 21 '22 • Edited

Since it is ..., it's not sread operator.

In Object Destructuring, these three dots is rest propertises,

Rest in Object Destructuring
The Rest/Spread Properties for ECMAScript proposal (stage 4) adds the rest syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

Tapas Adhikary • Jan 18 '22

Awesome Daniel, Thanks for adding to the list. Have a great day.

Jon Randy 🎖️ • Jan 18 '22

const str = 'Kumquat'
const {length, [length-1]:last} = str

console.log(length) // 7
console.log(last) // 't'

Stefan Grbic • Jan 19 '22

I was playing a bit with at(), but it's not supported in all browsers.

const str = 'Kumquat'
const {length, last = str.split('').at(-1) } = str;

console.log(length) // 7
console.log(last) // 't'

Tapas Adhikary • Jan 18 '22

Mindblowing. Thanks, John for sharing.

Parth Prajapati • Jan 19 '22

Here's one more for you.

// using destructuring to optionally add properties to object;

const isEmployee = true;

const person = {
  name: 'xyz',
  age: 28,
  ...isEmployee ? {     // if isEmployee is true, it will destructure the employee object
    employeeId: 'G548',
    department: 'procurement'
  } : {},   // else it will destructure this empty object
};

Tapas Adhikary • Jan 19 '22

Super. Thanks!

official_dulin • Feb 7 '22 • Edited

A lot of times, you don't need destructuring. Reasons:

Avoiding variable conflicts
Keep context and enhance readability

Tapas Adhikary • Feb 8 '22

You can use aliases for the # 1 point.

2, agree but when you see the entire dev ecosystem(like with React I see) using it, I think, it is better to contribute that way.

Hey, thanks a lot for giving it a read and posting your views.

Froxx93 • Jan 25 '22

I would advise against variable definitions during destructing like this:

const {name, dept, message = `${name} is ${dept}`} = employee;

What you're actually doing here is simply defining a default value for employee's property message. So as a side effect if your object actually has a property with that name, it will simply override your default value.

const employee = {
  name: 'John',
  dept: 'Service',
  message: 'This is me!'
}
const {name, dept, message = `${name} is ${dept}`} = employee;
console.log(message); // logs 'This is me!'

It works, and you could still use it, but be aware of what's actually happening and consider writing 1 line of extra code to prevent possible unexpected behaviour.

Apart from that – A good overview to destructing. Gj!

PhyberApex • Jan 18 '22

Awesome article! I use destruction all the time. Two things I find confusing tho is that nesting and alias share the colon operator (if you look closely they differ in syntax but I find it confusing). Same with default value and assignment to new attribute. So if you want to create a new attribute you need to make sure that one does never already exist on the object or you might get unwanted results.

~Cheers

Tapas Adhikary • Jan 18 '22

Thank you! I completly agree.

olsard • Jan 24 '22

Great! Thanks for sharing.

Tapas Adhikary • Jan 24 '22

Welcmome 😀

Jack McBride • Jan 27 '22

Hi just testing the comment indentation levels on dev.to

Tapas Adhikary • Jan 27 '22

Test passed? 😅

Jack McBride • Jan 27 '22

I'm building a blog site and im in the process of adding nested replies to comments, I wanted to see how the ui here handled nested comments. I wonder how far down you can go and will it keep indenting