Aliases with JavaScript Destructuring

By  on  

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!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

Discussion

  1. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!