Completed lesson 14

Going deep inside clones.

Author: rmion

14 - JavaScript References VS Copying/index-START.html

@@ -8,15 +8,29 @@
 
   <script>
     // start with strings, numbers and booleans
+    let age = 100;
+    let otherAge = age;
+    console.log(age, otherAge); // 100 100
+    age = 200;
+    console.log(age, otherAge); // 200 100
+
+    let name = "Robert";
+    let otherName = name;
+    console.log(name, otherName); // Robert Robert
+    name = "Billy";
+    console.log(name, otherName); // Billy Robert
 
     // Let's say we have an array
-    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+    const players = ["Robert", "Laura", "Mitzi", "Lucy"];
 
     // and we want to make a copy of it.
+    const team = players;
 
     // You might think we can just do something like this:
+    players[3] = "Tommy";
 
     // however what happens when we update that array?
+    console.log(team); // ["Robert", "Laura", "Mitzi", "Tommy"]
 
     // now here is the problem!
 
@@ -25,27 +39,41 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
+    const team3 = [].concat(players);
 
     // one day
 
     // or create a new array and concat the old one in
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
+    const person = {
+      name: "Robert Mion",
+      age: 29
+    };
 
     // and think we make a copy:
+    const captain = person
+    captain.number = 99;
+    console.log(person); // { name: "Robert Mion", age: 29, number: 99 }
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, { number: 29, age: 12 });
+    console.log(person) // { name: "Robert Mion", age: 29 }
 
     // We will hopefully soon see the object ...spread
+    // const cap3 = {...person} // Woah!
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
-
+    const cap4 = JSON.parse(JSON.stringify(person)); // Poor man's deep clone
   </script>
 
 </body>