How JavaScript Uses Stack and Heap Memory

Memory management is essential in programming, as it influences how code executes. All elements, including variables, loops, and functions, require effective memory allocation to operate efficiently.

In JavaScript, memory management involves two primary components: the stack and the heap. The method of memory allocation depends on the type of data being handled, specifically whether it is a primitive or non-primitive data type.

JavaScript categorizes data types based on their storage in memory:

• Stack: This is used for primitive types, which include numbers, strings, booleans, null, undefined, symbols, and bigints.

• Heap: This is used for non-primitive types, also known as reference types, such as objects, arrays, and functions.

Understanding this distinction is crucial, as it affects whether a value is stored directly or as a reference to a memory location.

Stack Memory:

Stack memory stores data by value, meaning each variable has its own copy of the data. Let’s clarify this concept.

When you assign a value to a variable, such as a number or a string, that value is stored directly in the stack. If you assign that same value to another variable, a new copy of the value is created and stored separately.

As a result, if you modify the new variable, the original variable remains unchanged because they do not share the same memory reference. They are completely independent of each other.

This behavior applies to primitive data types, including numbers, strings, booleans, null, undefined, and symbols.

Let’s do some demonstrations!

let oldVariable = "Tech Stuart"
let newVaribale = oldVaribale

console.log(newVariable) // Tech Stuart
console.log(oldVaribale) // Tech Stuart

newVaribale = "Garfield"

console.log(newVariable) // Garfield
console.log(oldVariable) // Tech Stuart

In the above code, we declared two different named variables, oldVariable and newVariable and assigned the same value "Tech Stuart" to them. After comparing the consoles of both, they resulted in the same values before being assigned different values, newVariable as “Garfield“. So it proves that primitive datatypes generate a copy of the stored value to be further interpreted, not an old one to mutate.

Heap Memory:

In Heap Memory, non-primitive datatypes are stored as reference types. Now, this would be explained in this way. When you assign a variable like an array object or any function. It creates heap memory, like storing a value by its reference.

In a simple explanation, when you declare a variable of an object and assign values to it, like name, age, and city. Then you declare a new variable of an object and assign the same value just like the old one had, you can easily mutate and modify it with the original reference.

The result of both objects will be changed. Let's break the ice on it.

let oldObject = {
    name: "Tech Stuart",
    age: 22,
    city: "New York"
}

let newObject = oldObject
console.log(newObject) // {name: "Tech Stuart", age: 22, city: Karachi}

newObject.name = "Garfield"
newObject.age = 30
newObject.city = "Dallas"

// Result
console.log(oldObject) // { name: 'Garfield', age: 30, city: 'Dallas' }
console.log(newObject) // { name: 'Garfield', age: 30, city: 'Dallas' }

See the above code has a well-defined structure of mutation of both objects with different names, like oldObject newObject variables, but have the same value {name: "Tech Stuart", age: 22, city: Karachi} , and after interpretation, the result of the original value in both assigned variables has changed to { name: 'Garfield', age: 30, city: 'Dallas' }. This is stored by reference type.

Conclusion:

I hope this article explains in detail that JavaScript memory is managed in two main ways: the stack and the heap.

• Stack is used for simple values like numbers, strings, and booleans. These are called primitive types. When you copy them, you get a new value. Changing one doesn't affect the other.

• Heap is used for complex values like objects, arrays, and functions. These are reference types. When you copy them, you're copying the reference, not the actual value. So if you change one, the other changes too.

Knowing this helps you understand how your code works and why some things change while others don’t.

Happy Coding!