Primitive & Reference Types

Open the project folder

Grouping data types

We use variables a lot in coding and JavaScript to store data. If we go a little deeper there is an important concept to understand, and that is the values we store fall into two groups. To better understand this, let's refresh what we already know about data types.

We have primitive values, which are simpler values, such as a string or number that has no methods or properties. They can not be altered and therfore considered immutable.

We also have object types too. These are more of a collection of data such as an array, object, or function. These two groups directly relate to what we are going to look at now, and this is storing primitive and reference types.

A string variable would be a primitive, and an object type such as an array variable would be classed as a reference type. Both types impact the behaviour of values when we pass them around and compare them.

Primitive types

First, let’s look at primitives:

// 1. create new dog
let dog = 'Poodle';

// 2. copy dog and store as new variable
let newDog = dog;

// 3. "reassign" new dog to be something else:
newDog = 'Labrador';

// 4. test:
console.log(dog); // Poodle
console.log(newDog); // Labrador

Nothing unexpected happens here in the console, even though we have copied a variable, the new one is a separate value, completely independent of the original. We can modify any of them and they will not affect each other. And this is the behaviour of primitives. The variable points to the actual saved value.

Reference types

Objects behave differently. Let’s also do an example using an object which we copy:

// create object
let laptop1 = {
  brand: 'Apple',
  model: 'Macbook Pro',
};

// copy object
let laptop2 = laptop1;
laptop2.size = 16;

console.log(laptop1); // {brand: "Apple", model: "Macbook Pro", size: 16}
console.log(laptop2); // {brand: "Apple", model: "Macbook Pro", size: 16}

Even though we have only added the size property to the laptop2, it is showing on both objects. There appears to be a link between these objects when we copied them.

Differences between primitive and reference type

When we create a variable storing a primitive such as a string, the variable points to an actual unique value stored in memory. They are independent values.

When we create a variable containing an object type, the object is still stored in memory, but the variable holds a reference to that object’s location, not the actual value, hence the name reference type.

So, we create an object called laptop1, and then any further copies we make then points to the original object. And since copies are all pointing to the same value, therefore when we modify one of them, they will all be updated. Some other languages allow us to change this behaviour, but with JavaScript it is fixed.

Recap

• When we create a variable storing a primitive such as a string, the variable points to an actual unique value stored in memory.
• When we create a variable containing an object type, the object is still store in memory, but the variable holds a reference to that object’s location, not the actual value, hence the name reference type.

This is something which you probably don’t care too much about until you maybe run into an issue where you change an object and they all change unexpectedly, and you don’t know what is causing the issue.

And with this in mind, next we are going to cover how we can compare two objects.