Prototype Pattern - Learning Module

Loading content...

0/246

Shallow vs Deep Copy

The Hidden Danger in Object Copying

When you clone an object, a crucial question emerges: What happens to the objects it references? The answer determines whether your copy is truly independent or secretly shares state with the original—a distinction that can mean the difference between working software and mysterious bugs that appear seemingly at random.\n\nThis is the realm of shallow vs deep copying—perhaps the most important technical decision when implementing the Prototype Pattern. Get it wrong, and modifications to one object silently corrupt another. Get it right, and you have a robust, predictable cloning system.

What You Will Learn

By the end of this page, you will understand the precise semantics of shallow and deep copying, recognize which approach is appropriate for different scenarios, implement both correctly in production code, and avoid the common pitfalls that lead to copy-related bugs.

The Core Distinction Explained

Let's establish precise definitions that will guide our understanding:\n\nShallow Copy: Creates a new object and copies all field values from the original. For primitive fields (numbers, booleans, strings), this copies the values. For reference fields (objects, arrays), this copies the references—meaning both original and copy point to the same nested objects.\n\nDeep Copy: Creates a new object and recursively copies all objects reachable from the original. Each nested object gets its own independent copy. The result is a completely separate object graph with no shared references.

shallow-vs-deep-visual.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// Visualizing the difference
 
class Address {
    constructor(
        public street: string,
        public city: string
    ) {}
}
 
class Person {
    constructor(
        public name: string,        // Primitive: always copied by value
        public age: number,         // Primitive: always copied by value
        public address: Address     // Reference: copying behavior varies!
    ) {}
}
 
const original = new Person(
    "Alice",
    30,
    new Address("123 Main St", "Springfield")
);
 
// ============================================
// SHALLOW COPY
// ============================================
function shallowClone(person: Person): Person {
    return new Person(
        person.name,
        person.age,
        person.address  // Same reference! Not a new Address
    );
}
 
const shallowCopy = shallowClone(original);
 
// Primitives are independent
shallowCopy.name = "Bob";
console.log(original.name);  // "Alice" - unaffected ✓
 
// But references are SHARED
shallowCopy.address.city = "Shelbyville";
console.log(original.address.city);  // "Shelbyville" - AFFECTED! ✗
 
// original.address === shallowCopy.address (same object in memory)
 
// ============================================
// DEEP COPY
// ============================================
function deepClone(person: Person): Person {
    return new Person(
        person.name,
        person.age,
        new Address(                // NEW Address object
            person.address.street,
            person.address.city
        )
    );
}
 
const deepCopy = deepClone(original);
 
// Primitives are independent
deepCopy.name = "Charlie";
console.log(original.name);  // "Alice" - unaffected ✓
 
// References are also independent!
deepCopy.address.city = "Capital City";
console.log(original.address.city);  // "Shelbyville" - UNAFFECTED ✓
 
// original.address !== deepCopy.address (different objects)

The Default Is Usually Shallow

Most language-level copy mechanisms produce shallow copies by default. JavaScript's spread operator, Object.assign(), Array.slice(), and similar constructs all create shallow copies. If you need deep copying, you must implement it explicitly.

Understanding Through Memory Models

To truly understand shallow vs deep copying, we need to visualize what happens in memory. Objects in memory are graphs: the root object and all objects reachable through its references form an interconnected structure.\n\nShallow copy: Duplicates only the root node of the graph. All edges point to the same nested objects as the original.\n\nDeep copy: Duplicates the entire graph. Every reachable node gets its own copy, with edges reconnected to point to the copies.

Memory Behavior Comparison
Aspect	Shallow Copy	Deep Copy
Memory allocation	One new object (the clone)	One new object per node in graph
Time complexity	O(1) or O(n) for n direct fields	O(N) where N = total reachable objects
Space complexity	O(1) additional space for references	O(N) for complete duplicate graph
Independence	Only root object is independent	Entire object graph is independent
Shared state	Nested objects are shared	No shared mutable state
Mutation visibility	Changes to nested objects visible in both	Changes visible only in modified copy

graph-example.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Complex object graph example
interface Cloneable<T> {
    clone(): T;
}
 
class Department implements Cloneable<Department> {
    name: string;
    budget: number;
    
    constructor(name: string, budget: number) {
        this.name = name;
        this.budget = budget;
    }
    
    clone(): Department {
        return new Department(this.name, this.budget);
    }
}
 
