# 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.

### 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];
console.log(primeNumbers1 === primeNumbers2) // true
• 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.