Primitive vs Non-Primitive Data Types in JavaScript

What are Data Types?

In JavaScript, a data type specifies the kind of value a variable can hold and determines how the computer handles that data. JavaScript is a dynamically and weakly typed language, meaning variables are not bound to a single type and can change their data type during execution.The language features 8 fundamental data types.
For example:

let name = "Abimanyu";
let age = 21;
let isStudent = true;

Here:

• name → String
• age → Number
• isStudent → Boolean

JavaScript data types are mainly divided into two categories:

1. Primitive Data Types
2. Non-Primitive Data Types

Primitive Data Types

Primitive data types are the built-in data types provided by JavaScript. They represent single values and are immutable, meaning their values cannot be changed directly after creation. JavaScript supports the following primitive data types:

• String * Number * BigInt * Boolean * Undefined * Null * Symbol

For example:

let name = "Abimanyu";
let age = 21;
let isStudent = true;

Each variable contains a single value.We can also check the data type using typeof.

console.log(typeof name);      // string
console.log(typeof age);       // number
console.log(typeof isStudent); // boolean

Non-Primitive Data Types

Non-primitive data types, also known as reference types, are objects and derived data types. They can store collections of values or more complex entities. The key non-primitive data type in JavaScript is Object
For example:

let student = {
    name: "Abimanyu",
    age: 21,
    isStudent: true
};

Here, one object contains multiple values.We can access those values using their property names:

console.log(student.name);
console.log(student.age);

Output:

Abimanyu
21

Arrays and functions are also objects in JavaScript, so they are considered non-primitive values.Even though we commonly call this an array, technically it is an object.
For example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(typeof fruits);

Output:

object

The Main Difference

The important difference between primitive and non-primitive values becomes clearer when we copy them.Let's start with a primitive value.

let a = 10;
let b = a;
b = 20;
console.log(a);
console.log(b);

Output:

10
20

Why did a remain 10?
When we wrote:

let b = a;

the value of a was copied to b.So both variables initially had the value 10, but they are independent values.When we changed b to 20, only b changed.

What happens with Objects?

Now let's try the same thing with an object.

let person1 = {
    name: "Abimanyu"
};
let person2 = person1;
person2.name = "Rahul";
console.log(person1.name);
console.log(person2.name);

Output:

Rahul
Rahul

This might look strange at first.Why did changing person2 also change person1?
Because when we write:

let person2 = person1;

we are not creating a completely new object.Both variables refer to the same object.
You can imagine it like this:

person1 ──┐
          ↓
       Object
       name: "Abimanyu"
          ↑
person2 ──┘

Both person1 and person2 are pointing to the same object.
So when we do:

person2.name = "Rahul";

the actual object is changed.That's why person1.name also becomes "Rahul".

A Simple Way to Remember

lets remember this with a simple example.

Primitive = Copying a Number

Imagine I have:

a = 10

Then I copy it:

b = 10

Now a and b have their own values.Changing b doesn't change a.

Non-Primitive = Sharing the Same Object

Imagine there is one document and two people have access to it.

person1 ──┐
          ↓
       Same Object
          ↑
person2 ──┘

If person2 changes something in the object, person1 will also see that change because both are referring to the same object.