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!
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![jQuery Comment Preview]()
I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday.
The XHTML
The CSS
The jQuery JavaScript
On the keypress and blur events, we validate and...
![CSS Scoped Styles]()
There are plenty of awesome new attributes we've gotten during the HTML5 revolution: placeholder, download, hidden, and more. Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...
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.