Understanding Javascript Primitives and References
Learn the difference between primitive and reference data types in Javascript.
Table of contents
As a developer, they might ask if you understand the difference between primitive and reference data types. Primitive data types can store information as a slot in memory (memory address) while reference data types store a reference to a slot in memory.
Let’s have a closer look at javascript primitive and reference data types to understand it better.
Primitive data types
Primitive data types are booleans, numbers, strings, null, undefined, and symbols. When you set a variable with a primitive type the variable is that exact value. If you change the value, the variable simply becomes a new value.
When we write a primitive data type like this:
let colorOne = 'green';
On the call stack, the variable *colorOne* directly points to the value ‘green’.
Call Stack
#000 colorOne -> | 'green' |
#001 | |
And if we change the value of the variable colorOne
, the colorOne memory address #000
which holds the value green
is directly changed to purple
.
let colorOne = 'green',
colorOne = 'purple';
Reference data types
Reference data types are also known as complex types or container types. A reference data type can contain other values. Reference data types are arrays and objects. Since the contents of a reference data type cannot fit in the fixed amount of memory available for a variable, the in-memory value of a reference type is the reference itself (a memory address). The variable only knows the location of the object, not the object itself.
If we write a reference data type like this:
let color = {
primaryColor: 'green'
};
OR
let color = new Object();
color.primaryColor = 'green';
Javascript will create the object in heap memory (a location in memory where memory may be allocated at random access) and store the memory address of the object in the color call stack location:
Call Stack Heap
#000 color -> | #101 | #101 | primaryColor: 'green' |
#001 | | #102 | |
Like you see the variable color doesn’t store the object directly but it points to the memory location (#101) of the object. Unlike primitive data types that hold their value directly. If you pass a reference data type around, you are merely passing the address of its memory location, not the actual value. Any change to the reference data type affects the memory it points to.
Conclusion
We have gone through the basics of javascript primitive and reference data types. This is an important topic because as a developer you should know the fundamentals of the language.
Thank you for reading & happy coding.