Learn with Param{ P }

#tech talks

Rename variables while destructuring

August 27, 2019🍿 1 min readEdit this post on Github

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 to my Newsletter

I share best news, articles and projects about JavaScript, React, GraphQL and real world development practices


Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile