Added Reference Vs Copy (wesbos#14)

JeffDess · JeffDess · commit f9c599bc9d6f · 2017-09-12T19:59:43.000-04:00
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -1,52 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>JS Reference VS Copy</title>
+	<meta charset="UTF-8">
+	<title>JS Reference VS Copy</title>
 </head>
+
 <body>
+	<script>
+		// start with strings, numbers and booleans
+		let = age = 100;
+		let age2 = age;
+		console.log(age, age2);
 
-  <script>
-    // start with strings, numbers and booleans
+		age = 200;
+		console.log(age, age2);
 
-    // Let's say we have an array
-    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
-    // and we want to make a copy of it.
+		// Let's say we have an array
+		const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
-    // You might think we can just do something like this:
+		// and we want to make a copy of it.
+		const team = players;
+		console.log(team, players)
 
-    // however what happens when we update that array?
+		// You might think we can just do something like this:
+		team[3] = 'Lux';
 
-    // now here is the problem!
+		// however what happens when we update that array?
+		// now here is the problem!
+		console.log(team, players)
 
-    // oh no - we have edited the original array too!
+		// oh no - we have edited the original array too!
 
-    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
+		// 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!
+		// So, how do we fix this? We take a copy instead!
 
-    // one way
+		// one way
+		const team2 = players.slice();
 
-    // or create a new array and concat the old one in
+		// or create a new array and concat the old one in
+		const team3 = [].concat(players);
 
-    // or use the new ES6 Spread
+		// or use the new ES6 Spread
+		const team4 = [...players];
 
-    // now when we update it, the original one isn't changed
+		const team5 = Array.from(players);
 
-    // The same thing goes for objects, let's say we have a person object
+		// now when we update it, the original one isn't changed
 
-    // with Objects
+		// The same thing goes for objects, let's say we have a person object
 
-    // and think we make a copy:
+		// with Objects
+		const person = {
+			name: 'Jeff Dess',
+			age: 35,
+			social: {
+				twitter: '@jeffdess',
+				github: '@jeffdess'
+			}
+		}
 
-    // how do we take a copy instead?
+		// and think we make a copy:
+		const captain = person;
+		captain.number = 99;
 
-    // We will hopefully soon see the object ...spread
+		// how do we take a copy instead?
+		Object.assign({}, person, { number: 99 });
 
-    // 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.
+		// We will hopefully soon see the object ...spread
+		//const cap3 = {...person};
 
-  </script>
+		// 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.
 
+		// Poorman's cloneDeep
+		const cloneDeep = JSON.parse(JSON.stringify(person));
+	</script>
 </body>
-</html>
+
+</html>
