Primitive and Reference Data types in JavaScript

There are various data types in JavaScript like – String, Number, Boolean, Object etc.

But if you categorize these data types according to memory allocation, then you find two main data types – Primitive and Non-Primitive or Reference data types.

1. Primitive data types in JavaScript

Primitive data types are stored on a stack. A Stack is a place of memory where the computer stores the types of data that are small in size.

Although a Stack is smaller in size than Heap memory, but it is much faster than the Heap memory to store and retrieve data.

Primitive data types

• string
• number
• bigint
• boolean
• undefined
• symbol
• null

How are primitive data types stored in memory?

---

2. Reference data types in JavaScript

Reference data types are stored on a Heap. Heap is also part of a memory like stack, but it is used for the dynamic memory allocation.

Unlike primitive data types, reference data types are dynamic in nature, means they do not have a fixed size (Size can be increased or decreased), and that’s why Reference data types are perfect for storing in the heap.

Reference data types

• Object
• Function
• Array

Reference data type example

In the following code you can see there is a variable a that holds an object that contains name and age properties.

In the very next the b variable copied the a variable (let b = a).

After that, the name property of the b variable (b.name) has been changed from "John" to "Mark".

Now when we console.log both variables, we see that the b.name as well as a.name have also changed into "Mark". Why is this happening?

let a = {
    name:"John",
    age:22
};

let b = a;

b.name = "Mark";

console.log('a => ', a);
console.log('b => ', b);

a =>  { name: 'Mark', age: 22 }
b =>  { name: 'Mark', age: 22 }

How are reference data types stored in memory?

When you assign an object to a variable, the object will be stored in the heap memory with a unique address (the address is to uniquely identify the object).

After storing the object in the heap, the address of the object will be stored in the stack for the variable, so the variable can access the object through the address. Look at the following image –

When you Copy a JavaScript Object

When you copy a JavaScript Object (which is a reference type of data), It does not copy the object, It copies the address of the object, which means they are pointing to the same object.

So if you make a change on an object via a variable, the change will reflect all the variables that are pointing to the object.