Renaming Variables During JS Destructuring Guide

When you destructure an object, the variable name normally matches the property name. But sometimes the property name on the object is not what you want in your code. Maybe it conflicts with another variable, or it is a generic name like data or id that you need to make more specific.

The colon syntax inside a destructuring pattern lets you assign a property to a variable with a different name.

The Colon Rename Syntax

The pattern is { propertyName: variableName }. The property name goes on the left of the colon, and your chosen variable name goes on the right:

javascript

const apiResponse = {
  data: { temperature: 22 },
  status: "ok"
};
 
const { data: weatherData, status } = apiResponse;
 
console.log(weatherData); // { temperature: 22 }
console.log(status);      // "ok"

The data property is extracted and assigned to a variable called weatherData. The original data name is not used as a variable. The status property is extracted without renaming because no colon was used.

When Renaming Is Useful

Avoiding Name Conflicts

When two objects have properties with the same generic name, renaming prevents collisions:

javascript

const user = { id: 1, name: "Casey" };
const post = { id: 101, title: "Hello World" };
 
const { id: userId, name } = user;
const { id: postId, title } = post;
 
console.log(userId, postId); // 1, 101

Without renaming, declaring const { id } twice would fail because you cannot have two const declarations with the same name in the same scope.

Giving Clearer Local Names

API responses often use short or cryptic keys. Renaming gives them meaningful names in your codebase:

javascript

const row = { usr_nm: "jdoe", fst_nm: "Jane", lst_nm: "Doe" };
 
const {
  usr_nm: username,
  fst_nm: firstName,
  lst_nm: lastName
} = row;
 
console.log(username); // "jdoe"

Now the rest of your code uses username and firstName instead of the database column names. For patterns that extract properties without renaming, see the article on /javascript/accessing-object-properties-in-js-full-tutorial.

Making Intent Explicit

A property called value or items tells you nothing about what it contains. A rename communicates intent:

javascript

const formState = { value: "jordan@example.com", dirty: true };
 
const { value: email, dirty: isModified } = formState;
 
console.log(email);      // "jordan@example.com"
console.log(isModified); // true

Combining Renaming with Default Values

You can rename and provide a default in the same expression. The syntax is propertyName: newName = defaultValue:

javascript

const config = { port: 3000 };
 
const { port: serverPort = 8080, host: serverHost = "localhost" } = config;
 
console.log(serverPort); // 3000 (from config, default not used)
console.log(serverHost); // "localhost" (property missing, default used)

The rename happens first, then the default applies to the new variable name.

Renaming in Nested Destructuring

You can rename properties at any level of a nested destructuring pattern. Here the source data is two levels deep, with a generic id and a snake_case display_name that both deserve clearer local names:

javascript

const response = {
  data: {
    user: { id: 42, display_name: "Alex99" }
  }
};

The destructuring pattern mirrors that shape level by level, adding a colon and a new variable name at each level that needs a clearer name than the original key:

javascript

const {
  data: {
    user: { id: userId, display_name: displayName }
  }
} = response;
 
console.log(userId);      // 42
console.log(displayName); // "Alex99"

Each level can independently rename properties. The pattern mirrors the object shape, with colons where renaming is needed.

Renaming in Function Parameters

Function parameter destructuring with renaming is a clean way to accept an object while using your own variable names:

javascript

function renderCard({ title: heading, image_url: imgSrc }) {
  console.log(heading + " -> " + imgSrc);
}
 
renderCard({ title: "Welcome", image_url: "/hero.jpg" });
// "Welcome -> /hero.jpg"

The caller passes properties with the API's naming convention. Your function uses the names that make sense internally. The mapping is explicit and visible in the function signature.

Renaming with the Rest Pattern

When you use a rest pattern to collect remaining properties, you can also rename the explicitly extracted ones:

javascript

const raw = { first_name: "Riley", last_name: "Kim", age: 30, city: "Portland" };
 
const { first_name: firstName, last_name: lastName, ...other } = raw;
 
console.log(firstName); // "Riley"
console.log(lastName);  // "Kim"
console.log(other);     // { age: 30, city: "Portland" }

The renamed variables use your clean names, and the rest object contains the untouched remaining properties with their original keys.

Common Mistake: Confusing the Direction

Beginners sometimes reverse the colon direction, thinking newName: propertyName. The correct syntax is always propertyName: newName -- the original property name comes first:

javascript

const obj = { count: 5 };
 
// Wrong: this looks for a property called "total" and assigns to "count"
const { total: count } = obj;
console.log(count); // undefined (no "total" property)
 
// Correct: "count" is the property, "total" is the new variable
const { count: total } = obj;
console.log(total); // 5

The left side of the colon is what exists on the object. The right side is what you want to call it.

For the fundamentals of destructuring without renaming, see the article on /javascript/javascript-object-destructuring-complete-guide. Renaming works the same way inside nested destructuring and function parameters covered there.