Primitive and Non-Primitive Data storage in JavaScript

In JavaScript, Primitive data types are - string, number, boolean, undefined, null, symbol and non-primitive data types are - arrays and objects which are also known as Reference data types.

Let's see how it gets stored - There are basically two types of storage present in memory - the stack and the heap. Stack has very limited space and newly created variables gets added on the top of the stack, whereas Heap stores the data randomly at available memory location and has more space as compared to stack.

As Primitive datatypes needs lesser space as compared to reference/non-primitive data types, whenever we declare any variable it adds this variable in stack, as shown in below image -

Here, we are assigning personName to personFullName and it follows the same approach for storing personFullName in memory. In the similar way memory allocation works for all other Primitive data types.

Also refer another example for number datatype -

var totalCount = 10;

var startingCounter = totalCount;

totalCount += 10;

startingCounter += 40;

console.log('totalCount : ', totalCount);   // totalCount = 10 + 10 = 20

console.log('startingCounter : ', startingCounter); // startingCount = 10 + 40 = 50

Output -
totalCount : 20
startingCounter : 50

In above example, we assigned a value of totalCount to startingCounter and after that, even though we changed any of the variables value it does not affect the value of other variable. This is how the operation of copying data from one variable to another works for the Primitive data types.

Now, let's see how Non-Primitive datatypes gets stored in memory -

As shown in the image, for non-primitive data memory gets allocated in heap instead of in stack and then the pointer to this gets stored in the stack entry.

now, as per above example if we change a particular field in personDetails, it will also gets updated for secondPerson and vice a versa, as both the variables are pointing to the same memory location.

Refer below example for more details -

var personDetails = {
    name: 'Pranita',
    age: 78,
    designation: 'Developer'
}

var secondPerson = personDetails;

personDetails.name = 'Manu';    //   Updating name property in personDetails object

secondPerson.designation = 'Tester'; //   Updating designation property in secondPerson object

console.log('personDetails : ',personDetails);  //  designation value got updated in personDetails

console.log('secondPerson : ',secondPerson);    //  name value got updated in secondPerson

Output -
personDetails : {name: 'Manu', age: 78, designation: 'Tester'}
secondPerson : {name: 'Manu', age: 78, designation: 'Tester'}

In above example, we assigned a value of personDetails object to secondPerson object and after that when we try to update any of the object those changes will get reflected in both of the objects. This is how the operation of copying data from one variable to another works for the Non-Primitive data types.

There are some solutions to avoid this behaviour like lodash library, parse and stringify methods of JSON, slice method(only applicable for arrays and not for objects), those we will discuss in some other article...

Happy Coding!!!

Why Primitive and Non-primitive datatypes in JavaScript works differently when we try to copy data from one variable to another?

Did you find this article valuable?