Understanding Memory Allocation in JavaScript: Primitives vs. Reference Types.

Understanding how variables are processed and stored in Javascript is crucial for writing efficient and bug-free code. Two fundamental categories of variables, namely Primitive Types and Reference Types, play a vital role in shaping the behavior of your JavaScript programs. In this article, I will explain how they are stored and processed in the JavaScript engine.

JavaScript variables are broadly classified into two categories: Primitive Types and Reference Types. Primitive Types include simple data types like numbers, strings, booleans, null, and undefined, etc which are stored directly in the CallStack. On the other hand, Reference Types include more complex structures like objects and arrays, and they store references to their actual data, which resides in the heap memory.

When you create a variable of a primitive type, such as let age = 30;, An identifier is created and JavaScript allocates a specific memory space in the call stack to store the actual value (30 in this case). If you later create another variable and assign it the value of the first variable (let oldAge = age;), a new identifier is created that points to the address of the first variable.

These variables are entirely independent, and changing the value of one does not affect the other. so if you reassign a new value for the age variable, a new memory space is created to store the value and the identifier for the age variable now points to the new memory address.

let age = 30;
let oldAge = age;
age = 31;

Reference Types on the other hand introduce a layer of complexity. When you create an object:

const person = { name: "John", age: 30 };

the actual data is stored in the heap memory, and an identifier/reference is created in the call stack.

If you create another variable and set it equal to the first object:

const friend = person;

an identifier/reference is also created in the call stack both variables now point to the same address in the heap.

Modifying the data through one variable will reflect changes when accessed through the other variable.

let person = {
                name:"Jonas",
                age:30;
             }

let friend = person;
friend.age = 31;
console.log(person);
//prints { name:"Jonas", age:31; }

JavaScript employs a mechanism called garbage collection to manage memory. For Primitive Types, memory is straightforwardly reclaimed when the variable goes out of scope. However, for Reference Types, the JavaScript engine keeps track of references. If no variable is referencing a piece of data in the heap, it becomes eligible for garbage collection, freeing up memory.

In conclusion, understanding the difference between Primitive Types and Reference Types in JavaScript is vital for effective memory management. Primitive Types store values directly, ensuring independence between variables. On the other hand, Reference Types store references to data in the heap, enabling variables to share and manipulate the same data. This insight into how JavaScript processes these types empowers developers to write more efficient and predictable code.

Image Credit:

https://pin.it/36ybVge