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!


  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point…

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn’t a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven…

Leave Your Comment