Skip to content

Commit d8ce6c9

Browse files
wwags33wwags33
committed
Project 14 completed
1 parent c57be31 commit d8ce6c9

File tree

3 files changed

+271
-46
lines changed

3 files changed

+271
-46
lines changed

Diff for: ‎14 - JavaScript References VS Copying/index-START.html

+5-46
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>JS Reference VS Copy</title>
67
</head>
7-
<body>
8-
9-
<script>
10-
// start with strings, numbers and booleans
11-
12-
// Let's say we have an array
13-
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
14-
15-
// and we want to make a copy of it.
16-
17-
// You might think we can just do something like this:
18-
19-
// however what happens when we update that array?
20-
21-
// now here is the problem!
22-
23-
// oh no - we have edited the original array too!
24-
25-
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
26-
27-
// So, how do we fix this? We take a copy instead!
288

29-
// one way
30-
31-
// or create a new array and concat the old one in
32-
33-
// or use the new ES6 Spread
34-
35-
// now when we update it, the original one isn't changed
36-
37-
// The same thing goes for objects, let's say we have a person object
38-
39-
// with Objects
40-
const person = {
41-
name: 'Wes Bos',
42-
age: 80
43-
};
44-
45-
// and think we make a copy:
46-
47-
// how do we take a copy instead?
48-
49-
// We will hopefully soon see the object ...spread
50-
51-
// 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.
9+
<body>
5210

53-
</script>
11+
<script src="typescripts.js"></script>
5412

5513
</body>
56-
</html>
14+
15+
</html>

Diff for: ‎14 - JavaScript References VS Copying/typescripts.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
console.groupCollapsed('Strings, numbers, and booleans');
2+
let age = 100;
3+
let age2 = age;
4+
console.log(age, age2);
5+
age = 200;
6+
console.log(age, age2);
7+
let myName = 'Will';
8+
let myName2 = myName;
9+
console.log(myName, myName2);
10+
myName = 'William';
11+
console.log(myName, myName2);
12+
let bool = true;
13+
let bool2 = bool;
14+
console.log(bool, bool2);
15+
bool = false;
16+
console.log(bool, bool2);
17+
console.groupEnd();
18+
console.groupCollapsed('Arrays');
19+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
20+
console.log('players:');
21+
console.table(players);
22+
const team = players;
23+
console.log('team', team);
24+
team[0] = 'Will';
25+
console.log('team', team);
26+
console.log('players', players);
27+
console.warn('Oops!');
28+
const players2 = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
29+
console.log('players2:');
30+
console.table(players2);
31+
const team2 = players2.slice();
32+
console.log('team2', team2);
33+
team2[0] = 'Will';
34+
console.log('team2', team2);
35+
const team3 = [].concat(players2);
36+
console.log('team3', team3);
37+
team3[0] = 'Will';
38+
console.log('team3', team3);
39+
const team4 = [...players2];
40+
console.log('team4', team4);
41+
team4[0] = 'Will';
42+
console.log('team4', team4);
43+
const team5 = Array.from(players2);
44+
console.log('team5', team5);
45+
team5[0] = 'Will';
46+
console.log('team5', team5);
47+
console.log('players2', players2);
48+
console.info('Noice');
49+
console.groupEnd();
50+
console.groupCollapsed('Objects');
51+
const person = {
52+
name: 'Wes Bos',
53+
age: 80
54+
};
55+
console.log('person', person);
56+
const captain = person;
57+
captain.number = 99;
58+
console.log('captain', captain);
59+
console.log('person', person);
60+
console.warn('Oops!');
61+
const per2 = {
62+
name: 'Wes Bos',
63+
age: 80
64+
};
65+
const cap2 = Object.assign({}, per2, { number: 99, age: 12 });
66+
console.log('cap2', cap2);
67+
const cap3 = Object.assign({}, per2);
68+
cap3.name = 'Will Wager';
69+
cap3.age = 28;
70+
console.log('cap3', cap3);
71+
console.log('per2', per2);
72+
console.info('Noice');
73+
const wes = {
74+
name: 'Wes',
75+
age: 100,
76+
social: {
77+
twitter: '@wesbos',
78+
facebook: 'wesbos.developer'
79+
}
80+
};
81+
console.log(JSON.stringify(wes));
82+
const dev = Object.assign({}, wes, { name: 'Dev' });
83+
dev.social.twitter = '@dev';
84+
console.log(JSON.stringify(dev));
85+
console.log(JSON.stringify(wes));
86+
console.warn('Oops!');
87+
const wes2 = {
88+
name: 'Wes2',
89+
age: 100,
90+
social: {
91+
twitter: '@wesbos',
92+
facebook: 'wesbos.developer'
93+
}
94+
};
95+
console.log(JSON.stringify(wes2));
96+
const dev2 = JSON.parse(JSON.stringify(wes2));
97+
dev2.name = 'Dev2';
98+
dev2.social.twitter = '@dev2';
99+
console.log(JSON.stringify(dev2));
100+
console.log(JSON.stringify(wes2));
101+
console.info('Noice');
102+
console.groupEnd();

