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 clone a js object except for one key in javascript?
In JavaScript, cloning an object except for one key means creating a copy of an object while excluding specific properties. This is a common requirement when you need to create modified versions of objects without mutating the original.
There are several approaches to accomplish this, depending on whether you need a shallow or deep clone:
Shallow Clone - Copies only the top-level properties
Deep Clone - Recursively copies all nested objects and arrays
Understanding Shallow vs Deep Cloning
Shallow Clone
A shallow clone copies the object's structure but not nested objects. Both the original and cloned objects share references to nested objects.
<!DOCTYPE html>
<html>
<head>
<title>Shallow Clone Example</title>
</head>
<body>
<script>
let innerObj = {
a: 'original',
c: 'd'
}
let obj = {
x: "test",
y: innerObj
}
// Create a shallow copy
let copyObj = Object.assign({}, obj);
// Modifying nested object affects both
innerObj.a = "modified";
document.write("Original: " + JSON.stringify(obj) + "<br>");
document.write("Copy: " + JSON.stringify(copyObj));
</script>
</body>
</html>
Original: {"x":"test","y":{"a":"modified","c":"d"}}
Copy: {"x":"test","y":{"a":"modified","c":"d"}}
Deep Clone
A deep clone creates completely independent copies of all nested objects and arrays.
<!DOCTYPE html>
<html>
<head>
<title>Deep Clone Example</title>
</head>
<body>
<script>
let obj = {
x: "test",
y: { a: 'original', c: 'd' }
}
// Create a deep copy
let copyObj = JSON.parse(JSON.stringify(obj));
// Modifying nested object doesn't affect the copy
obj.y.a = "modified";
document.write("Original: " + JSON.stringify(obj) + "<br>");
document.write("Copy: " + JSON.stringify(copyObj));
</script>
</body>
</html>
Original: {"x":"test","y":{"a":"modified","c":"d"}}
Copy: {"x":"test","y":{"a":"original","c":"d"}}
Method 1: Clone Then Delete
The simplest approach is to clone the entire object and then remove unwanted properties.
<!DOCTYPE html>
<html>
<head>
<title>Clone and Delete Method</title>
</head>
<body>
<script>
let original = {
name: 'John',
age: 30,
city: 'New York',
country: 'USA'
}
// Deep clone and remove 'age' property
let copy = JSON.parse(JSON.stringify(original));
delete copy.age;
document.write("Original: " + JSON.stringify(original) + "<br>");
document.write("Copy without age: " + JSON.stringify(copy));
</script>
</body>
</html>
Original: {"name":"John","age":30,"city":"New York","country":"USA"}
Copy without age: {"name":"John","city":"New York","country":"USA"}
Method 2: Object Destructuring (ES6+)
Modern JavaScript provides elegant destructuring syntax to exclude properties during cloning.
<!DOCTYPE html>
<html>
<head>
<title>Destructuring Method</title>
</head>
<body>
<script>
let obj = {
name: 'Alice',
age: 25,
city: 'Boston',
country: 'USA'
};
// Exclude 'age' and 'country' using destructuring
const { age, country, ...clone } = obj;
document.write("Original: " + JSON.stringify(obj) + "<br>");
document.write("Clone without age & country: " + JSON.stringify(clone));
</script>
</body>
</html>
Original: {"name":"Alice","age":25,"city":"Boston","country":"USA"}
Clone without age & country: {"name":"Alice","city":"Boston"}
Method 3: Custom Filter Function
For more control, you can create a custom function that excludes specific keys.
<!DOCTYPE html>
<html>
<head>
<title>Custom Filter Function</title>
</head>
<body>
<script>
function omit(obj, keysToOmit) {
const result = {};
for (let key in obj) {
if (obj.hasOwnProperty(key) && !keysToOmit.includes(key)) {
result[key] = obj[key];
}
}
return result;
}
let person = {
name: 'David',
age: 35,
email: 'david@email.com',
password: 'secret123'
};
// Exclude sensitive information
let publicInfo = omit(person, ['password', 'email']);
document.write("Original: " + JSON.stringify(person) + "<br>");
document.write("Public info: " + JSON.stringify(publicInfo));
</script>
</body>
</html>
Original: {"name":"David","age":35,"email":"david@email.com","password":"secret123"}
Public info: {"name":"David","age":35}
Method Comparison
| Method | Browser Support | Performance | Deep Clone? |
|---|---|---|---|
| Clone + Delete | All browsers | Good | With JSON methods |
| Destructuring | ES6+ (modern) | Excellent | Shallow only |
| Custom Function | All browsers | Good | Configurable |
Conclusion
For modern applications, destructuring with the spread operator provides the cleanest syntax for shallow cloning. Use JSON methods for deep cloning simple objects, or create custom functions when you need more control over the cloning process.
2K+ Views
