JS30 wesbos#14 complete

DeonJordaan · DeonJordaan · commit 19aae2851c01 · 2021-06-10T21:19:40.000+02:00
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -1,56 +1,99 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>JS Reference VS Copy</title>
-</head>
-<body>
+	<head>
+		<meta charset="UTF-8" />
+		<title>JS Reference VS Copy</title>
+	</head>
+	<body>
+		<script>
+			// start with strings, numbers and booleans
 
-  <script>
-    // start with strings, numbers and booleans
+			let age = 100;
+			let age2 = age;
+			console.log(age, age2);
+			age = 200;
+			console.log(age, age2);
 
-    // Let's say we have an array
-    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+			let name = 'Wes';
+			let name2 = name;
+			console.log(name, name2);
+			name = 'wesley';
+			console.log(name, name2);
 
-    // 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.
 
-    // however what happens when we update that array?
+			const team = players;
+			console.log(players, team);
 
-    // now here is the problem!
+			// You might think we can just do something like this:
 
-    // oh no - we have edited the original array too!
+			team[3] = 'Lux';
+			console.log(team);
+			console.log(players);
 
-    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
+			// however what happens when we update that array?
 
-    // So, how do we fix this? We take a copy instead!
+			// now here is the problem!
 
-    // one way
+			// oh no - we have edited the original array too!
 
-    // or create a new array and concat the old one in
+			// Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
-    // or use the new ES6 Spread
+			// So, how do we fix this? We take a copy instead!
+			const team2 = players.slice();
+			console.log(team2);
 
-    // now when we update it, the original one isn't changed
+			team2[3] = 'Hank';
+			console.log(team2);
+			console.log(team);
+			console.log(players);
 
-    // The same thing goes for objects, let's say we have a person object
+			// one way
 
-    // with Objects
-    const person = {
-      name: 'Wes Bos',
-      age: 80
-    };
+			// or create a new array and concat the old one in
 
-    // and think we make a copy:
+			const team3 = [].concat(players);
+			console.log(team3);
 
-    // how do we take a copy instead?
+			// or use the new ES6 Spread
 
-    // We will hopefully soon see the object ...spread
+			const team4 = [...players];
+			console.log(team4);
+			team4[2] = 'Donkey';
+			console.log(team4);
 
-    // 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.
+			team5 = Array.from(team4);
+			team5[1] = 'Goat';
+			console.log(team5);
 
-  </script>
+			// now when we update it, the original one isn't changed
 
-</body>
+			// The same thing goes for objects, let's say we have a person object
+
+			// with Objects
+			const person = {
+				name: 'Wes Bos',
+				age: 80,
+			};
+
+			// and think we make a copy:
+			// const boss = (person.age = 101);
+			console.log(person);
+
+			// how do we take a copy instead?
+			const cap2 = Object.assign({}, person, { number: 99 });
+
+			// We will hopefully soon see the object ...spread
+
+			const cap3 = { ...cap2 };
+			console.log(cap3);
+			console.log(cap2);
+			console.log(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.
+		</script>
+	</body>
 </html>
