JavaScript Primitives vs Reference Types

At the core of every programming language is the concept of storing small pieces of information (data) in some sort of holders called variables. JavaScript as a language is not an exception to this pattern. It is therefore very important that we understand these variables and how they hold various possible values.

In JavaScript as well as other languages, variables serve as a way of storing or holding data for some time until when they are needed again in the future. Since we want to be able to retrieve the stored data later, it makes a lot of sense to have a way of identifying each piece of data that we want. This is more like a label. Guess what these labels are, variables! We will understand all these better in a moment.

Data types are categorized into two broad groups, primitive types and reference or object types. The simple rule of thumb is that all values except the primitive ones are objects in JavaScript.

The Primitive data type also known as value types are quite easier to work with. The members in this group includes numbers, strings, booleans, undefined, null and symbol. When we make a copy of a variable that holds a primitive type, we end up copying the actual value of that particular variable. For example:

let age = 35; //variable 'age' holds the value 35 (a number)
let count = age; // we make a copy of age
console.log(count) //35 :count also holds the value of 35.
count = 56 // count now hold 56;
console.log(age) //35 :age still has 35 in it.

From the code above, we can deduce some vital behaviours of primitive types. First, when a copy of a primitive data type like ‘age’ is made, the copy ‘count’ also holds the same value. Second, when we change the value in the copy, the original version (‘age’ in our example) remains the same. Hence, we could conclude that the changes made in one copy of a primitive type is not seen in another copy.

Now, let’s take a closer look at the reference types. In JavaScript, there are several object types that we can work with such as objects, arrays, functions and many others. Reference types are much trickier to deal with and hence need to be properly explained. In JavaScript, objects are variables that contain a collection of key-value pairs. For example:

let person = {
   age: 45,
   job: 'developers'
   technologies: ['React.js', 'Next.js', 'TypeScript']
};

In the example above, ‘person’ is an object with keys age, job and technologies. The values are 45, ‘developer’ and an array of strings respectively. When it comes to making copies of object types, the process is not exactly the same as that of the primitives.

The reference types are copied not by their values but by the reference to which they point to in memory. In our example above, ‘person’ does not hold the value but instead a reference or pointer to a memory location where the actual value is stored. So what ‘person’ actually holds is like an address which eventually points to a specific location. For this same reason, when we make a copy of an object data type, we assign the address to the new copy as well. Hence, both the original object and its copy hold a reference to the same address in memory and since they access the same location, they have same value.

let person = {
   age: 45,
   job: 'developers'
   technologies: ['React.js', 'Next.js', 'TypeScript']
};
let employee = person; //person and employee point to same reference
console.log(person.age) // 45
console.log(employee.age) // 45 : same reference as person
let employee.age = 18; // altered age on employee
console.log(employee.age) // 18
console.log(person.age) // 18 : also altered on the original version

From the code snippet above, we can observe that when a change is made on a copy of reference type, the original version also mutates. This might sound a little confusing but the manner in which copies are made could serve as a hint for this strange behaviour. We’ve established earlier that for object types, copying is done by reference. Let’s assume that ‘aui345xl’ is an address of a wharehouse. Initially there are five cars in that wharehouse. If Mr ‘person’ is given the address and he makes it to the wharehouse, he would see the five cars in there. If that same address is given to Mr ‘employee’, he too would see five cars on getting to the location. Now, if Mr ‘employee’ adds one car, he would now be able to see six cars. Much later Mr ‘person’ goes to the same wharehouse, how may cars cars would he see? Six as well, right? Yes, since they are accessing the same same address, they will always see whatever change one of them makes to the wharehouse. This is the simple reason why we say that object types are reference and that they can be mutated.

In summary, primitive types are copied by values and can not be mutated while object types are copied by reference and are mutable.