Complete references vs coppying wesbos#14

s-steel · s-steel · commit d3c9bc48a1b4 · 2021-01-27T09:08:55.000-07:00
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -8,15 +8,33 @@
 
   <script>
     // start with strings, numbers and booleans
+    let age = 100;
+    let age2 = age;
+    console.log(age, age2)
+    age = 200;
+    console.log(age, age2)
+
+    let name = 'Wes';
+    let name2 = name;
+    console.log(name, name);
+    name = 'Wesley';
+    console.log(name, name2)
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players
+
+    console.log(players, team);
 
     // You might think we can just do something like this:
+    // team[3] = 'Lux';
 
     // however what happens when we update that array?
+    // team is just the reference to the original array.
+    // So when you edit that original array it's aloways going to go back to the reference
+    // If you update an array it will always reference back!
 
     // now here is the problem!
 
@@ -26,11 +44,22 @@
 
     // So, how do we fix this? We take a copy instead!
 
+    const team2 = players.slice();
+    
+
+    // If you pass slice nothing it will take a copy of the original
+
     // one way
 
     // or create a new array and concat the old one in
+    const team3 = [].concat(players);
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+    team4[3] = 'hee haw'
+    console.log(team4);
+
+    const team5 = Array.from(players)
 
     // now when we update it, the original one isn't changed
 
@@ -43,12 +72,36 @@
     };
 
     // and think we make a copy:
+    const captain = person;
+    // captain.number = 99;
 
     // how do we take a copy instead?
+    const capt2 = Object.assign({}, person, { number: 99, age: 12 });
+    console.log(capt2);
+    // Here we take a blank object and fold in all the properties from the other object
+    // And fold in our own properties
 
     // 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 wes = {
+      name: 'Wes',
+      age: 100,
+      social: {
+        twitter: '@wesbos',
+        facebook: 'wesbos.developer'
+      }
+    };
+
+    console.clear();
+    console.log(wes);
+
+    const dev = Object.assign({}, wes);
+
+    const dev2 = JSON.parse(JSON.stringify(wes));
+    // The poor mans deepclone
+
 
   </script>
 
