Skip to content

Commit 6570cb3

Browse files
committed
Updating Day wesbos#14 with completed code
1 parent edf1c46 commit 6570cb3

File tree

1 file changed

+48
-14
lines changed

1 file changed

+48
-14
lines changed

14 - JavaScript References VS Copying/index-WORKING.html

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,27 @@
88

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

2523
// Let's say we have an array
2624
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
2725

2826
// and we want to make a copy of it.
27+
const team = players;
2928

29+
console.log(players, team);
3030
// You might think we can just do something like this:
31+
// team[3] = 'Lux';
3132

3233
// however what happens when we update that array?
3334

@@ -38,27 +39,60 @@
3839
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
3940

4041
// So, how do we fix this? We take a copy instead!
42+
const team2 = players.slice();
4143

42-
// one way
44+
// one day
4345

4446
// or create a new array and concat the old one in
47+
const team3 = [].concat(players);
4548

4649
// or use the new ES6 Spread
50+
const team4 = [...players];
51+
team4[3] = 'heeee hawww';
52+
console.log(team4);
53+
54+
const team5 = Array.from(players);
4755

4856
// now when we update it, the original one isn't changed
4957

5058
// The same thing goes for objects, let's say we have a person object
5159

5260
// with Objects
61+
const person = {
62+
name: 'Wes Bos',
63+
age: 80
64+
};
5365

5466
// and think we make a copy:
67+
// const captain = person;
68+
// captain.number = 99;
5569

5670
// how do we take a copy instead?
71+
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
72+
console.log(cap2);
5773

5874
// We will hopefully soon see the object ...spread
75+
// const cap3 = {...person};
5976

6077
// 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.
6178

79+
const wes = {
80+
name: 'Wes',
81+
age: 100,
82+
social: {
83+
twitter: '@wesbos',
84+
facebook: 'wesbos.developer'
85+
}
86+
};
87+
88+
console.clear();
89+
console.log(wes);
90+
91+
const dev = Object.assign({}, wes);
92+
93+
const dev2 = JSON.parse(JSON.stringify(wes));
94+
95+
6296
</script>
6397

6498
</body>

0 commit comments

Comments
 (0)