What the Heck can you destruct a destructor?
By: 
Hey Brad ECMAScript 2015 added Object Destructuring assignment but I was wondering can you destruct a nested object?
I see so the question is what if I was given req.body but I’m just interested in req.body.device.id do I have to use the full name or can I destruct the object so that I only get a reference to the ID?
const req = {
body: {
device: {
id: 'hello',
},
hello: 'world',
},
};
Given the above how would I destruct this object to just get a reference to the id property?
Destructuring
For those unfamiliar with destructuring it is a new feature in ES2015 which lets you decompose an object and pluck out a property from the object.
const myObject = { hello: 'world' };
const { hello } = myObject;
console.log(`hello ${hello}`);
// prints hello world
In the above we take the object myObject which has a property called hello and destruct it to just pull out the hello property and store it in a const variable named hello. This way we can access the hello property without needing a reference to the parent object.
Deep Matching Object Destruction
So it turns out destructing a destructed property has a name and it is Deep Matching Object Destruction.
const { device: { id }, hello: world } = Object.assign({ device: { id: '', type: '' }, client: { type: '' } }, req.body)
What is going on above is that I’m destructing req.body by plucking the value at req.body.device into a variable called device but then providing it an alias but instead of using a variable name I use another destruct assignment ({ id }). This will actually be destructing the nameless alias, since I didn’t actually provide the alias a name, into the reference id.
Wait what is the point of the Object.assign?
Ah yes well that is for safety. See we are trying to destruct req.body.device.id but if req.body does not have a device property it will be undefined and undefined can not be deconstructed thus an error will be thrown. Here I was using Object.assign to provide default values to the req.body.device property so if it does not exist it won’t blow up.
Of course their is a better way to do that and that is to use defaults in your destruction assignment itself.
You can provide default values when destructing to apply to the variable if the object is missing the requested property
const myObject = {};
const { hello: world = 'world' } = myObject;
console.log(`hello ${world}`);
// prints hello world
We can use this syntax to ensue that if req.body is missing the device property things won’t explode
const { device: { id } = {}, hello: world = '' } = req.body
So now if req.body is empty device will default to an empty object which can be destructed but since id is missing it will default automatically to undefined per the way JavaScript object property look up works so id will be undefined which we can write handlers for without the need to catch an exception.
So yes you can deconstruct a nested object via Deep Matching Object Destruction.
Until next time think imaginatively and design creatively
