JS Primitives vs Objects — Interactive Lab

Primitives — 7 types

Simple, single values. Stored directly in memory.

string number boolean undefined null bigint symbol

let name = "Ayushi";   // string
let age  = 22;        // number
let isOn = true;      // boolean
let x;               // undefined
let empty = null;    // null

Objects — reference types

Complex values. Stored as a reference (pointer) in memory.

object {} array [] function Date RegExp

let user = {
  name: "Ayushi",
  age: 22
};
let nums = [1, 2, 3];
let greet = function() {};

The KEY difference — how they're stored

Primitives → stored by VALUE

The actual value sits directly in the variable's memory slot.

Think of it like writing a number on a sticky note. The note IS the value.

Objects → stored by REFERENCE

The variable stores an address pointing to where the object lives.

Think of it like writing a home address on a sticky note. The note points to the house, it IS NOT the house.

Memory Visualizer — click to add variables

See exactly how JS stores primitives vs objects in memory.

📦 STACK (fast, small)

click buttons above →

🏠 HEAP (large, flexible)

object data lives here

Primitives → stored directly on the Stack. Fast access. Fixed size.
Objects → stored on the Heap. Stack holds only a reference (memory address) to the Heap location.

Primitives — Copied by VALUE

When you copy a primitive, you get a completely new independent copy. Changing one does NOT affect the other.

let a = 10;
let b = a;     // b gets a COPY of the value 10

b = 99;       // only b changes

console.log(a); // 10 ← untouched!
console.log(b); // 99

LIVE DEMO — Click to run step by step

Output will appear here...

Objects — Copied by REFERENCE

When you copy an object, you copy the reference (address), not the data. Both variables point to the SAME object in memory!

let user1 = { name: "Ayushi" };
let user2 = user1;   // user2 points to SAME object

user2.name = "Priya";  // modifies the shared object

console.log(user1.name); // "Priya" ← user1 changed too! 😱
console.log(user2.name); // "Priya"

LIVE DEMO

Output will appear here...

How to make a TRUE copy of an object

Use spread operator or Object.assign() for shallow copy, or JSON.parse(JSON.stringify()) for deep copy.

// Shallow copy (1 level deep)
let original = { name: "Ayushi", age: 22 };
let copy = { ...original };   // spread operator

copy.name = "Priya";
console.log(original.name);  // "Ayushi" ← safe now ✅

// Deep copy (nested objects too)
let deepCopy = JSON.parse(JSON.stringify(original));

LIVE DEMO

Output will appear here...

const does NOT mean immutable for objects!

This is a very common interview trap. const just means the reference can't change — but the object's contents CAN be mutated.

const user = { name: "Ayushi" };

// ✅ This WORKS — mutating the object
user.name = "Priya";
user.age = 22;

// ❌ This FAILS — reassigning the variable
user = { name: "Someone else" }; // TypeError!

LIVE DEMO

Output will appear here...

Comparing primitives vs objects

// Primitives — compared by VALUE
5 === 5               // true ✅
"hi" === "hi"          // true ✅

// Objects — compared by REFERENCE
{} === {}               // false ❌ (different objects in memory!)
[] === []               // false ❌

const a = [1,2,3];
const b = a;
a === b                 // true ✅ (same reference)

LIVE DEMO

Output will appear here...

Primitives are immutable

You can't change a primitive value — you can only replace it with a new one.

let str = "hello";
str[0] = "H";         // silently fails!
console.log(str);       // still "hello"

// To "change" it, replace the whole value:
str = "Hello";         // new string created, old one discarded

LIVE DEMO

Output will appear here...

typeof — check any value live

Type any JS expression in the box to see what typeof returns.

Type something and click Check →

Quick Reference — typeof results

typeof "Ayushi"    // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof Symbol()    // "symbol"
typeof 9007n       // "bigint"

// ⚠️ TRICK QUESTIONS — common in interviews!
typeof null        // "object" ← BUG in JS! null is NOT an object
typeof []           // "object" ← arrays are objects
typeof {}           // "object"
typeof function(){} // "function" ← special case

How to properly check if something is an Array

Since typeof [] returns "object", you need a different approach:

const nums = [1, 2, 3];

Array.isArray(nums);           // true ✅ (best way)
nums instanceof Array;        // true ✅
typeof nums === "object";      // true ❌ (can't tell it's array)

// Check for null specifically:
const val = null;
val === null;                 // true ✅ (only way to check null)

LIVE DEMO

Output will appear here...

Interview Quiz — 8 Questions

Question 1 of 8