Aliases with JavaScript Destructuring
Destructuring in JavaScript has totally changed the way JavaScript is written these days; code is more concise to write but but, from a visual standpoint, the syntax of the language has changed so much. Any good developer knows, however, that change is the constant we live in.
The basic idea behind destructuring in object literals is as follows:
const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;
There are cases where you want the destructured variable to have a different name than the property name; in that case, you'll use a : newName to specify a name for the variable:
// Grabs obj.x as as { otherName }
const { x: otherName } = obj;
The syntax for specifying an alternate destructured name for an object property is simple and needed. Destructuring had the capability to confuse developers, especially array destructuring and function argument destructuring, but this alias syntax is a simple trick to keep in your locker!
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Image Data URIs with PHP]()
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...
![Image Protection Using PHP, the GD Library, JavaScript, and XHTML]()
Warning: The demo for this post may brick your browser.
A while back I posted a MooTools plugin called dwProtector that aimed to make image theft more difficult -- NOT PREVENT IT COMPLETELY -- but make it more difficult for the rookie to average user...
Always have to check your site first to see any updates. Love it david. That’s where good developers stand out. Always adapting to new changes. Just trying to get hang of destructing as i’m not the smartest one in the room.
Hello. I’m using an alias for my destructed object property. How can I handle the property when it’s undefined?
Thanks.
I was looking for something like this. I wonder why the proposal for this feature didn’t follow the syntax of import statements.
Example:
const { x as otherName } = obj;this is the typescript syntax
I don’t know why people call it an “alias”. If it were an alias, changing the variable would change the object property. E.g.
let obj = { x: 1 } let { x: x_notalias } = obj x_notalias = 2 // 2 obj // { x: 1 }I think the only time you can have an alias in JavaScript is with reference types.
let obj = { x: 1 } let obj_alias = obj obj_alias.x = 2 obj // { x: 2 }When destructuring we use the word “alias” to refer to a differently named variable with the same value, rather than a different name that should reference the same variable.