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

One Response to Rename & Destructure Variables in ES6

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

Leave a Reply

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