Finished wesbos#14

smchenrybc · smchenrybc · commit 86fff5e5005a · 2018-07-30T11:47:59.000-04:00
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -8,15 +8,30 @@
 
   <script>
     // start with strings, numbers and booleans
+    let name = 'Sean';
+    let name2 = 'Wesley';
+
+    console.group('Names');
+    console.log(name, '&', name2);
+    name = 'Mike';
+    console.log(name, '&', name2);
+    console.groupEnd();
 
     // Let's say we have an array
-    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+    const players = ['Poppy', 'Ryan', 'Sarah', 'Sean'];
 
     // and we want to make a copy of it.
+    const players2 = players;
 
     // You might think we can just do something like this:
 
     // however what happens when we update that array?
+    players[3] = 'Wesley';
+    players2[3] = 'Wesley';
+    console.group('Players 1 & 2');
+    console.table(players);
+    console.table(players2);
+    console.groupEnd();
 
     // now here is the problem!
 
@@ -27,28 +42,68 @@
     // So, how do we fix this? We take a copy instead!
 
     // one way
+    const team = players.slice();
+    const team2 = [].concat(players);
+
+    console.group('Team 1 & 2');
+    console.table(team);
+    console.table(team2);
+    console.groupEnd();
+
+    players[3] = 'Xavier';
+
+    console.group('Players & Team');
+    console.table(players);
+    console.table(team);
+    console.groupEnd();
 
     // or create a new array and concat the old one in
 
     // or use the new ES6 Spread
+    const team3 = [...players];
+    console.log(team3);
+
+    const team4 = Array.from(players);
+    console.log(team4);
 
     // 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: 'Wes Bos',
-      age: 80
+      name: 'Sean McHenry',
+      age: 33
     };
 
     // and think we make a copy:
+    // const captain = person;
+    // captain.number = 99;
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
+    console.log(cap2);
+    console.log(person);
 
     // We will hopefully soon see the object ...spread
+    const cap3 = {...person};
 
     // 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 person2 = {
+      name: 'Amahl Majack',
+      age: 34,
+      cats: {
+        first_male: 'Sly',
+        second_male: 'Louie'
+      }
+    }
+    console.log(person2);
+    const human = Object.assign({}, person);
+    console.log(human);
+
+    // poor man's deep clone:
+    const human2 = JSON.parse(JSON.stringify(person2));
+    console.log(human2);
 
   </script>
 
