|
9 | 9 |
|
10 | 10 | <script> |
11 | 11 | // 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); |
12 | 23 |
|
13 | 24 | // Let's say we have an array |
14 | 25 | const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; |
15 | 26 |
|
16 | 27 | // and we want to make a copy of it. |
| 28 | + const team = players; |
17 | 29 |
|
| 30 | + console.log(players, team); |
18 | 31 | // You might think we can just do something like this: |
19 | | - |
| 32 | + team[3] = 'Lux'; |
| 33 | + console.log(players, team); |
20 | 34 | // however what happens when we update that array? |
21 | 35 |
|
22 | 36 | // now here is the problem! |
|
26 | 40 | // Why? It's because that is an array reference, not an array copy. They both point to the same array! |
27 | 41 |
|
28 | 42 | // 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); |
29 | 49 |
|
30 | 50 | // one way |
31 | 51 |
|
32 | 52 | // or create a new array and concat the old one in |
33 | 53 |
|
34 | 54 | // 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 | + |
35 | 63 |
|
36 | 64 | // now when we update it, the original one isn't changed |
37 | 65 |
|
|
44 | 72 | }; |
45 | 73 |
|
46 | 74 | // and think we make a copy: |
| 75 | + const captain = person; |
| 76 | + captain.number = 90; |
| 77 | + console.log(person, captain); |
47 | 78 |
|
48 | 79 | // how do we take a copy instead? |
| 80 | + const captain2 = Object.assign({}, person, { number: 70 }); |
| 81 | + console.log(person, captain2); |
49 | 82 |
|
50 | 83 | // We will hopefully soon see the object ...spread |
| 84 | + // const captain3 = {...person}; |
| 85 | + // console.log(person, captain3); |
51 | 86 |
|
52 | 87 | // 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. |
53 | 88 |
|
| 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 | + |
54 | 111 | </script> |
55 | 112 |
|
56 | 113 | </body> |
|
0 commit comments