Diff for: ‎14 - JavaScript References VS Copying/typescripts.ts

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/**
2+
* JavaScript30 by Wes Bos, https://javascript30.com/
3+
* TypeScript implementation by Will Wager
4+
* Project: JavaScript Reference VS Copying
5+
* Concepts: Pass by reference, pass by value
6+
* Key takeaways: booleans, numbers, and strings are by value, arrays and objects by reference.
7+
* Sidenotes: Use a lib for optimized deep clone (or better, don't deep clone at all);
8+
* I made the console output more readable.
9+
* Compilation command:
10+
* tsc --removeComments --strictNullChecks --noImplicitAny --target es6 typescripts.ts
11+
*/
12+
13+
// start with strings, numbers and booleans
14+
console.groupCollapsed('Strings, numbers, and booleans');
15+
let age = 100;
16+
let age2 = age;
17+
console.log(age, age2);
18+
age = 200;
19+
console.log(age, age2);
20+
21+
let myName = 'Will';
22+
let myName2 = myName;
23+
console.log(myName, myName2);
24+
myName = 'William';
25+
console.log(myName, myName2);
26+
27+
let bool = true;
28+
let bool2 = bool;
29+
console.log(bool, bool2);
30+
bool = false;
31+
console.log(bool, bool2);
32+
console.groupEnd();
33+
34+
35+
// Let's say we have an array
36+
console.groupCollapsed('Arrays');
37+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
38+
console.log('players:');
39+
console.table(players);
40+
41+
// and we want to make a copy of it.
42+
const team = players;
43+
console.log('team', team);
44+
45+
// You might think we can just do something like this:
46+
team[0] = 'Will';
47+
48+
// however what happens when we update that array?
49+
console.log('team', team);
50+
51+
// now here is the problem!
52+
console.log('players', players);
53+
console.warn('Oops!');
54+
// oh no - we have edited the original array too!
55+
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
56+
57+
// So, how do we fix this? We take a copy instead!
58+
const players2 = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
59+
console.log('players2:');
60+
console.table(players2);
61+
62+
// one way
63+
const team2 = players2.slice();
64+
console.log('team2', team2);
65+
team2[0] = 'Will';
66+
console.log('team2', team2);
67+
68+
// or create a new array and concat the old one in
69+
const team3 = ([] as string[]).concat(players2);
70+
console.log('team3', team3);
71+
team3[0] = 'Will';
72+
console.log('team3', team3);
73+
74+
75+
// or use the new ES6 Spread
76+
const team4 = [...players2];
77+
console.log('team4', team4);
78+
team4[0] = 'Will';
79+
console.log('team4', team4);
80+
81+
// Array.from
82+
const team5 = Array.from(players2);
83+
console.log('team5', team5);
84+
team5[0] = 'Will';
85+
console.log('team5', team5);
86+
87+
// now when we update it, the original one isn't changed
88+
console.log('players2', players2);
89+
console.info('Noice');
90+
91+
console.groupEnd();
92+
93+
94+
// The same thing goes for objects, let's say we have a person object
95+
console.groupCollapsed('Objects');
96+
// with Objects
97+
const person = {
98+
name: 'Wes Bos',
99+
age: 80
100+
};
101+
console.log('person', person);
102+
103+
// and think we make a copy:
104+
const captain: { name: string, age: number, number?: number } = person;
105+
captain.number = 99;
106+
console.log('captain', captain);
107+
console.log('person', person);
108+
console.warn('Oops!');
109+
110+
// how do we take a copy instead?
111+
const per2 = {
112+
name: 'Wes Bos',
113+
age: 80
114+
};
115+
116+
const cap2 = Object.assign({}, per2, { number: 99, age: 12 });
117+
console.log('cap2', cap2);
118+
119+
// We will hopefully soon see the object ...spread
120+
const cap3 = { ...per2 };
121+
cap3.name = 'Will Wager';
122+
cap3.age = 28;
123+
console.log('cap3', cap3);
124+
125+
console.log('per2', per2);
126+
console.info('Noice');
127+
128+
// 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.
129+
const wes = {
130+
name: 'Wes',
131+
age: 100,
132+
social: {
133+
twitter: '@wesbos',
134+
facebook: 'wesbos.developer'
135+
}
136+
};
137+
console.log(JSON.stringify(wes));
138+
139+
const dev = Object.assign({}, wes, { name: 'Dev' });
140+
dev.social.twitter = '@dev';
141+
console.log(JSON.stringify(dev));
142+
143+
console.log(JSON.stringify(wes));
144+
console.warn('Oops!');
145+
146+
// Easy, expensive deep clone
147+
const wes2 = {
148+
name: 'Wes2',
149+
age: 100,
150+
social: {
151+
twitter: '@wesbos',
152+
facebook: 'wesbos.developer'
153+
}
154+
};
155+
console.log(JSON.stringify(wes2));
156+
157+
const dev2 = JSON.parse(JSON.stringify(wes2));
158+
dev2.name = 'Dev2';
159+
dev2.social.twitter = '@dev2';
160+
console.log(JSON.stringify(dev2));
161+
console.log(JSON.stringify(wes2));
162+
console.info('Noice');
163+
164+
console.groupEnd();

0 commit comments

Comments
 (0)