Skip to content

Commit 15554e3

Browse files
Finalizando o dia 14
1 parent 4886880 commit 15554e3

File tree

1 file changed

+58
-1
lines changed

1 file changed

+58
-1
lines changed

14-JavaScriptReferencesVSCopying/finish.html

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,28 @@
99

1010
<script>
1111
// start with strings, numbers and booleans
12+
let age = 100;
13+
let age2 = age;
14+
console.log(age, age2);
15+
age = 200;
16+
console.log(age, age2);
17+
18+
let name = 'Wes';
19+
let name2 = name;
20+
console.log(name, name2);
21+
name = 'wesley';
22+
console.log(name, name2);
1223

1324
// Let's say we have an array
1425
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
1526

1627
// and we want to make a copy of it.
28+
const team = players;
1729

30+
console.log(players, team);
1831
// You might think we can just do something like this:
19-
32+
team[3] = 'Lux';
33+
console.log(players, team);
2034
// however what happens when we update that array?
2135

2236
// now here is the problem!
@@ -26,12 +40,26 @@
2640
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
2741

2842
// So, how do we fix this? We take a copy instead!
43+
const team2 = players.slice();
44+
team2[3] = 'Fred';
45+
console.log(players, team2);
46+
const team3 = [].concat(players);
47+
team3[3] = 'David';
48+
console.log(players, team3);
2949

3050
// one way
3151

3252
// or create a new array and concat the old one in
3353

3454
// or use the new ES6 Spread
55+
const team4 = [...players];
56+
team4[3] = 'Bob';
57+
console.log(players, team4);
58+
59+
const team5 = Array.from(players);
60+
team5[3] = 'Ana';
61+
console.log(players, team5);
62+
3563

3664
// now when we update it, the original one isn't changed
3765

@@ -44,13 +72,42 @@
4472
};
4573

4674
// and think we make a copy:
75+
const captain = person;
76+
captain.number = 90;
77+
console.log(person, captain);
4778

4879
// how do we take a copy instead?
80+
const captain2 = Object.assign({}, person, { number: 70 });
81+
console.log(person, captain2);
4982

5083
// We will hopefully soon see the object ...spread
84+
// const captain3 = {...person};
85+
// console.log(person, captain3);
5186

5287
// 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.
5388

89+
const wesbos = {
90+
name: 'WesBos',
91+
age: 60,
92+
social: {
93+
twitter: '@wesbos',
94+
facebook: 'wesbos.developer'
95+
}
96+
};
97+
console.log(wesbos);
98+
99+
const developer = Object.assign({}, wesbos);
100+
console.log(developer);
101+
developer.name = 'Wesley';
102+
console.log(developer, wesbos);
103+
104+
developer.social.twitter = '@coolman';
105+
console.log(developer, wesbos);
106+
107+
const developer2 = JSON.parse(JSON.stringify(wesbos));
108+
developer2.social.twitter = '@awesomeman';
109+
console.log(developer2, wesbos);
110+
54111
</script>
55112

56113
</body>

0 commit comments

Comments
 (0)