|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <title>JS Reference VS Copy</title> |
6 | | - <link rel="icon" href="https://fav.farm/✅" /> |
| 6 | + <link rel="icon" href="https://fav.farm/🔥" /> |
7 | 7 | </head> |
8 | 8 | <body> |
9 | 9 |
|
|
12 | 12 | // let age = 100; |
13 | 13 | // let age2 = age; |
14 | 14 | // console.log(age, age2); |
15 | | - // age = 200; |
| 15 | + // age = 200 |
16 | 16 | // console.log(age, age2); |
17 | 17 |
|
18 | | - // let name = 'Wes'; |
| 18 | + // let name = 'Angela'; |
19 | 19 | // let name2 = name; |
20 | 20 | // console.log(name, name2); |
21 | | - // name = 'wesley'; |
| 21 | + // name = 'anne'; |
22 | 22 | // console.log(name, name2); |
23 | 23 |
|
24 | 24 | // Let's say we have an array |
25 | | - const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; |
| 25 | + const players = ['Angela', 'Sarah', 'Ryan', 'Poppy']; |
26 | 26 |
|
27 | 27 | // and we want to make a copy of it. |
28 | 28 | const team = players; |
29 | 29 |
|
30 | 30 | console.log(players, team); |
31 | 31 | // You might think we can just do something like this: |
32 | | - // team[3] = 'Lux'; |
| 32 | + //team[3] = 'Read'; |
33 | 33 |
|
34 | 34 | // however what happens when we update that array? |
35 | 35 |
|
|
41 | 41 |
|
42 | 42 | // So, how do we fix this? We take a copy instead! |
43 | 43 | const team2 = players.slice(); |
44 | | - |
| 44 | + |
45 | 45 | // one way |
46 | | - |
| 46 | + |
47 | 47 | // or create a new array and concat the old one in |
48 | | - const team3 = [].concat(players); |
| 48 | + const team3 = [].concat(players) |
49 | 49 |
|
50 | 50 | // or use the new ES6 Spread |
51 | 51 | const team4 = [...players]; |
52 | 52 | team4[3] = 'heeee hawww'; |
53 | 53 | console.log(team4); |
54 | 54 |
|
55 | | - const team5 = Array.from(players); |
| 55 | + const team5 = Array.from(players) |
56 | 56 |
|
57 | 57 | // now when we update it, the original one isn't changed |
58 | 58 |
|
59 | 59 | // The same thing goes for objects, let's say we have a person object |
60 | 60 |
|
61 | 61 | // with Objects |
62 | 62 | const person = { |
63 | | - name: 'Wes Bos', |
| 63 | + name: 'Angela Read', |
64 | 64 | age: 80 |
65 | 65 | }; |
66 | 66 |
|
|
73 | 73 | console.log(cap2); |
74 | 74 |
|
75 | 75 | // We will hopefully soon see the object ...spread |
76 | | - // const cap3 = {...person}; |
| 76 | + //const cap3 = {...person}; |
77 | 77 |
|
78 | 78 | // 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. |
79 | 79 |
|
80 | | - const wes = { |
81 | | - name: 'Wes', |
| 80 | + const angela = { |
| 81 | + name: 'angela', |
82 | 82 | age: 100, |
83 | 83 | social: { |
84 | | - twitter: '@wesbos', |
85 | | - facebook: 'wesbos.developer' |
| 84 | + twitter: '@angelaread', |
| 85 | + facebook: 'angelaread.developer' |
86 | 86 | } |
87 | 87 | }; |
88 | 88 |
|
89 | 89 | console.clear(); |
90 | | - console.log(wes); |
91 | | - |
92 | | - const dev = Object.assign({}, wes); |
93 | | - |
94 | | - const dev2 = JSON.parse(JSON.stringify(wes)); |
| 90 | + console.log(angela); |
95 | 91 |
|
| 92 | + const dev = Object.assign({}, angela); |
| 93 | + const dev2 = JSON.parse(JSON.stringify(angela)); |
96 | 94 |
|
97 | 95 | </script> |
98 | 96 |
|
|
0 commit comments