Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Fancy FAQs with jQuery Sliders

    Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery. The HTML Simply a series of H3s and DIVs wrapper...

  • By
    Creating the Treehouse Frog Animation

    Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...

Discussion

  1. Alex

    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.

  2. undefined alias

    Hello. I’m using an alias for my destructed object property. How can I handle the property when it’s undefined?
    Thanks.

  3. Jan

    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;
    • Memo

      this is the typescript syntax

  4. mark

    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 }
  5. Maksym Kulikovskiy

    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.

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