Understanding Primitive Types and Reference Types in JavaScript

A straightforward guide with an example to help you understand primitive and reference types in JavaScript

In JavaScript, data assigned to a variable can be of two types: primitive and reference. JavaScript handles primitive and reference types differently; let's understand each with an example.

Primitive Types

Primitive types are simple and basic data types in JavaScript. They have fixed sizes in memory and are directly stored on the call stack.

List of Primitive Data Types:

Number (98, 3.5)
String ('Hello', "World")
Boolean (true or false)
Undefined (variable declared but value is not assigned)
Null (absence of value)

Reference Types

Reference types represent more complex data structures, such as objects, arrays, and functions.

These types are stored in the heap. Instead of holding the actual value, they hold a reference to the location in memory where the value is stored.

Assigning a variable to another reference type variable means you are creating a copy of the reference, not the actual data. This means that if the value is changed in one place, the original value will also be affected.

How are primitive and reference types stored in memory?

Let us look at a few examples to see how primitive and reference types handle memory differently.

Memory usage by primitive types:

Primitive types are stored as single, atomic values assigned directly to a variable in memory.

Let's look at the above example. I have created three variables:

a and assigned value 10
b and assigned value JS
c assigned value 10

We can observe that I have assigned the value a to c. In the case of primitive types, a new memory space is created for the variablec. Therefore, the value assigned to c is completely separate from a and does not reference it in any way.

Memory usage by reference types:

The reference value is stored as an object in memory. When copies are made, they all point to the same memory location.

Let's look at the above example. I have created 2 variables:

numbers and assigned value [1, 2, 3, 4, 5] with memory location 0x01
secondNumbers and assigned numbers variable.

You can see that secondNumbers is assigned the memory address of the numbers variable location. Even though we have created another variable, the location of both variables is the same.

Conclusion

Primitive types are simpler to work with for basic data.

Reference types provide more flexibility for storing and manipulating complex data structures.

Curious about Mutable and Immutable in JavaScript? Drop a comment, and I'll write another blog on that topic!

Thank you for taking the time to read this article 😊. I hope the article provided you with valuable insights. I would highly appreciate it if you take a moment to like 👍, share your thoughts or feedback comment ✍️, and share 🔁 it.

You can also follow me for more content on CSS, Javascript, React, Git and other web Development topics.

Happy Learning...! ✌️✌️✌️

For Paid collaboration mail me at: subramanyeshwarak@gmail.com

If you liked my content, Connect with me on, LinkedIn GitHub Twitter Instagram