Primitive and Reference type data in JavaScript

Home » Blog » JavaScript » Primitive and Reference type data in JavaScript

Today we are going to discuss what is the difference between primitive type and reference type data in JavaScript and how these data types work. As a JavaScript programmer you need to have a clear knowledge of these data types.

There are two types of data types in JavaScript.

  • Primitive data type and

  • Non-primitive or reference data type

In JavaScript, Strings, Numbers, Boolean, Null, undefined, these data types are known as primitive data types and Arrays, Objects are known as non-primitive or reference data types. The basic difference is that primitive data is immutable and non-primitive data is mutable.

Recommended: JavaScript ES6 Cheat Sheet

Primitive data type

Primitive data is known as immutable or immutable data type because once this data is created there is no way to change it. Then let’s prove it to you.

let str1 = "Hi there, I am a string!";
 
console.log(str1[1]); // "i"
 
str1[1] = "e";
console.log(str1); // "Hi there, I am a string!"

Run the code above and see the charisma of JavaScript. Everything went over your head? Well, let’s explain the matter. You can’t change the value of a string even if you want to a thousand times. Because the string is an immutable or immutable. One thing to keep in mind is that if you assign a string to a variable and you want to modify the string after assigning it, you will get a new string. E.g.- .toUpperCase (), .slice (), .trim() etc.

let str1 = "Hi there, I am a string!";
 
let newStr = str1.toUpperCase();
 
console.log(newStr); 

// HI THERE, I AM A STRING!

console.log(str1);

// Hi there, I am a string!

Primitive data types compare with each other by their value.

let str1 = "Hi there, I am a string!";  
let str2 = "Hi there, I am a string!";  
 
console.log(str1 == str2); // true
console.log(str1 === str2); // true
 
let num1 = 6;
let num2 = 6;
 
console.log(num1 == num2); // true
console.log(num1 === num2); // true

Primitive types always pass their value. Let’s look at an example:

let num1 = 6;
let num2 = num1;
 
console.log(num1); // 6
console.log(num2); // 6

When we assign a primitive data type to another variable, its value is copied and assigned to the new variable.

Recommended: Download free HTML CSS Templates with source code for practice

Non-primitive data type: –

Non-primitive data is mutable. This is because the value of the object can change even after an object has been created. When we create non-primitive data, an address is created in memory for that data and the values ​​are stored in one place by remembering that address. Then when we need it later he calls that address and provides our data. To understand this you need to know about stack and hip memory. But I have to remember as much as I said now.

let arr1 = ['Reza', 'Jack', 'Willam', 'Lucas'];
let arr2 = arr1;


* Before Changing

console.log(arr1);

// Reza, Jack, Willam, Lucas

console.log(arr2);

// Reza, Jack, Willam, Lucas

arr2[0] = 'Karim';


* After Changing

console.log(arr1); 

// Karim, Jack, Willam, Lucas

console.log(arr2);

// Karim, Jack, Willam, Lucas

Non-primitive or reference data always passes their reference. When we assign a reference data to another variable, its reference is copied. This means that when we assign arr1 to arr2, we copy or remember its reference or address, not its value. So the addresses of the two variables remain the same. So when we change the value of one of the variables, the value of both the variables changes.

let obj1 = {
  name: 'Josh'
};
let obj2 = obj1;
 
* Before Changing

console.log(`Before changing: ${obj1.name}`); 
// Josh
console.log(`Before changing: ${obj2.name}`); 
// Josh
 
obj2.name = 'Richard';

* After Changing

console.log(`After changing: ${obj1.name}`); 
// Richard
console.log(`After changing: ${obj2.name}`); 
// Richard

Hope you understand very well what is happening in the above code now. A word non-primitive data compares by their reference.

let obj1 = {
  name: 'Alex'
};
 
let obj2 = {
  name: 'Alex'
};
 
console.log(obj1 == obj2); // false
console.log(obj1 === obj2); // false

Here the two objects have the same value. But when we compare two objects with each other, they are returning false. Because even though their value is the same, their address is not the same.

let obj1 = {
  name: 'Alex',
};
let obj2 = obj1;
 
console.log(obj1 == obj2); // true
console.log(obj1 === obj2); // true

What is going on here? The matter is as clear as water.

Conclusion

This is the difference between primitive and reference type data in JavaScript. If you like it, then spread free knowledge among everyone. Help everyone to know and learn. See you in a later post. Happy coding.

Read my others article about coding and programming, Tips, Productivity , Resources etc…

Also, if you have any questions or suggestions related to the article, please let us know in the comments below.

Recommended: Test your JavaScript knowledge – JavaScript quiz!

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Next

Download Free Graphics Design Software: Learning graphic design can be considered as a great career at the present time. However, in order...
Continue Reading
Today we are going to discuss what is the difference between primitive and reference type data in JavaScript and how these data types...
Continue Reading
What is a firewall and how does it works? Why is firewall used and what are its types? Importance of it on your... (discuss in details).
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!