Hello World, all programming languages have built-in data types. In JavaScript, there are seven well-known data types.
These data
types can be grouped into primitive
and reference
values.
In this post, we will learn the difference between primitive
and reference
values in JavaScript.
Understanding the data types
In computer programming, a data type tells the compiler or interpreter what type of value a variable has.
There are seven data types in the JavaScript programming language.
-
undefined
null
string
numbers
symbol
boolean
object
These data types can be grouped into primitive
and reference
values ( a value can be seen as some kind of data which will be stored in a varaible ).
Primitive data types
There are six primitive data types
undefined
null
string
-
numbers
symbol
boolean
Non Primitive data type
Object
are considered reference
or non-primitive
values. Keep in mind that arrays
and functions
are classified as Objects
Storing the data types or values
The JavaScript engine has two places where it store data or values, they are the stack
and heap
.
Primitive data types do not have complex values, their values are fixed hence stored in the stack
.
However, the size of a reference
value is dynamic or complex. For instance,
- An
Object
can have new properties added to it. - An
array
can have elements added or removed from it. - A function can have so many lines of code and more statements being added.
Due to all these complexities, we store
reference
values in theheap
.
Assinging values
When you assign a value
to a variable
, the JavaScript engine will determine whether the value is a primitive
or reference
value.
This will help determine where to store the variable, either in the stack
or heap
.
Accessing a primitive value
When you declare a variable and assign a primitive
value to the variable, example let a = 40
. The JavaScript engine
- Will allocate some memory or space in the
stack
- Give it a unique identifier which is an address or location to help locate the value when the need be
- Initialize the variable and assign the value.
Let's see an example
var x = 10;
In the above code:
The JavaScript engine will create a unique identifer (Eg. A001) in the browser's memory, and the assignment operator
=
will now assign or store the value10
in that specific place we allocated for it (i.e A001).Because the value,
10
is a primitive value, when you access **thevariable
, you will use or manipulate the **actual value stored in that variable.This means, the variable that stores a primitive value is accessed by value
Copying primitive values
Let's see what happens when you decide to assign a variable that stores a primitive value to another variable.
When you assign any variable that contains a primitive value to a new variable, the value stored in the initial variable is created and copied to the new variable.
Let's take a look at the example below
let a = 40;
let b = a; //assign value stored in`a` to `b`.
- First we declare a variable
a
and store a value of40
. - Next, we declare another variable
b
and copy the value stored ina
to it. Let's check the output of both variables
console.log(`a =${a} and b = ${b}`)
The output will be
a =40 and b = 40
Anytime a variable is declared, we allocated a location in memory and store the value there.
In the above, with
let a = 40
, we allocated a location **in memory lets call that allocated location **Ax001. Meaning when we go the Ax001, we can have access to the value40
.When we declare
b
variable, we are also creating a location in the memory so we store a value. Let's call this location Bx001Ax001 and Bx001 will be the location for two places in-memory where we are storing values.
Now, we copied the value stored in
a
tob
let a = 40;
let b = a; //copies value stored in `a` to `b`
- Internally, JavaScript engine will copy the value stored in
a
into the location of b (ie. Bx001). Meaning at location Bx001 we now store the value40
.
Changing the initial value
We then decide to change the value we stored in the variable a
, would the value stored in variable b
change too ?
a = 50; //change value stored in a
console.log(`a =${a} and b=${b})
The output will be
a =50 and b =40
Changing the value stored in a
does not change the value stored in b
. Eventhough , the value of a
has been assigned to b
Why ?
This is what is happening
The
values
of variablesa
andb
are stored in different location in memory.The value
40
is stored in the location Ax001 of the variablea
whilst what ever value **is stored in variableb
will be kept in the location **Bx001.Eventhough we later assign the value stored in
a
tob
, they have been stored in two separate locations.So if you change the value of variable
a
, it will not change the value stored in variableb
.Variables a *and **b * have **no relationship,(due it their different locations in-memory).
In Summary
In summary for primitive values, when you change the value stored in the a
variable, the value of the b
variable doesn’t change.Because a
and b
are different locations in memory.
Accessing an non-primitive value
We have mentioned that non-primitive values are stored in the heap
this is because non-primitive values have complex data structure so need some huge memory to store it.
When we define a variable and assign a non-primitive data type to it. This is what happens:
The JS engine creates a unique identifier or address **eg(NPx001), allocate some memory or space in the
heap
and store the **actual value at that addressNow if the script starts executing and it comes across a
non primitive
value eg.
user = {
firstName: "Emmanuel",
lastName: "Kumah"
}
- What the
user
variable is storing is a pointer, pointing to the **address **where the value is stored and not the actual value. - It is not the data value itself, but it tells the variable where to look to find the value.
If you looked at the in-memory value of a reference type, you’d see a memory address (or a “reference” to a spot in memory).
Because the actual value is stored in the heap and we need access to it, we will create a reference ** or some form of pointer on the variable, eg.
user
and forward ** the location to the value stored in the heap to theuser
variableNow in the call
stack
what we have access to, is the *reference * or pointer to the **actual value in theheap
**Meanning, when you want to use an object or any non-primitive data type, you work on the reference of that object,rather than the actual object.
When we access a reference value, we manipulate it through reference, not through its actual value that is stored. Thus, variables that are reference values are accessed by reference
Copying reference value
When we assign a variable that stores a reference value to another variable, the value stored in the initial variable is also copied into the location of the new variable.
let user = {
firstName: "emmanuel",
location: "Ghana"
}
let admin = user; //assign variable to new variable
console.log(`admin is ${admin.firstName} and user is ${user.firstName}`);
The output will be
admin is emmanuel and user is emmanuel
The difference is, the values stored in both variables will *be the address of the actual object stored on the heap. *
Changing the values
Both variables are referencing the same object. Meaning, we can manipulate the original object from both variables
Let's try and change the firstName
property of the user
object and see what will happen to properties in admin
object.
See the code below
let user = {
firstName: "emmanuel",
location: "Ghana"
}
let admin = user; // assign user to admin
console.log(`admin is ${admin.firstName} and user is ${user.firstName}`);
admin.firstName = "Stephen"; //change the firstName property
console.log(`admin is ${admin.firstName} and user is ${user.firstName}`);
The output will be
admin is emmanuel and user is emmanuel
admin is Stephen and user is Stephen
From the above, when we change the value stored in the user
object, it also changed the value stored in the admin
object.
We can therefore manipulate the orginal object from both variables, and changing one property in one variable, will change the property in the other variable.
In summary
In this post, we learnt that a varaible can chold one of two value types: primitive
values or reference
values.
Primitive values are data that are stored on the stack.
Primitive value is stored directly in the location that the variable acesses.
Reference values are objects that are stored in the heap
Reference value stored in the variable location is a pointer to a location in memory where the object is stored.
If you found value in this post, kindly share it to your social networks. It will be of value to someone else. Would love to read your comment on this post too.
Written with love from Ghana , me daa se (thank you )
Top comments (0)