Passing Variables by Value vs. by Reference - jpjohnsonjr/learning-notes GitHub Wiki

About

What does it mean to "pass a variable by value"?

Given b=a, passing / copying by variable means changing the value in b does not change the value stored in a and vice versa

That is, if the the value of b is changed after the original value was copied to a, a stays the way it was before b was changed.

What does it mean to "pass a value by reference"?

Given b=a, passing / copying by reference means changing copied value in b does affect the value stored in a and vice versa.

In Javascript, primitives are passed by value, objects are passed by reference.

Basic Examples

Passing by Value

Take for example the following code snip-its:

 1 var a = 7;
 2 var b = a;
 3 b = 5;

What happens in the above snip-it?

Line 1: Memory is allocated to a with value 7. (Memory address "0x001")
Line 2: We declare variable b and copy the contents of variable a into b. (Memory address "0x002")
Line 3: We overwrite the value in Memory address 0x002 with a new value: 5.

Passing by Reference

Below is the same scenario, but with objects rather than variables -- "passed by reference":

 4 var a = {x: 7};
 5 var b = a;
 6 b.x = 5;

What's happening here?

Line 4: Memory address 0x001 references the property of x:7 in memory address 0x003.
Line 5: b is set as equivalent to a and is allocated a memory address 0x004, which also references 0x003.
Line 6: Updates the memory location to which b is pointing, giving it a value of 5 instead of 7.

The end result is that the value of a is also changed through this operation.

More Detailed Examples

An illustration of copy by value (primitives)

 2 var a = 7;
 3 var b = a;
 4 console.log("a: " + a);
 5 console.log("b: " + b);
 6
 7 b = 5;
 8 console.log("after b update:");
 9 console.log("a: " + a);
10 console.log("b: " + b);

The example above illustrates what happens when variables are copied by value. Consoling the result out displays following outputs:

Lines 2-5 will display in the console as follows:

a: 7          script.js:4
b: 7          script.js:5

Lines 9-10 will display in the console as follows:

a: 7          script.js:9
b: 5          script.js:10

Because values are primitive (not objects), copying b to a in lines 2-5 is a one-time thing; when the value of b is changed separately, they "go their separate ways."

An illustration of copy by reference (objects)

14 var a = { x: 7 };
15 var b = a;
16 console.log(a);
17 console.log(b);
18
19 b.x = 5;
20 console.log("after b.x update")
21 console.log(a);
22 console.log(b);

The example above illustrates what happens when values are copied by reference. Consoling the result out displays the following outputs:

Object {x: 7}         script.js:16
Object {x: 7}         script.js:17
Object {x: 5}         script.js:21
Object {x: 5}         script.js:22

Both the a and b variables are referencing the same location in memory. They are not simply one-time copies of each other. When the reference changes, the value of the variables changes and thus the output changes.

Example using a function (consoled annotations excluded from code for brevity)

30 function changePrimitive(primValue) {
...
33   console.log(primValue);
34
35 primValue = 5;
... 
37 console.log(primValue);
38 }
39 
40 var value = 7;
41 changePrimitive(value);
... 
43 console.log(value);

The above will display changePrimitive value as 7 before and 5 after.