Primitive vs Reference values in javascript

In javascript, a variable can hold one of two value types; either primitive values or reference values. This blogpost highlights the differences between the two types using elaborate examples to make it more understandable.

1. Primitive Values

Data types in this category are; Number, String, Boolean, null,undefined, and symbol in es6. When we assign a value to any of the mentioned variables, we are basically allocating that value to a particular memory space.
Example;
Let's assign students name to a string data type as follows;

let firstStudent = "Cyrus"; //Declare first student name
console.log(firstStudent);  //Print first student name - Cyrus
let secondStudent = firstStudent; //Declare second student name similar to first student name
console.log(secondStudent);//print second student name
secondStudent = "Hash"; //change the second student's name
console.log(secondStudent);//print new second student's name
console.log(firstStudent); //print first student's name

In this example, declaring the first name of data type String creates a memory space which is then allocated to the value "Cyrus" which is evident by printing the value. Declaring the second variable (secondStudent) and giving it the same value as the first, creates a completely new memory space that's allocated to the second variable.

To verify this, the value of the second variable is changed to "Hash". Each and every variable now carry different values that are of the same data type but carry completely different values and have a separate memory space.

In this example, a copy is created when we assign the second variable to the first variable. This copy is separate from the original copy (firstName) and may carry its own properties.

1. Reference Values

These include arrays, objects, and functions.

Reference types don't have actual values like Cyrus ** and **Hash in the first example but they do contain a reference to a particular value. Reference types are basically pointers to a memory location that holds the actual value.
Example; an array of multiple names;

const names1 = ["firstName", "secondName"]; //delcare first array
const names2 = names1; //assign second array to the first
console.log(names2); //print out the first array
names2[1] = "thirdName"; //change the second index of the second array
console.log(names1); //print out the first array
console.log(names2); //print out the second array

the first array (names1) carries two elements namely; firstName and secondName. The second array, (names2) copies the same elements from the first array(names1) but the difference between this scenario and the first scenario is that the two arrays remain linked specifically to the elements in both arrays. How?

Changing the second element (index1), from secondName to thirdName in the second array (names2), also changes the second element from the first array(names1). This is because reference types, do not copy the actual values but references/ pointers to the actual values.

Clearly, the major difference between primitive and reference types in javascript is primitive types have a fixed amount of memory space allocated to the values while reference types can be of any size or length.

Objects and arrays can be of any length while a function can contain any amount of JavaScript code and since the three can not have a specific memory size, they instead store a reference to the memory address.

I hope you learned something from this article and if so, please leave a comment below, share or even follow me on Twitter @cyrusCodes