Renaming

Learn to assign a property to a variable with a different name in destructuring.

Renaming

Sometimes you dislike a property name, or two variables with the same name clash. In destructuring you use a colon to assign a property to a different variable: const { title: bookTitle } = book.

Here the value of book.title goes into the bookTitle variable. No title variable is created; only bookTitle. The right-hand name becomes the variable.

Renaming with a default

You can combine renaming with a default value. Writing const { count: total = 0 } = data moves data.count into a total variable; if the property is missing, total becomes 0.

The order is: first the property (count), then a colon, then the variable name (total), then an equals sign and the default. All in one line.

Exercise Rename book properties

Create a book object with title and year properties. Use destructuring to rename title into bookTitle and year into publishYear. Then log each one separately with console.log.

Show example solution

const book = { title: "Dune", year: 1965 };
const { title: bookTitle, year: publishYear } = book;
console.log(bookTitle);
console.log(publishYear);

Test yourself

In `const { id: userId } = user`, which variable is created?
- `userId`
- `id`
- both `id` and `userId`
- no new variable is created
Show answer

`userId` — Correct. The name after the colon becomes the variable.

Complete the renaming pattern

const user = { name: "Alex" };
const { name: ____ } = user;
console.log(userName);

Show answer

const user = { name: "Alex" };
const { name: userName } = user;
console.log(userName);

Which moves `count` into `total` and defaults to `0` when missing?
- `const { count = total = 0 } = data`
- `const { total: count = 0 } = data`
- `const { count: total = 0 } = data`
- `const { count, total = 0 } = data`
Show answer

`const { count: total = 0 } = data` — Correct. First the property, then a colon, then the variable, then an equals sign and the default.
Match the concepts

colon

Renames the property
renaming

Takes a property under a new name
right-hand name

Becomes the variable name

Next lesson: Nested destructuring

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies