DEV Community

Cover image for Understanding Primitives and Reference Types in JavaScript
The Nerdy Dev
The Nerdy Dev

Posted on • Originally published at the-nerdy-dev.com

Understanding Primitives and Reference Types in JavaScript

Hey guys πŸ‘‹πŸ»,
In this article, let us cover the topic of Understanding Primitives and Reference Types in JavaScript.

This article was first published on https://the-nerdy-dev.com/.
Check the website for more interesting articles and tutorials on Web Development.

Image description

Primitive value is stored directly in the location that the variable accesses. And the 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. This is something that I will demonstrate just a bit later. So stay with me

Basic Primitive Types and Reference Types

JavaScript supports 5 primitive data types: number, string, Boolean, undefined, and null.

These types are referred to as primitive types because they are the basic building blocks from which more complex types can be built. Of these five, only number, string, and boolean are real data types in the sense of actually storing data.

Undefined and null are types that arise under special circumstances. The primitive type has a fixed size in memory. For example, a number occupies eight bytes of memory, and a boolean value can be represented with only one bit.

Contrary to this, reference types can be of any length. They don't have a fixed size.

For primitives, they are always copied as a whole value whereas for reference types they are copied by reference.

For variables that hold values we only compare their values whereas in case of reference types like objects, it is not the case.

Consider this example :

const a= [1,2,3] 
const b = a; 
console.log(a === b); 
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

The above log gives true because both a and b are referencing to the exact same memory location. So let us say the memory for the arrow was allocated at some memory address of say 4k. So a is a reference that will point to the array object that is sitting at memory address 4k. So if you then assign a to b like we do above, then we have a new reference that points to the exact same object in the memory. So therefore since both the references point to the exact same object in the memory that is why it gives true for the strictly equality comparison between a and b (for the above log).

But if I declare another array with the exact same content say c

const c = [1,2,3]

Enter fullscreen mode Exit fullscreen mode

and then do this :

console.log(a === c)

Enter fullscreen mode Exit fullscreen mode

Image description

Then the above log will resolve to false because this new array will get allocated at a different memory location say 5k. So if we compare a and c using a strict equality comparison, then it will resolve to false because both the references a and c point to different memory locations namely 4k and 5k respectively and hence you get false.

Now consider example for primitives. For this case you just compare the values. So if we have :

const valueOne  = 3; 
const valueTwo = 3; 
const valueThree = 4; 
Enter fullscreen mode Exit fullscreen mode

and then we say :

console.log(valueOne === valueTwo);
Enter fullscreen mode Exit fullscreen mode

Then for the above log we make sure that both the type and the value are equal for the things (primitives under comparison). Both are 3 and both are numbers so hence we get true for this.

Next if we say

console.log(valueOne === valueThree).

Enter fullscreen mode Exit fullscreen mode

This will resolve to false because 3 and 4 are not equal.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚑Twitter : https://twitter.com/The_Nerdy_Dev

Don't forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

PS - If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Discussion (0)