Copy Objects Without Sharing Every Field
Copy Objects Without Sharing Every Field
Object spread copies own enumerable properties into a new outer object. A nested class record is still shared unless you deliberately copy that nested object too. Immutability requires a strategy, not merely const.
Before this topic, review Understand Prototype Lookup if its terms are unfamiliar.
What you’ll learn
- Explain copy objects without sharing every field through the school example.
- Trace the shown operations and distinguish their result from displayed output.
- Make the practice change and explain its consequence: Copying the nested profile makes the edited mark independent of the original.
Work through the school example
This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.
JavaScript · school.js · complete example
const student = { profile: { marks: 72 } };
const copy = { ...student };
copy.profile.marks = 80;
console.log(student.profile.marks);
Expected output
80Run in JavaScript compiler →An outer copy can share an inner object
JavaScript · source for this model
const student = { profile: { marks: 72 } };
const copy = { ...student };
copy.profile.marks = 80;
console.log(student.profile.marks);
This diagram follows the supplied example. It is an explanatory model, not a JavaScript engine or a timing guarantee.
An outer copy can share an inner object
Original record
student.profile refers to the nested profile.
marks = 72Copy outer properties
copy.profile points to the same profile object.
student.profile → profile ← copy.profileEdit the nested field
Both outer records observe the new nested mark.
80
Recognize the important boundary
structuredClone supports many data types but not functions and every platform object. JSON round-tripping is not a universal clone.
Try a small variation
JavaScript · original source for practice
const student = { profile: { marks: 72 } };
const copy = { ...student };
copy.profile.marks = 80;
console.log(student.profile.marks);
Your task: Replace {...student} with {...student, profile:{...student.profile}}. Predict the result before running the edited program.
The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.
Worked answer and reasoning
Copying the nested profile makes the edited mark independent of the original.
JavaScript · complete worked variation
const student = { profile: { marks: 72 } };
const copy = { ...student, profile: { ...student.profile } };
copy.profile.marks = 80;
console.log(student.profile.marks);
Expected output
72Run in JavaScript compiler →Predict the original program
JavaScript · original program for this question
const student = { profile: { marks: 72 } };
const copy = { ...student };
copy.profile.marks = 80;
console.log(student.profile.marks);
Keep the useful idea
Object spread copies own enumerable properties into a new outer object. A nested class record is still shared unless you deliberately copy that nested object too. Immutability requires a strategy, not merely const.
Check your variation against this explanation: Copying the nested profile makes the edited mark independent of the original.
Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.
Reaching the recap and completing the quizzes are separate milestones.