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
Top comments (0)