Primitive vs. Reference Value in JavaScript – What is the difference?7 min read

In some previous articles, we’ve gone through some programming concepts in JavaScript. We already know that JavaScript provides six primitive types as undefined, null, boolean, number, string, and symbol which was introduced in JavaScript ES6. But in this article, we’ll dig in another type of value, reference value, maybe you’ve heard of it, but still confused don’t know what exactly it is. So keep reading to figure it out.

I would like to talk more about JavaScript on the sidelines a little bit. This will pretty precise because I want to write another comprehensive article about it because if we explain in deep what I will say next here it will take for a day! If you’re using Google Chrome, V8 is a JavaScript engine that was developed by Google in September 2008 to compile and execute JavaScript codes (which is behind the scene, ya!). V8 uses a technique named “Just-in-time compilation” which means it compiles and executes JavaScript simultaneously that is the reason why it’s superior from other JavaScript engines because of its executable time. For number in JavaScript, JavaScript uses the IEEE 754 standard for formatting number also called floating-point number, the number always converted to decimal in machine code (which just contain either 0 or 1) when executing then converted back to the developer or user (in case you use console?!). That is the reason why 0.1 + 0.2 !== 0.3, but in the scope of this article, I’ll not dive in deep about this, instead, I will make another article and talk about it later on.

Primitive vs. Reference Value – What is the difference?

When you assign a variable a value, JavaScript engine (V8 perhaps, depends on your browser) must determine whether this value is a primitive value or reference value (which is a type of object).

The main difference between primitive value and the reference value is primitive types are passed by value, meaning they’re copied each time their value is used. This means the original value isn’t affected if it is referenced in a function. In other words, the variable that stores a primitive value is accessed by value, Object is passed by reference, meaning the object’s value is used through a reference and will be affected by a function if it is used, only object is the reference type.

Primitive Value

When you assign a variable that stores a primitive value to another, the value stored in the variable is created and copied into the new variable. Let’s consider an example below, first, we’ll define a variable named x with the initialized value of 10:

var a = 10; 

Then we define another variable, which named y then assign it a value of x. Internally, JavaScript will create a copy of value x to the value of y.

var y = x; // JavaScript engine creates a copy of value x then assign it to the value of y

Finally, we assign y value to the new value of 13

y = 13;

So what do you think about the value x and y after all of these steps?

var x = 10;
var y = x;
y = 13;

console.log(x); // 10
console.log(y); // 13

Because JavaScript engine just created a new copy of the value x then assign it to the y variable. x and y have no relationship to each other. So the initialized value of x remains intact.

Consider another example:

var primitiveValue = 10;
primitiveValue++;
function takeSomeValue(){
    return primitiveValue * 10;
}
console.log(primitiveValue);

So what do you think what is the value of primitiveValue will be printed out to the console? 110 or 11. If you know that insides takeSomeValue function it’s just a copy of primitiveValue variable then multiply by 10, then you got the point, it will log out the value of 11. Because inside console.log we invoked primitiveValue which was increased by 1 after the postfix increment. We didn’t call takeSomeValue function, which just takes the copy of primitiveValue.

Reference Value

Only object has data type as a reference value. When you assign a reference value from one variable to another, the value stored in the variable is also copied into the location of the new variable. The difference is that the values stored in both variables now are the address of the actual object stored in the heap. As a result, both variables are pointing to the same object. Consider the following example:

First, let’s create a variable named referenceObject that holds an object with name as its property and the value of it is Flop Flopian:

var referenceObject = {
name: "Flop Flopian"
}

Demonstrate the difference between reference values and primitive values by doing the same steps as we did with primitive value above. Assign value of referenceObject in this case is an object to the new variable, anotherObject:

var anotherObject = referenceObject;

Then, assign anotherObject property to the new cool name by using dot notation:

anotherObject.name = "Puppybutthole"

Then print out the name of referenceObject property:

console.log(referenceObject.name);

Output:

"Puppybutthole"

Because of both referenceObject and anotherObject are pointing to the same object, therefore, the change is also reflected if you access the object using the referenceObject variable. In this case, the name had been changed to “Puppybutthole”.

Another example:

var x = {
negativeNumber: - 2
}
var y = x;
y.negativeNumber = 3;
console.log(x.negativeNumber) // 3
// because those are pointing to the same object, as mentioned above.

Consider the following another example:

var primeNumbers1 = [2, 3, 5, 7, 13, 17];
var primeNumbers2 = [2, 3, 5, 7, 13, 17];
console.log(primeNumbers1 == primeNumbers2)

What is the output, can you guess? We’re expecting it will return true because those values look exactly the same, right? However, the result is false, why? Because the array is an object. And when comparing objects, we compare their reference value, rather than the actual objects. So in this case, primeNumber1 when compared with primeNumber2 will return false because they point to the different object locations. The result will return true if only those variables refer to the same object. The first variable is the fist list of prime numbers, the second variable is the second list of prime numbers, which are always distinct.

The comparison will evaluate to true if two objects point to the same object:

var primeNumbers1 = [2, 3, 5, 7, 13, 17];
var primeNumbers2 = primeNumbers1;
console.log(primeNumbers1 === primeNumbers2) // true

Let’s break things down again:

• First, we define a variable primeNumbers1 is an array (object) that contains some prime numbers, and its reference value is, for example, 50 and when we go to the address at the location 50, we see our actual object there.
• Then assign the value of primeNumbers1 to another variable primeNumber2, now two variables are pointing to the same reference, which is 50 and now they are pointing to the same object, therefore, true will return if we doing a comparison of two variable those point to the same object.

Conclusion

Whoo-wee, we’ve learned about some important concepts in JavaScript, primitive value and reference value. A primitive value is a value that when you manipulate its value, you are working on the actual value stored in the variable if we assign its value to the another variable, it will create the copy of the initialized value then assign it, they don’t have the relationship to each other, so change the value of the second one not affecting the first one and vice versa. The object is a reference type, if we assign this object to another object then manipulate the value of any, so they are the same because they are being pointed to the same object and the comparison between the two objects will return true.