#tech talks
#Logrocket Blog

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,

Get Weekly Developer Tips

I send out a short email each friday with code snippets, tools, techniques, and interesting stuff from around the web. Join 300+ subscribers.


Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile