24
loading...
Understanding JavaScript Primitive vrs Reference Values
Hello World, all programming languages have built-in data types. In JavaScript, there are seven well-known data types.
These
In this post, we will learn the difference between
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. 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 nullstringnumberssymbolbooleanobjectThese 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 ).There are six primitive data types
undefinednullstringnumbers symbolbooleanObject are considered reference or non-primitive values. Keep in mind that arrays and functions are classified as ObjectsThe 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, Object can have new properties added to it.array can have elements added or removed from it.reference values in the heap.When you assign a
This will help determine where to store the variable, either in the
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.When you declare a variable and assign a
primitive value to the variable, example let a = 40. The JavaScript engine stack
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 value 10 in that specific place we allocated for it (i.e A001).
Because the value, 10 is a primitive value, when you access **the variable, 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
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`.a and store a value of 40.b and copy the value stored in a 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 = 40Anytime 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 value 40.
When we declare b variable, we are also creating a location in the memory so we store a value. Let's call this location Bx001
Ax001 and Bx001 will be the location for two places in-memory where we are storing values.
Now, we copied the value stored in a to b
let a = 40;
let b = a; //copies value stored in `a` to `b`a into the location of b (ie. Bx001). Meaning at location Bx001 we now store the value 40.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 =40Changing 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 variables a and b are stored in different location in memory.
The value 40 is stored in the location Ax001 of the variable a whilst what ever value **is stored in variable b will be kept in the location **Bx001.
Eventhough we later assign the value stored in a to b, 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 variable b.
Variables a *and **b * have **no relationship,(due it their different locations in-memory).
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.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 address
Now if the script starts executing and it comes across a non primitive value eg.
user = {
firstName: "Emmanuel",
lastName: "Kumah"
}user variable is storing is a pointer, pointing to the **address **where the value is stored and not the actual 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 the user variable
Now in the call stack what we have access to, is the *reference * or pointer to the **actual value in the heap**
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
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 emmanuelThe difference is, the values stored in both variables will *be the address of the actual object stored on the heap. *
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 StephenFrom 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 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 )
24