Article Categories

Selected Reading

Replacing array of object property name in JavaScript

Javascript Web Development Object Oriented Programming

In JavaScript, you can replace property names in an array of objects using the map() method to create new objects with renamed properties. This technique is useful when you need to transform data structures or adapt objects to different naming conventions.

Syntax

const newArray = originalArray.map(item => ({
    newPropertyName: item.oldPropertyName,
    // ... other properties
}));

Example: Renaming Object Properties

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Replace Object Property Names</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            color: rebeccapurple;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Replacing Array of Object Property Names</h1>
    <div class="result"></div>
    <button class="btn">CLICK HERE</button>
    <h3>Click the button to see renamed properties</h3>
    
    <script>
        let btnEle = document.querySelector(".btn");
        let resEle = document.querySelector(".result");
        
        // Original array with 'name' property
        var person = [
            { name: "Rohan Sharma", age: 16 },
            { name: "Vinit Mehta", age: 18 },
        ];
        
        // Replace 'name' with 'fullName'
        person = person.map((item) => {
            return {
                fullName: item.name,
                age: item.age,
            };
        });
        
        btnEle.addEventListener("click", () => {
            resEle.innerHTML = "";
            person.forEach((item) => {
                resEle.innerHTML += `fullName = ${item.fullName} : Age = ${item.age}<br>`;
            });
        });
    </script>
</body>
</html>

Output

Before clicking the button, the page displays the heading and button. After clicking "CLICK HERE", the transformed data appears:

fullName = Rohan Sharma : Age = 16
fullName = Vinit Mehta : Age = 18

Alternative Methods

Using Object Destructuring

const users = [
    { name: "John", email: "john@email.com" },
    { name: "Jane", email: "jane@email.com" }
];

// Rename 'name' to 'username'
const renamedUsers = users.map(({ name, ...rest }) => ({
    username: name,
    ...rest
}));

console.log(renamedUsers);

[
  { username: 'John', email: 'john@email.com' },
  { username: 'Jane', email: 'jane@email.com' }
]

Multiple Property Renaming

const products = [
    { title: "Laptop", price: 1200, category: "Electronics" },
    { title: "Book", price: 25, category: "Education" }
];

// Rename multiple properties
const transformedProducts = products.map(item => ({
    productName: item.title,
    cost: item.price,
    type: item.category
}));

console.log(transformedProducts);

[
  { productName: 'Laptop', cost: 1200, type: 'Electronics' },
  { productName: 'Book', cost: 25, type: 'Education' }
]

Key Points

The map() method creates a new array without modifying the original
Use object destructuring for more complex property renaming scenarios
Always return a new object from the map function to avoid reference issues
This approach maintains data integrity while adapting to different naming conventions

Conclusion

Renaming object properties in arrays is efficiently handled using map(). This technique allows you to transform data structures while preserving the original array and maintaining clean, readable code.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

461 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next