class Employee implements Cloneable<Employee> {
    name: string;
    salary: number;
    department: Department;      // Reference to shared department
    directReports: Employee[];   // References to other employees
    
    constructor(name: string, salary: number, department: Department) {
        this.name = name;
        this.salary = salary;
        this.department = department;
        this.directReports = [];
    }
    
    // SHALLOW clone - good for some use cases
    shallowClone(): Employee {
        const copy = new Employee(this.name, this.salary, this.department);
        copy.directReports = this.directReports; // Same array reference!
        return copy;
    }
    
    // DEEP clone - creates complete independent copy
    deepClone(
        clonedDepartments: Map<Department, Department> = new Map(),
        clonedEmployees: Map<Employee, Employee> = new Map()
    ): Employee {
        // Check if we've already cloned this employee (circular reference handling)
        if (clonedEmployees.has(this)) {
            return clonedEmployees.get(this)!;
        }
        
        // Clone or reuse department
        let clonedDept = clonedDepartments.get(this.department);
        if (!clonedDept) {
            clonedDept = this.department.clone();
            clonedDepartments.set(this.department, clonedDept);
        }
        
        // Create the employee clone
        const copy = new Employee(this.name, this.salary, clonedDept);
        clonedEmployees.set(this, copy); // Register before recursing (for cycles)
        
        // Deep clone each direct report
        copy.directReports = this.directReports.map(report => 
            report.deepClone(clonedDepartments, clonedEmployees)
        );
        
        return copy;
    }
}
 
// Usage demonstration
const engineering = new Department("Engineering", 1000000);
const manager = new Employee("Alice", 150000, engineering);
const developer1 = new Employee("Bob", 100000, engineering);
const developer2 = new Employee("Charlie", 100000, engineering);
 
manager.directReports = [developer1, developer2];
 
// Shallow clone shares department and reports
const shallowManager = manager.shallowClone();
shallowManager.department.budget = 2000000;
console.log(manager.department.budget);  // 2000000 - MODIFIED!
 
// Deep clone is completely independent
const deepManager = manager.deepClone();
deepManager.department.budget = 3000000;
console.log(manager.department.budget);  // 2000000 - Unchanged ✓

When Shallow Copy Is the Right Choice

Shallow copying is not inherently wrong—in many scenarios, it's exactly what you want. Understanding when shallow copies are appropriate helps you avoid unnecessary complexity and performance overhead.

Appropriate Use Cases for Shallow Copy

•Immutable nested objects — If all referenced objects are immutable, sharing is safe. Modifications create new objects rather than mutating shared ones.
•Intentional shared state — Some designs explicitly share objects. Multiple employees from the same department might intentionally reference the same Department object.
•Performance-critical paths — Deep copying large object graphs is expensive. When you need many copies quickly and won't mutate nested objects, shallow copying avoids unnecessary work.
•Snapshot for comparison — Creating a snapshot to compare against later changes. You're capturing the reference structure, not planning to mutate the copy.
•Objects with no nested references — If an object contains only primitives, shallow and deep copy are equivalent. Shallow copying is simpler.
•Flyweight pattern integration — When nested objects are shared flyweights (like font objects or color palettes), deep copying would waste memory and break the pattern's intent.

shallow-copy-appropriate.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// Example: Shallow copy with immutable nested objects
// This is SAFE because Color is immutable
 
class Color {
    // Immutable: all fields are readonly
    constructor(
        public readonly r: number,
        public readonly g: number,
        public readonly b: number
    ) {}
    
    // "Mutation" methods return new instances
    withAlpha(a: number): ColorWithAlpha {
        return new ColorWithAlpha(this.r, this.g, this.b, a);
    }
    
    lighten(amount: number): Color {
        return new Color(
            Math.min(255, this.r + amount),
            Math.min(255, this.g + amount),
            Math.min(255, this.b + amount)
        );
    }
}
 
class ColorWithAlpha extends Color {
    constructor(
        r: number, g: number, b: number,
        public readonly a: number
    ) {
        super(r, g, b);
    }
}
 
class Pixel {
    constructor(
        public x: number,
        public y: number,
        public color: Color  // Reference to immutable object
    ) {}
    
    // Shallow clone is SAFE here
    clone(): Pixel {
        return new Pixel(this.x, this.y, this.color);
    }
    
    // If we need a different color, we create a new one
    withColor(newColor: Color): Pixel {
        return new Pixel(this.x, this.y, newColor);
    }
}
 
const red = new Color(255, 0, 0);
const pixel1 = new Pixel(10, 20, red);
const pixel2 = pixel1.clone();
 
// Modifying pixel2's position doesn't affect pixel1
pixel2.x = 100;
console.log(pixel1.x);  // 10 - unaffected ✓
 
// Even though color is shared, it can't be mutated
// To change color, we must create new Color and new Pixel
const pixel3 = pixel2.withColor(red.lighten(50));
console.log(pixel2.color === red);    // true - pixel2 still has red
console.log(pixel3.color === red);    // false - pixel3 has lighter color

Immutability as Safety Net

If you design nested objects to be immutable, shallow copying becomes safe by default. This is why functional programming styles and languages with immutable-by-default semantics (Scala, Clojure) rarely worry about deep copying—mutation isn't possible.

When Deep Copy Is Required

Deep copying is essential when the copy must be completely independent—when modifications to either the original or the copy must never affect the other. This is the more common requirement in practice for mutable objects.

Scenarios Requiring Deep Copy

•Undo/redo state capture — Each snapshot must preserve the complete state at that moment. Subsequent modifications should not alter historical snapshots.
•Template-based creation — When using a prototype as a template, users expect modifications to their copy without affecting the template or other users' copies.
•Multi-threaded isolation — Passing objects between threads safely often requires deep copies to avoid concurrent modification issues.
•Testing isolation — Test fixtures should be deeply copied to ensure each test starts with pristine, unmodified state.
•Caching with modification — Retrieving cached objects for modification requires deep copies; otherwise modifications corrupt the cache.
•Data export/import — Exporting data for external consumption typically requires complete, independent copies.
•Simulation branching — Exploring multiple scenarios from a common starting point requires deep copies so each branch evolves independently.

deep-copy-required.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
// Example: Undo system REQUIRES deep copy
// Shallow copy would break undo functionality completely
 
class DocumentState {
    constructor(
        public title: string,
        public content: string[],
        public metadata: Map<string, string>
    ) {}
    
    // MUST be deep copy for undo to work correctly
    clone(): DocumentState {
        return new DocumentState(
            this.title,
            [...this.content],                    // New array with same strings
            new Map(this.metadata)                // New Map with same entries
        );
    }
}
 
class UndoableDocument {
    private state: DocumentState;
    private history: DocumentState[] = [];
    private currentIndex: number = -1;
    
    constructor(title: string) {
        this.state = new DocumentState(title, [], new Map());
        this.saveState();
    }
    
    // Capture current state for undo
    private saveState(): void {
        // CRITICAL: Must deep clone to preserve state
        // With shallow copy, modifying current state would modify history!
        
        // Remove any redo states
        this.history = this.history.slice(0, this.currentIndex + 1);
        
        // Save deep copy of current state
        this.history.push(this.state.clone());
        this.currentIndex++;
    }
    
    // User action: add content
    addParagraph(text: string): void {
        this.state.content.push(text);
        this.saveState();
    }
    
    // User action: modify content
    modifyParagraph(index: number, newText: string): void {
        if (index >= 0 && index < this.state.content.length) {
            this.state.content[index] = newText;
            this.saveState();
        }
    }
    
    // User action: set metadata
    setMetadata(key: string, value: string): void {
        this.state.metadata.set(key, value);
        this.saveState();
    }
    
    // Undo: restore previous state
    undo(): boolean {
        if (this.currentIndex > 0) {
            this.currentIndex--;
            // Deep clone the historical state to become current
            this.state = this.history[this.currentIndex].clone();
            return true;
        }
        return false;
    }
    
    // Redo: restore next state
    redo(): boolean {
        if (this.currentIndex < this.history.length - 1) {
            this.currentIndex++;
            this.state = this.history[this.currentIndex].clone();
            return true;
        }
        return false;
    }
    
    getContent(): string[] {
        return this.state.content;
    }
}
 
// Usage
const doc = new UndoableDocument("My Document");
 
doc.addParagraph("First paragraph.");
doc.addParagraph("Second paragraph.");
doc.modifyParagraph(0, "Modified first paragraph.");
 
console.log(doc.getContent());
// ["Modified first paragraph.", "Second paragraph."]
 
doc.undo();  // Go back before modification
console.log(doc.getContent());
// ["First paragraph.", "Second paragraph."]
 
doc.undo();  // Go back before second paragraph
console.log(doc.getContent());
// ["First paragraph."]
 
doc.redo();  // Restore second paragraph
console.log(doc.getContent());
// ["First paragraph.", "Second paragraph."]
 
// Without deep copy, undo would NOT work correctly!
// All history entries would share the same content array,
// so they would all show the current state, not historical states.

Implementing Deep Copy Correctly

Deep copying is more complex than it first appears. You must handle nested objects recursively, deal with circular references, and make decisions about what to clone versus share. Here are robust implementation strategies:

recursive-deep-copy.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// Recursive deep copy with cycle detection
interface DeepCloneable<T> {
    deepClone(cloneMap?: Map<object, object>): T;
}
 
class Author implements DeepCloneable<Author> {
    constructor(
        public name: string,
        public email: string
    ) {}
    
    deepClone(cloneMap: Map<object, object> = new Map()): Author {
        // Check if already cloned (cycle detection)
        if (cloneMap.has(this)) {
            return cloneMap.get(this) as Author;
        }
        
        const copy = new Author(this.name, this.email);
        cloneMap.set(this, copy);
        return copy;
    }
}
 
class Comment implements DeepCloneable<Comment> {
    constructor(
        public author: Author,
        public text: string,
        public replies: Comment[]
    ) {}
    
    deepClone(cloneMap: Map<object, object> = new Map()): Comment {
        if (cloneMap.has(this)) {
            return cloneMap.get(this) as Comment;
        }
        
        // Create comment with placeholder values first
        const copy = new Comment(
            null as any,  // Will set after registering
            this.text,
            []
        );
        
        // Register immediately to handle cycles
        cloneMap.set(this, copy);
        
        // Now safely clone nested objects
        copy.author = this.author.deepClone(cloneMap);
        copy.replies = this.replies.map(reply => reply.deepClone(cloneMap));
        
        return copy;
    }
}
 
class BlogPost implements DeepCloneable<BlogPost> {
    constructor(
        public title: string,
        public content: string,
        public author: Author,
        public tags: string[],
        public comments: Comment[]
    ) {}
    
    deepClone(cloneMap: Map<object, object> = new Map()): BlogPost {
        if (cloneMap.has(this)) {
            return cloneMap.get(this) as BlogPost;
        }
        
        const copy = new BlogPost(
            this.title,
            this.content,
            null as any,
            [...this.tags],  // Shallow copy of primitives array
            []
        );
        
        cloneMap.set(this, copy);
        
        copy.author = this.author.deepClone(cloneMap);
        copy.comments = this.comments.map(c => c.deepClone(cloneMap));
        
        return copy;
    }
}

Handling Circular References

Circular references occur when objects reference each other directly or indirectly (A → B → C → A). Naive deep copying will infinite loop or stack overflow. A robust implementation must detect and handle cycles.

circular-reference-handling.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// Handling circular references in deep clone
 
// Example: Tree node with parent reference (creates cycle)
class TreeNode<T> {
    value: T;
    children: TreeNode<T>[] = [];
    parent: TreeNode<T> | null = null;  // Back-reference creates cycle!
    
    constructor(value: T) {
        this.value = value;
    }
    
    addChild(child: TreeNode<T>): void {
        child.parent = this;  // Creates cycle: child -> parent -> child
        this.children.push(child);
    }
    
    // Naive deep clone would infinite loop:
    // clone() -> clones children -> each child clones parent -> 
    // parent clones children -> never ends!
    
    // Correct implementation with clone registry
    deepClone(cloneRegistry: Map<TreeNode<T>, TreeNode<T>> = new Map()): TreeNode<T> {
        // STEP 1: Check if already cloned (break the cycle)
        if (cloneRegistry.has(this)) {
            return cloneRegistry.get(this)!;
        }
        
        // STEP 2: Create new node (don't clone children yet)
        const cloned = new TreeNode(this.value);
        
        // STEP 3: Register BEFORE recursing (critical for cycles!)
        cloneRegistry.set(this, cloned);
        
        // STEP 4: Now safe to clone children
        for (const child of this.children) {
            const clonedChild = child.deepClone(cloneRegistry);
            clonedChild.parent = cloned;  // Point to cloned parent
            cloned.children.push(clonedChild);
        }
        
        // STEP 5: Handle parent (will find existing clone in registry)
        if (this.parent !== null) {
            // Parent will already be in registry if we're cloning from root
            // If cloning subtree, parent might not be cloned
            cloned.parent = cloneRegistry.get(this.parent) || null;
        }
        
        return cloned;
    }
}
 
// Usage
const root = new TreeNode("root");
const child1 = new TreeNode("child1");
const child2 = new TreeNode("child2");
const grandchild = new TreeNode("grandchild");
 
root.addChild(child1);
root.addChild(child2);
child1.addChild(grandchild);
 
// Clone the entire tree
const clonedRoot = root.deepClone();
 
// Verify complete independence
clonedRoot.value = "cloned-root";
clonedRoot.children[0].value = "cloned-child1";
 
console.log(root.value);              // "root" - unchanged ✓
console.log(root.children[0].value);  // "child1" - unchanged ✓
 
// Verify structure preserved
console.log(clonedRoot.children[0].parent === clonedRoot);  // true ✓
console.log(clonedRoot.children[0].children[0].parent === clonedRoot.children[0]);  // true ✓
 
// Verify no cross-contamination
console.log(clonedRoot.children[0].parent === root);  // false ✓
console.log(clonedRoot !== root);  // true ✓

The Registration Order Matters

Always register an object in the clone map BEFORE recursively cloning its references. If you register after, a circular reference back to the current object will not find it in the registry, causing infinite recursion.

Mixed Strategies: Selective Deep Copy

In practice, you often need selective deep copying—deep copying some references while shallow copying or sharing others. This requires explicit design decisions about each field type.

selective-deep-copy.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// Selective deep copy: different strategies for different fields
 
// Shared, immutable configuration (shallow copy OK)
class ApplicationConfig {
    constructor(
        public readonly appName: string,
        public readonly version: string,
        public readonly features: ReadonlyArray<string>
    ) {}
}
 
// Per-user mutable state (MUST deep copy)
class UserPreferences {
    constructor(
        public theme: string,
        public fontSize: number,
        public customSettings: Map<string, string>
    ) {}
    
    clone(): UserPreferences {
        return new UserPreferences(
            this.theme,
            this.fontSize,
            new Map(this.customSettings)
        );
    }
}
 
// Expensive to create, immutable after creation (shallow copy OK)
class CompiledTemplate {
    private compiledAt: Date;
    
    constructor(
        public readonly templateId: string,
        public readonly compiledHtml: string
    ) {
        this.compiledAt = new Date();
    }
}
 
// Document that combines all strategies
class UserDocument {
    constructor(
        // SHARE: Global immutable config
        public readonly config: ApplicationConfig,
        
        // DEEP COPY: User-specific mutable preferences  
        public preferences: UserPreferences,
        
        // SHARE: Expensive immutable template
        public readonly template: CompiledTemplate,
        
        // DEEP COPY: Document's own mutable content
        public content: string[],
        
        // DEEP COPY: Document's own mutable metadata
        public metadata: Map<string, any>
    ) {}
    
    clone(): UserDocument {
        return new UserDocument(
            this.config,                  // SHARE - immutable
            this.preferences.clone(),     // DEEP COPY - mutable
            this.template,                // SHARE - immutable (expensive)
            [...this.content],            // DEEP COPY - mutable
            new Map(this.metadata)        // DEEP COPY - mutable
        );
    }
}
 
// Usage
const globalConfig = new ApplicationConfig("MyApp", "2.0", ["spell-check", "auto-save"]);
const template = new CompiledTemplate("invoice", "<html>...</html>");
 
const doc1 = new UserDocument(
    globalConfig,
    new UserPreferences("dark", 14, new Map([["lang", "en"]])),
    template,
    ["Paragraph 1", "Paragraph 2"],
    new Map([["author", "Alice"]])
);
 
const doc2 = doc1.clone();
 
// Modifications to doc2 are independent where needed
doc2.preferences.theme = "light";
doc2.content.push("Paragraph 3");
doc2.metadata.set("author", "Bob");
 
console.log(doc1.preferences.theme);  // "dark" - unchanged ✓
console.log(doc1.content.length);     // 2 - unchanged ✓
console.log(doc1.metadata.get("author"));  // "Alice" - unchanged ✓
 
// Shared references remain shared (intentionally)
console.log(doc1.config === doc2.config);      // true - same config ✓
console.log(doc1.template === doc2.template);  // true - same template ✓

Decision Framework for Each Field

•Is the field immutable? → If yes, shallow copy (share reference) is safe.
•Is the field expensive to create and never changes? → Share it. Deep copying wastes resources.
•Should modifications be independent? → Deep copy required. This is the key question.
•Is the field part of shared infrastructure? → Likely share (e.g., event buses, registries).
•Is the field instance-specific state? → Deep copy. This is what makes clones distinct.

Common Pitfalls and Debugging Copy Bugs

Copy-related bugs are notoriously difficult to debug because they manifest as action at a distance—modifying one object causes changes in another with no apparent connection. Here are the most common pitfalls:

Common Shallow Copy Mistakes

•Spread operator false security — {...obj} and [...arr] look like complete copies but are shallow. Nested objects are shared.
•Object.assign is shallow — Object.assign({}, obj) copies only top-level properties by reference.
•Array methods that share — slice(), concat() create new arrays, but elements (if objects) are shared.
•Forgetting nested arrays — An array of arrays needs each sub-array cloned separately.
•Map and Set shallow copy — new Map(existingMap) copies entries, but if values are objects, they're shared.

pitfalls-examples.ts
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Demonstrating common pitfalls
 
// PITFALL 1: Spread operator false security
const original = {
    name: "Test",
    settings: { theme: "dark" }  // Nested object!
};
 
const copy = { ...original };
copy.settings.theme = "light";
console.log(original.settings.theme);  // "light" - AFFECTED!
 
// FIX: Deep clone nested objects
const fixedCopy = {
    ...original,
    settings: { ...original.settings }
};
 
 
// PITFALL 2: Array of objects
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];
 
const usersCopy = [...users];  // Shallow!
usersCopy[0].name = "Alicia";
console.log(users[0].name);  // "Alicia" - AFFECTED!
 
// FIX: Clone each element
const usersDeepCopy = users.map(u => ({ ...u }));
 
 
// PITFALL 3: Matrix (array of arrays)
const matrix = [[1, 2], [3, 4]];
const matrixCopy = [...matrix];  // Shallow!
 
matrixCopy[0][0] = 99;
console.log(matrix[0][0]);  // 99 - AFFECTED!
 
// FIX: Clone each row
const matrixDeepCopy = matrix.map(row => [...row]);
 
 
// PITFALL 4: Map with object values
const cache = new Map<string, {data: string}>();
cache.set("key1", { data: "value1" });
 
const cacheCopy = new Map(cache);  // Shallow!
cacheCopy.get("key1")!.data = "modified";
console.log(cache.get("key1")!.data);  // "modified" - AFFECTED!
 
// FIX: Clone each value
const cacheDeepCopy = new Map(
    Array.from(cache.entries()).map(
        ([key, value]) => [key, { ...value }]
    )
);
 
 
// PITFALL 5: Class instance without clone
class Widget {
    constructor(public config: { size: number }) {}
}
 
const widget = new Widget({ size: 100 });
const widgetRef = widget;  // This is NOT a copy!
widgetRef.config.size = 200;
console.log(widget.config.size);  // 200 - Same object!
 
// Even "copying" primitively doesn't work
const widgetCopy = Object.assign({}, widget);  // Loses prototype!
console.log(widgetCopy instanceof Widget);  // false!

Debugging Copy Bugs

When you suspect shared-state bugs: (1) Add identity checks: console.log(copy.field === original.field) for each reference field. (2) Use Object.freeze() on originals during testing—modifications will throw errors. (3) Log object IDs to trace which objects are actually shared.

Summary: Shallow vs Deep Copy

The choice between shallow and deep copying is one of the most consequential decisions in implementing the Prototype Pattern. Let's consolidate the key principles:

Key Takeaways

•Shallow copy duplicates references; deep copy duplicates objects — Know the difference and choose intentionally.
•Default language mechanisms are shallow — Spread, Object.assign, slice, and similar operations require explicit deep-copy handling for nested objects.
•Shallow copy is safe for immutable objects — If nested objects can't be mutated, sharing is fine.
•Deep copy is required for independent mutability — When changes to one copy must not affect others, deep copy is essential.
•Circular references require a clone registry — Track what's been cloned to avoid infinite loops.
•Mixed strategies are common — Real objects often need different copying strategies for different fields.
•Copy bugs manifest as action at a distance — Mysterious state corruption often traces to improper copying.

What's next:\n\nWith solid understanding of cloning mechanics, we're ready to examine prototype registries—centralized stores of prototype objects that enable runtime-configurable object creation. The next page explores how registries make the Prototype Pattern practical for large-scale systems.

Page Complete

You now understand the critical distinction between shallow and deep copying, when each approach is appropriate, and how to implement both correctly. Next, we'll explore prototype registries for managing collections of prototypes.