I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

Rename & Destructure Variables in ES6

Last post we took a look at an intro to destructuring. Let’s take a look at another use case which would be renaming your variables. Sometimes data comes back in some odd names, and you might not necessarily want to use a property key as the end variable name. Maybe you don’t like that variable name or it’s already taken in your scope.

const twitter = 'twitter.com';
const wes = {
  first: 'Wes',
  last: 'Bos',
  links: {
    social: {
      twitter: 'https://twitter.com/wesbos',
      facebook: 'https://facebook.com/wesbos.developer',
    },
    web: {
      blog: 'https://wesbos.com'
    }
  }
};

For example here, I already used twitter as a variable. I can’t use it again, but I’m stuck, because this object gives me twitter as a key and this object gives me twitter as a key. What you can do is you can rename them as you destructure them.

So – I want the twitter property, but I want to call it tweet. I want the facebook property, but I want to call it fb.

const { twitter: tweet, facebook: fb } = wes.links.social;

The above code will pull the wes.links.social.twitter into a variable called tweet and similarly for facebook.

This entry was posted in ES6, JavaScript. Bookmark the permalink.

9 Responses to Rename & Destructure Variables in ES6

  1. Pingback: A Dead Simple intro to Destructuring JavaScript Objects | Wes Bos

  2. Aamir Afridi says:

    I guess you cannot rename a variable and set its default value at the same time?

  3. panrada says:

    Great but what about if u wanna change only one examp. Twitter to tweet and left Facebook like facebook

  4. Toni Michel says:

    Hey! Wesbos, I’m recently following you after viewing flexbox.io and j30 videos,

    Please correct: “Last post we took a look at an intro to destrucuring”

    I ended un in a infinite loop with the word: destrucuring

    😛

  5. Alex says:

    Nice point about renaming, thanks!

    P.S. A link to ‘an intro to destrucuring.’ doesn’t work 🙂

  6. Bruno says:

    nice thanks Wesbos

  7. Peter says:

    So, in destructuring, the bit in brackets following the const declaration is actually an object? This would make sense, since when you do not want to rename a variable when using destructuring, you have a declaration that looks like const {var1, var2} = myObject. This mirrors ES6 new simplified object literal declarations that allow you to simply place a key that stands in for both the key and property if you want both to have the same name. Am I on to something here?

  8. James Barrett says:

    Awesome, thanks Wes!

  9. JP Lew says:

    very helpful, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *