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.

19 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?

    • Hitesh Kumar says:

      You can do something like this

      const person = {
      name: ‘Hitesh’,
      lastName: ‘Kumar’
      };

      let {
      lastName: lName = {}
      } = person;
      console.log(lName);

      • Aamir Afridi says:

        Nice
        Its very useful but hard to read e.g


        const {
        amplienceAssets: { images: amplienceImages = [] } = {},
        } = product

        • Charly Webster says:

          Does get a little messy

          const {
          audits: {
          metrics: {
          details: { items } = {}
          } = {},
          ‘time-to-first-byte’: {
          rawValue: firstByteRawValue = 0
          } = {}
          },
          categories = {}
          } = data;

  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!

  10. zack snyder says:

    You can also do

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

    console.log(tweet);
    console.log(fb);

  11. Vahid says:

    Very Good, But what about when one of them is undefined, What should I do for preventing error?

  12. Mathijs Segers says:

    Hi, I just want to leave this comment to clarify something about your site’s layout;
    You seem to use a custom font “freight-text-pro” with no fallbacks.

    For some reason the font does not load for me, maybe it’s not included in your stylesheet; for s&*t and giggles I’ve configured my default font to be Comic Sans. Hence all the content on this page is in Comic sans, you might want to take a look at that :-).

  13. Fabricio Nascimento says:

    Thanks, for sharing Wes Bos, you save my day.

  14. Ali says:

    I wonder what does this code do? Because below code works.

    const { } = wes.links.social

    const { _ } = wes.links.social

    • Israel Tiomno says:

      Destructuring won’t throw an error if there is no property `_`, you’ll simply get ‘undefined’.

      console.log(_) –> undefined

      You can combine that with default values, so you can get something meaningful always, even when the property doesn’t exist. Compare the following two pieces of code:

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

      const { _ = ‘default-wes-value’ } = wes.links.social

      console.log(_)

      ———————–>8——————-

      const wes = {
      first: ‘Wes’,
      last: ‘Bos’,
      links: {
      social: {
      twitter: ‘https://twitter.com/wesbos’,
      facebook: ‘https://facebook.com/wesbos.developer’,
      _: ‘some-extra-wes-content’
      },
      web: {
      blog: ‘https://wesbos.com’
      }
      }
      }

      const { _ = ‘default-wes-value’ } = wes.links.social

      console.log(_)

Leave a Reply

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