Blog / Javascript

How to rename a destructured variable in JavaScript

How to rename a destructured variable in JavaScript

Destructuring in JavaScript is a useful tool that saves time and makes it easy to pick fields from objects, it becomes even more powerful when renaming destructured variables.

Will MaygerWill Mayger
November 24, 2021
Article

In this post we will be covering how to rename a destructured variable in JavaScript with as little technical jargon as possible so you will have everything you need right here without having to look any further!

Often in JavaScript when you destructure a variable, argument, or prop you will need or want to rename it.

It might seem confusing at first, and a little tricky to remember which way round it works but all in all it is pretty easy to rename a destructured variable in JavaScript (destructuring assignment).

How to rename a destructured variable in JavaScript

Destructuring assignment or renaming a destructured variable in JavaScript is very similar to creating a field in an object, except instead of saving a variable to a field you are naming one of the fields from the object you are destructuring.

When renaming a destructured variable in JavaScript the left hand side will be the original field in the object, and the right hand side will be the name you provide to rename it to.

Here is an example:

const data = {
  lt: 5,
  lg: 10,
};

const { lt: lat, lg: long } = data;
console.log(lat, long); // 5, 10
javascript rename destructured variable

This comes in really handy if you need to destructure lots of similar objects, like request responses so that you can then name the responses exactly how you want to avoid confusion.

Another use case is within props(react) or arguments provided into functions.

Here is an example of rename destructured argument in JavaScript:

const someFunction = ({ message, previousMessage: lastMessage }) => {
  console.log(lastMessage, message);
};

someFunction({ message: "world", previousMessage: "hello" }); // “hello world”
javascript rename destructured variable

How to rename a destructured variable in JavaScript with a default value

Destructuring a variable in JavaScript with a default value can be done in the same way in which you would ordinarily do when looking at arguments in a function.

You will need to set the default using the assignment operator.

Here is an example of how to rename a destructured variable in JavaScript with a default value with an argument:

// javascript destructuring rename with default value in argument
const someFunction = ({
  message,
  previousMessage: lastMessage = "No previous message",
}) => {
  console.log(lastMessage, message);
};

someFunction({ message: "" }); // "No previous message"
javascript destructuring rename with default value in argument

And here is an example with a standard variable:

// javascript destructuring rename with default value
const data = {};
const { lt: lat = 5, lg: long = 10 } = data;
console.log(lat, long); // 5, 10
javascript destructuring rename with default value

Summary

There we have how to rename a destructured variable in JavaScript, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.