Destructuring is great for referencing pieces of objects or arrays. I find it to be very useful, and fun.

If you're writing code like

var thing = array[0];
var otherThing = array[1];

or

var name = thing.name;
var age = thing.age;
var height = thing.height;
var userId = thing.id;

Then you've come to the right place.

In this post I'll show some common uses of destructuring that simplify the above examples, and more.

Example 1: Destructuring Arrays

Here are some common array destructuring patterns :

• Get the first element of an array
• Get the first element, and the rest of the elements
• Get the name property from the first element of the array
• Get the name property and then assign it to a variable called firstName
• Get the second element from the array

Outputs

{ name: 'Bob' }
[ { name: 'Sam' }, { name: 'Tom' } ]
Bob
Bob
{ name: 'Sam' }

Example 2: Destructuring Objects

Here are some common object destructuring patterns

• Get the title property of an object
• Get the title and pages property of an object
• Get the height property off an object, and name it bookHeight
• Get the ISBN property, which will default to '0000000'
• Get the title property, and everything else collected into a variable named rest

Outputs

A book title
{ title: 'A book title', pages: 55 }
100
0000000
{ pages: 55, height: 100, weight: 2, price: 3.5 }

Example 3: Destructuring Parameters

In this example we've got some common destructuring patterns for function parameters

• Capturing many arguments in an array
• Getting the name property of an object
• Getting the first element of an array, and the remainder of the array
• Unpacking an array into a new array, with a new element at the end

Outputs

[ 'Hello', 'World' ]
Micah
[ 'Second', 'Third' ]
[ 'First', 'Second' ]

Conclusion

If you haven't been using destructuring, you should try it out. It's a great way to boil objects down into what you need. If you've got a favorite destructure that I didn't cover, put it down in the comments