Understand the kinds of values JavaScript can hold — from simple primitives like numbers and strings, to complex reference types like objects and arrays.
In JavaScript, data types define the kind of value a variable can hold. They determine how data is stored, processed, and what operations can be performed on it. JavaScript has two categories:
Primitive Types — basic, immutable values stored directly:
String, Number, Boolean,
null, undefined, Symbol, and
BigInt.
Non-Primitive Types — complex, reference values stored by
address in memory: Object, Array,
Function.
Data types are like types of containers — each designed to hold a specific kind of value:
{ name: "Aman", age: 22 }
["red", "green", "blue"]
let name = "Aman"; // String
let age = 22; // Number
let isStudent = true; // Boolean
let emptyValue = null; // Null
let notAssigned; // Undefined
let uniqueId = Symbol("id"); // Symbol
console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);
console.log(typeof emptyValue);
console.log(typeof notAssigned);
console.log(typeof uniqueId);String → text wrapped in quotesNumber → any numeric value (integer or decimal)Boolean → only true or falsenull → intentionally empty — you set this on purposeundefined → declared but never assigned a valueSymbol → a guaranteed unique identifierlet person = {
name: "Aman",
age: 22
}; // Object
let colors = ["red", "green", "blue"]; // Array
console.log(typeof person);
console.log(typeof colors);
console.log(Array.isArray(colors)); // better Array checkObject → stores key-value pairs — the most flexible data structureArray → an ordered list; typeof calls it "object" tooArray.isArray() to reliably distinguish an array from a plain object// Primitives → copied by VALUE
let a = 10;
let b = a;
b = 20;
console.log(a); // 10 — unaffected
console.log(b); // 20
// Objects → copied by REFERENCE
let obj1 = { value: 10 };
let obj2 = obj1; // both point to the same object
obj2.value = 20;
console.log(obj1.value); // 20 — obj1 changed too!b = a makes an independent copyobj2 = obj1 makes both variables point to the same object in memoryobj2 therefore also changes obj1Think about the difference between a single item and a collection:
Click ▶ Preview, then press the button inside to check the
typeof each variable and display the results live on the page.
<!DOCTYPE html>
<html>
<head><title>Data Types</title></head>
<body style="font-family:sans-serif;padding:24px;background:#f8f9fa">
<h2>Check Data Types</h2>
<button onclick="checkTypes()"
style="padding:8px 20px;background:#f7df1e;border:none;
border-radius:6px;cursor:pointer;font-weight:700;font-size:1rem">
Click
</button>
<div id="output" style="margin-top:16px;line-height:2.2;font-size:0.95rem"></div>
<script>
function checkTypes() {
let name = "Aman";
let age = 22;
let isStudent = true;
let empty = null;
let colors = ["red", "green", "blue"];
let person = { name: "Aman", age: 22 };
const row = (label, val) =>
`<b>${label}</b> → <code>typeof</code> = <b style="color:#e07b00">${typeof val}</b><br>`;
document.getElementById("output").innerHTML =
row("name", name) +
row("age", age) +
row("isStudent", isStudent) +
row("null", empty) +
row("colors []", colors) +
row("person {}", person);
}
</script>
</body>
</html>let name = "Your Name";
let age = 0;
let isLearning = true;typeofconst student = { name: "Priya", marks: 88 };
const subjects = ["Maths", "Science", "English"];typeof student and typeof subjects — notice both say "object"Array.isArray(subjects) to correctly detect the arraystudent.name and subjects[0]typeof null return?
console.log(typeof null);typeof null === "object" is a well-known JavaScript bug that has existed since its first version and was never fixed to preserve backwards compatibility.
typeof [] return?
console.log(typeof []);
console.log(Array.isArray([]));typeof [] returns "object". Use Array.isArray() whenever you need to tell them apart.
typeof null returns "object" — a historic JavaScript bug. To check for null, always compare directly:
let val = null;
console.log(typeof val); // "object" — misleading!
console.log(val === null); // true — correct checkUse Array.isArray() instead of typeof to reliably detect arrays:
let arr = [1, 2, 3];
console.log(typeof arr); // "object" — not helpful
console.log(Array.isArray(arr)); // true — reliableKnow the difference between undefined and null — they look similar but mean different things:
let x; // undefined — declared, never assigned
let y = null; // null — deliberately set to empty
console.log(x); // undefined
console.log(y); // null
console.log(x == y); // true (loose equality)
console.log(x === y); // false (strict equality)You can mutate the properties of a const object — you just can't replace the object itself:
const user = { name: "Aman" };
user.name = "Raj"; // allowed — property changed
console.log(user.name);
// user = {}; // Error — cannot reassign the binding
Predict both outputs before running — remember the typeof null quirk!
let x = null;
let y;
console.log(typeof x);
console.log(typeof y);// Step 1: let x = null
// x holds the value null (intentionally empty)
// Step 2: typeof x
// Expected: "null" — Actual: "object"
// This is a historic JavaScript bug (since 1995).
// null is NOT an object, but typeof reports it as one.
// Output → "object"
// Step 3: let y;
// y is declared but never assigned — its value is undefined
// Step 4: typeof y
// typeof undefined === "undefined"
// Output → "undefined"
// Final output:
// "object" ← the typeof null bug
// "undefined" ← declared but unassigned
// Key takeaway:
// To check for null → use (x === null), not typeof
// To check for undefined → typeof y === "undefined" works fine