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
Selected Reading
De-structuring an object without one key
Object destructuring with the rest operator (...) allows you to extract specific properties while collecting the remaining properties into a new object. This technique is useful when you want to exclude certain keys from an object.
Syntax
const { keyToExclude, ...remainingKeys } = originalObject;
Example: Excluding One Key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object Destructuring</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 10px 0;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
margin: 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Destructuring an Object Without One Key</h1>
<div class="sample">Original Object: {"firstName":"Rohit","lastName":"Sharma","age":22}</div>
<div class="result"></div>
<button class="btn">DESTRUCTURE OBJECT</button>
<h3>Click the button to exclude 'firstName' and get remaining properties</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {
firstName: "Rohit",
lastName: "Sharma",
age: 22,
};
// Destructure: extract firstName, collect rest in restParam
let { firstName, ...restParam } = obj;
document.querySelector(".btn").addEventListener("click", () => {
resEle.innerHTML = "";
resEle.innerHTML += "Extracted firstName: " + firstName + "<br>";
resEle.innerHTML += "Remaining object: " + JSON.stringify(restParam) + "<br>";
resEle.innerHTML += "restParam.lastName: " + restParam.lastName + "<br>";
resEle.innerHTML += "restParam.age: " + restParam.age + "<br>";
});
</script>
</body>
</html>
Multiple Key Exclusion
You can exclude multiple keys by destructuring them separately:
const user = {
id: 1,
firstName: "John",
lastName: "Doe",
email: "john@example.com",
password: "secret123",
role: "admin"
};
// Exclude sensitive data (id and password)
const { id, password, ...safeUserData } = user;
console.log("Excluded:", { id, password });
console.log("Safe data:", safeUserData);
Excluded: { id: 1, password: 'secret123' }
Safe data: { firstName: 'John', lastName: 'Doe', email: 'john@example.com', role: 'admin' }
Common Use Cases
- API responses: Remove sensitive fields before sending data to frontend
- Form handling: Exclude submit buttons or metadata from form data
- State management: Update objects while preserving most properties
- Data transformation: Clean up objects by removing unwanted properties
Key Points
- The rest operator (...) collects remaining properties into a new object
- Original object remains unchanged (immutable operation)
- Works with any number of properties to exclude
- Preserves property order in modern JavaScript engines
Conclusion
Object destructuring with the rest operator provides a clean way to exclude specific keys while preserving the remaining object structure. This technique is essential for data filtering and object manipulation in modern JavaScript.
Updated on: 2026-03-15T23:18:59+05:30
206 Views
Advertisements