Object Destructuring and Rename Property in JavaScript

This article will explore the power of object destructuring and renaming properties in JavaScript!

Learn how to extract values and rename properties with ease, just keep on reading!

Let’s explore a few examples to gain a better understanding and start writing cleaner, more efficient code today.

What is Object Destructuring?

Object Destructuring in JavaScript is a handy tool that helps save time and makes it simple to extract specific fields from objects.

It becomes even more powerful when you want to give new names to the extracted variables.

In addition to that, object destructuring is a handy feature that offers a concise way to extract values from objects and assign them to variables. It is introduced in ECMAScript 6 (ES6).

It enables developers to unpack object values for more convenient usage.

Here’s an example of Basic Object Destructuring:

const data = {
name: "Itsourcecode",
age: 18,
Position: "Programmer",
};

To get the name, age, and profession from the person object, we can use object destructuring like this:

const { name, age, position } = data;

console.log(name); // Output: Itsourcecode
console.log(age); // Output: 18
console.log(position); // Output: Programmer

Here’s the complete code:

const data = {
name: "Itsourcecode",
age: 18,
position: "Programmer",
};

const { name, age, position } = data;

console.log(name); 
console.log(age); 
console.log(position); 

By using curly braces {} to surround the properties, we can assign them to separate variables.

This syntax simplifies object manipulation and eliminates the need for repetitive references like person.name, person.age, and so on.

Output:

Itsourcecode
18
Programmer

What is object destructuring variable name in JavaScript?

In JavaScript, object destructuring is a cool feature that lets you take values from an object and assign them to variables.

You can even give these variables new names that are different from the property names in the object.

By default, the value from an object is assigned to a variable with the same name as the key.

How to rename destructured object in JavaScript?

Object destructuring in JavaScript, allows you to extract values from an object and assign them to new variables with alternative names. This process is commonly known as “renaming” the destructured properties.

For example:

let person = {
  firstName: "It",
  lastName: "Sourcecode"
};

let { firstName: first, lastName: last } = person;

console.log(first); //It
console.log(last); // Sourcecode

Output:

It
Sourcecode

How to rename a property while using object destructuring?

In certain situations, the names of properties in an object may not match the desired variable names.

In such cases, JavaScript allows for property renaming during the destructuring process.

Let’s explore how this functionality operates:

const employee = {
fullName: "It Sourcecode",
age: 18,
position: "programmer",
address: "USA",
};

Let’s say we want to change the name of the fullName property to just name and extract the age, position, and address properties as they are.

We can accomplish this by utilizing property renaming in object destructuring in JavaScript.

const { fullName: name, age, position, address } = employee;

console.log(name); // Output: It Sourcecode
console.log(age); // Output: 18
console.log(position); // Output: programmer
console.log(address);// Output: USA

With the use of the : syntax, we can assign the value of the fullName property to the variable name, while extracting the age, position, and address properties as they are.

This added flexibility enhances the power and adaptability of object destructuring.

Here’s the complete code:

const employee = {
fullName: "It Sourcecode",
age: 18,
position: "programmer",
address: "USA",
};


const { fullName: name, age, position, address } = employee;

console.log(name); 
console.log(age); 
console.log(position); 
console.log(address);

Output:

It Sourcecode
18
programmer
USA

Conclusion

In conclusion, this article has highlighted the power and utility of object destructuring and property renaming in JavaScript.

Object destructuring simplifies the process of extracting specific values from objects, resulting in cleaner and more efficient code.

It allows developers to assign extracted values to separate variables, eliminating the need for repetitive references.

Additionally, property renaming provides flexibility by enabling developers to assign alternative names to variables during the destructuring process.

These techniques enhance code readability, improve maintainability, and increase productivity for JavaScript developers.

By mastering object destructuring and property renaming, you can write more concise, readable, and effective code.

We are hoping that this article provides you with enough information that helps you understand the JavaScript object destructuring rename.

You can also check out the following article:

• Get the first Monday of a month using JavaScript
• Auto clicker JavaScript.
• Exit a function in JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →