Shallow vs. deep copy (illustrations)

shallow-vs-deep.md

Shallow vs. deep copy

var arr1 = [ {foo:1, bar:2},
             {foo:3, bar:4},
             {foo:5} ]

\

                                       ┌────────┐
                                  ╭───>│ foo: 1 │
                ┌─────────────┐   │    │ bar: 2 │
arr1 O─────────>│ 0:       O──│───╯    └────────┘
                │ 1:       O──│───╮    ┌────────┐
                │ 2:       O──│─╮ ╰───>│ foo: 3 │
                │ length:  3  │ │      │ bar: 4 │
                └─────────────┘ │      └────────┘
                                │      ┌────────┐
                                ╰─────>│ foo: 5 │
                                       └────────┘

A variable arr1, which is an object (more specifically, an array) which has a bunch of properties whose values are objects themselves.

---

var arr1 = [ {foo:1, bar:2},
             {foo:3, bar:4},
             {foo:5} ]

var arr2 = arr1

\

                                       ┌────────┐
                                  ╭───>│ foo: 1 │
                ┌─────────────┐   │    │ bar: 2 │
arr1 O─────────>│ 0:       O──│───╯    └────────┘
         ╭─────>│ 1:       O──│───╮    ┌────────┐
         │      │ 2:       O──│─╮ ╰───>│ foo: 3 │
         │      │ length:  3  │ │      │ bar: 4 │
         │      └─────────────┘ │      └────────┘
         │                      │      ┌────────┐
         │                      ╰─────>│ foo: 5 │
         │                             └────────┘
         │
arr2 O───╯

arr2 is made an alias to arr1; both point to the same object.

---

var arr1 = [ {foo:1, bar:2},
             {foo:3, bar:4},
             {foo:5} ]

var arr2 = shallow_clone(arr1)

\

                                             ┌────────┐
                                  ╭─────────>│ foo: 1 │
                ┌─────────────┐   │ ╭───────>│ bar: 2 │
arr1 O─────────>│ 0:       O──│───╯ │        └────────┘
                │ 1:       O──│───╮ │        ┌────────┐
                │ 2:       O──│─╮ ╰─────────>│ foo: 3 │
                │ length:  3  │ │   │ ╭─────>│ bar: 4 │
                └─────────────┘ │   │ │      └────────┘
                                │   │ │      ┌────────┐
                                ╰───────────>│ foo: 5 │
                                    │ │ ╭───>└────────┘
arr2 O──────╮   ┌─────────────┐     │ │ │
            ╰──>│ 0:       O──│─────╯ │ │
                │ 1:       O──│───────╯ │
                │ 2:       O──│─────────╯
                │ length:  3  │
                └─────────────┘

arr2 is a shallow copy of arr1, i.e. a new object, but each property in the new arr2 points to the same value as the corresponding property in arr1 points to.

---

var arr1 = [ {foo:1, bar:2},
             {foo:3, bar:4},
             {foo:5} ]

var arr2 = deep_clone(arr1)

\

                                          ┌────────┐
                                  ╭──────>│ foo: 1 │
                ┌─────────────┐   │       │ bar: 2 │
arr1 O─────────>│ 0:       O──│───╯       └────────┘
                │ 1:       O──│───╮       ┌────────┐
                │ 2:       O──│─╮ ╰──────>│ foo: 3 │
                │ length:  3  │ │         │ bar: 4 │
                └─────────────┘ │         └────────┘
                                │         ┌────────┐
                                ╰────────>│ foo: 5 │
                                          └────────┘
arr2 O──────╮   ┌─────────────┐
            ╰──>│ 0:       O──│─────╮     ┌────────┐
                │ 1:       O──│───╮ ╰────>│ foo: 1 │
                │ 2:       O──│─╮ │       │ bar: 2 │
                │ length:  3  │ │ │       └────────┘
                └─────────────┘ │ │       ┌────────┐
                                │ ╰──────>│ foo: 3 │
                                │         │ bar: 4 │
                                │         └────────┘
                                │         ┌────────┐
                                ╰────────>│ foo: 5 │
                                          └────────┘

arr2 is a deep copy of arr1, which recursively performs a deep copy of all objects "further down" in the object as well.