Primitives Vs Objects (Reference Types)

Primitive types are immutable, objects only have an immutable reference, but their value can change over time.
By understanding the storing of data in Javascript we will understand it better.
First, we see, the examples of primitives :

PRIMITIVES

Number

String

Boolean

Undefined

Null

Symbol

Bigint

and here is the examples of Objects:

OBJECTS

Object literal

Arrays

Functions

Many more...

JavaScript engine has two components, the call stack, where functions are executed, and the heap where objects are stored in memory.
Primitives or primitive types are stored in the call stack and Objects or reference types are stored in Heap memory.
Let's start by looking at the example of primitive values.

Primitive values example:

let age  = 30;
let oldAge = age;
age = 31;
console. log(age);    // 31
console. log(oldAge);    // 30

So when we declare variables like age = 30, what actually happens inside the JavaScript engine in the computer's memory? Well, first, JavaScript creates a so-called unique identifier with the variable then a piece of memory will be allocated with certain addresses. So '0001' in this example, And finally, the value will be stored in memory at this specified address. So this case, the value 30, will be specified at memory address 0001. This all happens in a call stack, where primitive values are stored.

Reference values example:

const me = {
name: 'Jayesh',
age: 21
const friend = me;
friend.age = 27;

console. log( 'Friend:', friend);
// { name: 'Jonas', age: 27 }> 

console. log(`Me:', me);

// { name: 'Jonas', age: 27 }

Now with reference values, things work a bit differently. Well, when a new object is created, such as this object is stored in the heap and there is a memory address and then the value itself.
CALL STACK

- Identifier        Address                 Value

   me                 003                    D30F

HEAP

  Address                 Value

                    {
                         name : "Jayesh"
  D30F    ->
                          age :  30;
                    }
-  Reference to memory
address in Heap

Now in the case of reference values, the "me" identifier does actually not point directly to this newly created memory address and the heap.
Address D30F will point to a new piece of memory that's created and the stack and this new piece of memory will then point to the object that's in the heap by using the memory address as its value.
In other words, the piece of memory in the call stack has a reference to the piece of memory in the heap, which holds for the "me" object.
objects might be too large to be stored in the stack. Instead, they're stored in the heap, which is like an almost unlimited memory pool. And this just keeps a reference to where the object is actually stored in the heap so that it can find it whenever necessary.

Jayesh Hande's Blog

Jayesh Hande's Blog

Primitives Vs Objects (Reference Types)