3.15. By Value Versus by Reference
In JavaScript, as in all programming languages, you can manipulate a data value in three important ways.First, you can copy it. For example, you might assign it to a new variable. Second, you can pass it as an argument to a function or method. Third, you can compare it with another value to see whether the two values are equal. To understand any programming language, you must understand how these three operations are performed in that language.
There are two fundamentally distinct ways to manipulate data values. These techniques are called by value and by reference. When a datum is manipulated by value, it is the value of the datum that matters. In an assignment, a copy of the actual value is made, and that copy is stored in a variable, object property, or array element; the copy and the original are two totally independent values that are stored separately. When a datum is passed by value to a function, a copy of the datum is passed to the function; if the function modifies the value, the change affects only the function's copy of the datumit does not affect the original datum. Finally, when a datum is compared by value to another datum, the two distinct pieces of data must represent exactly the same value (which usually means that a byte-by-byte comparison finds them to be equal).
The other way to manipulate a value is by reference. With this technique, there is only one actual copy of the value; references to that value are manipulated. If a value is manipulated by reference, variables do not hold that value directly; they hold only references to it. It is these references that are copied, passed, and compared. So, in an assignment made by reference, it is the reference to the value that is assigned, not a copy of the value and not the value itself. After the assignment, the new variable refers to the same value that the original variable refers to. Both references are equally valid, and both can be used to manipulate the value; if the value is changed through one reference, that change also appears through the original reference. The situation is similar when a value is passed to a function by reference. A reference to the value is passed to the function, and the function can use that reference to modify the value itself; any such modifications are visible outside the function. Finally, when a value is compared to another by reference, the two references are compared to see if they refer to the same unique copy of a value; references to two distinct values that happen to be equivalent (i.e., consist of the same bytes) are not treated as equal.
These are two very different ways of manipulating values, and they have important implications that you should understand. Table 3-4 summarizes these implications. This discussion of manipulating data by value and by reference has been a general one, but the distinctions apply to all programming languages. The sections that follow explain how these distinctions apply specifically to JavaScript; they discuss which datatypes are manipulated by value and which are manipulated by reference.
By value | By reference | |
---|---|---|
Copy | The value is actually copied; there are two distinct, independent copies. | Only a reference to the value is copied. If the value is modified through the new reference, that change is also visible through the original reference. |
Pass | A distinct copy of the value is passed to the function; changes to it have no effect outside the function. | A reference to the value is passed to the function. If the function modifies the value through the passed reference, the modification is visible outside the function. |
Compare | Two distinct values are compared (often byte by byte) to see if they are the same value. | Two references are compared to see if they refer to the same value. Two references to distinct values are not equal, even if the two values consist of the same bytes. |
By Value Versus by Reference: Summary
Table 3-5 summarizes the way that the various JavaScript types are manipulated.
Type | Copied by | Passed by | Compared by |
---|---|---|---|
number | Value | Value | Value |
boolean | Value | Value | Value |
string | Immutable | Immutable | Value |
object | Reference | Reference | Reference |