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
Can we assign new property to an object using deconstruction in JavaScript?
You can assign new properties to an object using destructuring in JavaScript. This technique allows you to extract values from one object and assign them as properties to another object.
Basic Syntax
// Destructuring assignment to object properties
({ property1: targetObj.newProp1, property2: targetObj.newProp2 } = sourceObj);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Destructuring Assignment</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;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Assign New Properties Using Destructuring</h1>
<div class="sample">Source Object: {"a":11,"b":22,"c":44}</div>
<div class="result"></div>
<button class="btn">ASSIGN PROPERTIES</button>
<h3>Click the button to assign properties from source object to target object</h3>
<script>
let resEle = document.querySelector(".result");
let targetObj = {}; // Empty target object
let sourceObj = {
a: 11,
b: 22,
c: 44
};
document.querySelector(".btn").addEventListener("click", () => {
// Destructuring assignment to create new properties
({ a: targetObj.propA, b: targetObj.propB, c: targetObj.propC } = sourceObj);
resEle.innerHTML = "<strong>Target Object Properties:</strong><br>";
for (let key in targetObj) {
resEle.innerHTML += `${key} = ${targetObj[key]}<br>`;
}
});
</script>
</body>
</html>
How It Works
The destructuring syntax ({ a: targetObj.propA, b: targetObj.propB } = sourceObj) extracts properties a and b from sourceObj and assigns them to new properties propA and propB on targetObj.
Multiple Assignment Examples
// Example 1: Creating new properties with different names
let source = { x: 10, y: 20, z: 30 };
let target = {};
({ x: target.newX, y: target.newY } = source);
console.log(target); // { newX: 10, newY: 20 }
// Example 2: Adding to existing object
let person = { name: "John" };
let details = { age: 25, city: "NYC" };
({ age: person.personAge, city: person.location } = details);
console.log(person); // { name: "John", personAge: 25, location: "NYC" }
{ newX: 10, newY: 20 }
{ name: "John", personAge: 25, location: "NYC" }
Key Points
- Use parentheses around the destructuring assignment when not declaring new variables
- You can rename properties during assignment using the colon syntax
- The target object can be empty or have existing properties
- Only specified properties are extracted and assigned
Conclusion
Destructuring assignment allows you to efficiently create new object properties by extracting values from existing objects. This technique is particularly useful for transforming data structures and creating derived objects with renamed properties.
Updated on: 2026-03-15T23:18:59+05:30
172 Views
Advertisements