My book API design for beginner is getting ready. Subscribe now to get your free copies when it get published.
BlogVideos
#react
#css
#javascript
#mongodb
#tech talks
#My articles on Logrocket

Rename variables while destructuring

August 27, 2019🍿 1 min readEdit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

In my last tutorial, I covered destructuring in JavaScript briefly. If you haven’t know, what is destructuring and how to set default values while destructuring. Please check it out here

Before jumping on to renaming inside destructuring, we will see few of the cases when this is needed.

  • When the object returned from server doesn’t have better key names. Example,
const obj = {
  prop1: 'Param',
  prop2: 26,
};

In the above snippet, nobody knows what is prop1 and prop2 without knowing the details of the backend. If we destructure and use the same variable, it will make the front end code unreadable and undebuggable later on.

  • When there is similar object props in two different objects. Example,
const obj1 = {
  name: 'Param',
  age: 26, // same key `age` present in obj2
};

const obj2 = {
  firstName: 'Ahmed',
  lastName: 'John',
  age: 29, // same key `age` present in obj1
};

Now, both the object have age key, we can’t destructure both the variable as age. Instead, we need to rename either one of those.

Lets see how to do that,

for the example 1, this is how it can be destructured and renamed.

const { prop1: name, prop2: age } = obj;
console.log(name, age); // Param, 26

for the example 2,

const { age: ageOfParam, ...restOfParam } = obj1;
const { age: ageOfAhmed, ...restOfAhmed } = obj2;

console.log(ageOfParam, ageOfAhmed); // 26, 29

Is in’t it the syntax very easy to use? 😎

// Syntax

const { propKey: NewVariableName } = Object;

Destructuring is very powerful in javascript, it has lot of use cases and make the developers life easier with several usecases.

Checkout the examples here,

Subscribe for my e-book

Subscribe to get free copies of my book API design for beginners once it is published. You can see the progress of the book here.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile