You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/02-object-copy/article.md
+27-14
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,12 @@
1
-
# Object copying, references
1
+
# Object references and copying
2
2
3
-
One of the fundamental differences of objects vs primitives is that they are stored and copied "by reference".
3
+
One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", as opposed to primitive values: strings, numbers, booleans, etc -- that are always copied "as a whole value".
4
4
5
-
Primitive values: strings, numbers, booleans -- are assigned/copied "as a whole value".
5
+
That's easy to understand if we look a bit "under a cover" of what happens when we copy a value.
6
6
7
-
For instance:
7
+
Let's start with a primitive, such as a string.
8
+
9
+
Here we put a copy of `message` into `phrase`:
8
10
9
11
```js
10
12
let message ="Hello!";
@@ -15,21 +17,31 @@ As a result we have two independent variables, each one is storing the string `"
15
17
16
18

17
19
20
+
Quite an obvious result, right?
21
+
18
22
Objects are not like that.
19
23
20
-
**A variable stores not the object itself, but its "address in memory", in other words "a reference" to it.**
24
+
**A variable assigned to an object stores not the object itself, but its "address in memory", in other words "a reference" to it.**
21
25
22
-
Here's the picture for the object:
26
+
Let's look at an example of such variable:
23
27
24
28
```js
25
29
let user = {
26
30
name:"John"
27
31
};
28
32
```
29
33
34
+
And here's how it's actually stored in memory:
35
+
30
36

31
37
32
-
Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it.
38
+
The object is stored somewhere in memory (at the right of the picture), while the `user` variable (at the left) has a "reference" to it.
39
+
40
+
We may think of an object variable, such as `user`, as of a sheet of paper with the address.
41
+
42
+
When we perform actions with the object, e.g. take a property `user.name`, JavaScript engine looks into that address and performs the operation on the actual object.
43
+
44
+
Now here's why it's important.
33
45
34
46
**When an object variable is copied -- the reference is copied, the object is not duplicated.**
35
47
@@ -45,6 +57,8 @@ Now we have two variables, each one with the reference to the same object:
45
57
46
58

47
59
60
+
As you can see, there's still one object, now with two variables that reference it.
61
+
48
62
We can use any variable to access the object and modify its contents:
49
63
50
64
```js run
@@ -59,15 +73,14 @@ admin.name = 'Pete'; // changed by the "admin" reference
59
73
alert(*!*user.name*/!*); //'Pete', changes are seen from the "user" reference
60
74
```
61
75
62
-
The example above demonstrates that there is only one object. As if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use another key (`user`) we can see changes.
63
76
64
-
## Comparison by reference
77
+
It's just as if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use another key (`user`) we can see changes.
65
78
66
-
The equality `==` and strict equality `===` operators for objects work exactly the same.
79
+
## Comparison by reference
67
80
68
-
**Two objects are equal only if they are the same object.**
81
+
Two objects are equal only if they are the same object.
69
82
70
-
Here two variables reference the same object, thus they are equal:
83
+
For instance, here `a` and `b` reference the same object, thus they are equal:
71
84
72
85
```js run
73
86
let a = {};
@@ -77,7 +90,7 @@ alert( a == b ); // true, both variables reference the same object
77
90
alert( a === b ); // true
78
91
```
79
92
80
-
And here two independent objects are not equal, even though both are empty:
93
+
And here two independent objects are not equal, even though they look alike (both are empty):
81
94
82
95
```js run
83
96
let a = {};
@@ -86,7 +99,7 @@ let b = {}; // two independent objects
86
99
alert( a == b ); // false
87
100
```
88
101
89
-
For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj ==5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons occur very rarely, usually as a result of a coding mistake.
102
+
For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj ==5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely, usually they appear as a result of a programming mistake.
0 commit comments