Primitive vs Non-Primitive Data Types in JS

Primitive vs Non-primitive

One of the first things you'll learn in JavaScript is that data types are divided into primitive and non-primitive types.
Understanding this difference is important because it explains why some values are copied while others are shared.

Let's break it down.

What are Primitive Data Types?

Primitive means basic or fundamental.
These are the simplest data types built into JavaScript. A primitive variable stores a single value.
JavaScript has 7 primitive data types:

string
number
boolean
undefined
null
symbol
bigint

Example:

let name = "Siva";
let age = 22;
let isStudent = true;
let score = undefined;
let value = null;

Each variable stores a single value.

Why are they called Primitive?

Think of primitive values as building blocks.

Just like bricks are used to build a house, primitive values are used to build more complex data structures like objects and arrays.

For example:

const person = {
  name: "Siva",
  age: 22
};
Here: 
  • "Siva" is a primitive (string) 
  • 22 is a primitive (number) 
  • person is an object (non-primitive)

What are Non-Primitive Data Types?

Non-primitive data types can store multiple values and are more complex.
Common non-primitive types are:

  • Object
  • Array
  • Function
  • Date
  • Map
  • Set

Example:

const person = {
  name: "Siva",
  age: 22
};

const numbers = [10, 20, 30];

Primitive Values are Copied

When you assign one primitive variable to another, JavaScript copies the value.

let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20

Changing b doesn't affect a because both variables have their own copy of the value.

Objects are Shared Through References

Objects work differently.
const person1 = {
  name: "Siva",
};

const person2 = person1;

person2.name = "Rahul";

console.log(person1.name); // Rahul
console.log(person2.name); // Rahul

Why? Because person1 and person2 refer to the same object. 

When you copy an object, JavaScript doesn't create another object. Instead, it copies the reference to that object.

Think of it like this:

person1 ──► { name: "Siva" }
             ▲
             │
person2 ─────┘

Changing the object through one variable affects the other because both point to the same object.

Reassigning an Object

Changing a property and reassigning the variable are two different things.

let person1 = { name: "Siva" };
let person2 = person1;

person2 = { name: "Rahul" };

console.log(person1.name); // Siva
console.log(person2.name); // Rahul

Now person2 points to a completely new object, so person1 remains unchanged.

Arrays Behave the Same Way

Arrays are also objects.

const arr1 = [1, 2, 3];
const arr2 = arr1;

arr2.push(4);

console.log(arr1); // [1, 2, 3, 4]
Both variables refer to the same array.

Are Strings Primitive?

Yes! This surprises developers coming from Java.
let name = "Siva";

console.log(typeof name); // "string"
In JavaScript, string is a primitive type. But strings still have methods.
let name = "Siva";

console.log(name.toUpperCase()); // SIVA
console.log(name.length); // 4

JavaScript automatically creates a temporary String object behind the scenes so you can use methods like toUpperCase() and length.

Key Takeaways

  • Primitive data types store simple values like numbers, strings, and booleans.
  • Non-primitive data types (objects, arrays, functions) store complex data.
  • Primitive values are copied by value.
  • Objects and arrays are shared by copying their reference.
  • Reassigning a variable creates a new reference, while modifying an object changes the shared object.

Understanding this difference will help you avoid common bugs and make concepts like object mutation, cloning, and React state management much easier to understand.


Thank You!