Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change an object Key without changing the original array in JavaScript?
When working with arrays of objects in JavaScript, you often need to change object keys while preserving the original data structure. This tutorial shows how to rename object keys without mutating the original array.
The Problem
Directly modifying object properties changes the original array, which can cause issues in applications that rely on immutable data patterns.
Method 1: Using map() with Object Destructuring
The most elegant approach uses destructuring to extract the old key and create a new object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Object Key</title>
</head>
<body>
<h1>Change Object Key Without Mutating Original Array</h1>
<button id="changeKey">Change 'name' to 'fullName'</button>
<div id="output"></div>
<script>
const originalArray = [
{ name: "Rohan Sharma", age: 12 },
{ name: "Shawn Mendes", age: 18 },
{ name: "Michael Shaw", age: 15 },
{ name: "Mitch Johansson", age: 19 }
];
document.getElementById('changeKey').addEventListener('click', () => {
// Method 1: Using destructuring (recommended)
const newArray = originalArray.map(({ name, ...rest }) => ({
fullName: name,
...rest
}));
console.log('Original array:', originalArray);
console.log('New array with changed keys:', newArray);
document.getElementById('output').innerHTML =
'<h3>Check console for results</h3>' +
'<p>Original array unchanged: ' + JSON.stringify(originalArray[0]) + '</p>' +
'<p>New array with fullName: ' + JSON.stringify(newArray[0]) + '</p>';
});
</script>
</body>
</html>
Method 2: Using map() with Object.assign()
Alternative approach using Object.assign() to create new objects:
const originalArray = [
{ name: "John Doe", age: 25 },
{ name: "Jane Smith", age: 30 }
];
// Create new array with changed keys
const newArray = originalArray.map(obj => {
const { name, ...rest } = obj;
return Object.assign({}, { fullName: name }, rest);
});
console.log('Original:', originalArray);
console.log('Modified:', newArray);
Original: [
{ name: 'John Doe', age: 25 },
{ name: 'Jane Smith', age: 30 }
]
Modified: [
{ fullName: 'John Doe', age: 25 },
{ fullName: 'Jane Smith', age: 30 }
]
Method 3: Generic Key Renaming Function
For reusable code, create a function that can rename any key:
function renameKey(array, oldKey, newKey) {
return array.map(obj => {
if (obj.hasOwnProperty(oldKey)) {
const { [oldKey]: value, ...rest } = obj;
return { [newKey]: value, ...rest };
}
return obj;
});
}
const people = [
{ name: "Alice", age: 28 },
{ name: "Bob", age: 35 }
];
const renamed = renameKey(people, 'name', 'fullName');
console.log('Renamed keys:', renamed);
console.log('Original unchanged:', people);
Renamed keys: [
{ fullName: 'Alice', age: 28 },
{ fullName: 'Bob', age: 35 }
]
Original unchanged: [
{ name: 'Alice', age: 28 },
{ name: 'Bob', age: 35 }
]
Comparison
| Method | Readability | Performance | Reusability |
|---|---|---|---|
| Destructuring | High | Fast | Medium |
| Object.assign() | Medium | Good | Medium |
| Generic Function | High | Good | High |
Key Points
- Always use
map()to create a new array instead of modifying the original - Destructuring provides the cleanest syntax for single key changes
- Generic functions offer the most flexibility for multiple use cases
- The original array remains unchanged, maintaining data immutability
Conclusion
Use destructuring with map() for simple key renaming tasks. For complex applications, implement a generic key renaming function to maintain code reusability while preserving data immutability.
517 Views
