Let's be honest — Javascript can feel like a mystery box 🎁. One second, your variable is a simple number, and the next... it's shapeshifting into an object without warning.

And yeah, if you've ever asked why typeof null gives you 'object', you've met one of Javascript's oldest, weirdest quirks. 😅

But here's the cool part: these little quirks tell us a lot about how Javascript handles data. At the core of it all? Primitives and Objects — like snacks 🍎 and lunchboxes 🧺. One is simple and ready to eat, while the other holds a bunch of stuff inside.

Let's dive in and unpack what's what.

🔢 What Are Data Types in Javascript?

In Javascript, data types define the kind of value a variable can hold — Numbers, Text, Booleans, Objects, and all that good stuff 🧰.

Javascript handles variables dynamically — it decides their types at runtime without asking you to declare them upfront. The interpreter takes a look and goes, "Yep, this feels like a number to me." 🎩✨

But hey — just because Javascript figures it out for you, doesn't mean you should ignore types altogether. Knowing what your variables hold can save you from hours of "Why is this not working?!" debugging later.

Think of data types like kitchen containers, and your values like ingredients:

• "Hello" → goes in the jar for sugar 🫙 (it's text — sweet and simple).

• 42 → goes in the flour jar 🌾 (a measurable quantity)..

• true/false → is like the fridge door sensor 🚪 — it's either open or closed, no in-between.

If you mix these up — like putting flour in the sugar jar — things get confusing fast 😕.

🔹 Why It Matters:

• Makes your code easier for future-you (and your team) to read

• Helps Javascript run faster and manage memory better 🚀

• Prevents weird bugs — and the chaos that follows.

⚔️ Understanding Primitive vs. Non-Primitive Data Types

Javascript splits its data types into two major camps 🏕️ — Primitive types and Non-Primitive types, commonly referred to as Objects.

🔹 Primitive Types:

Primitive types are the simplest forms of data — like atoms in chemistry ⚛️.

They are immutable, which means:

👉 Once you create them, you can't change them directly.

let name = "John";
// You can't just change the 4th letter to "a" or add a 5th letter
// Instead, you create a brand-new string:
name = "Johny";

Stored by value - Javascript keeps the actual value in memory.

Compared by value - If two primitives have the same value, they're equal.

🔸 Non-Primitive Types (Objects & Arrays):

Non-primitives are the complex, structured data types, such as objects and Arrays.

They are mutable, meaning:

👉 You can change their contents without creating a brand-new object.

let arr = [1, 2, "hi"];
arr[2] = 3; // The array itself stays the same, but its contents change.

Stored as a reference: Javascript stores the memory address where the object resides, not the data itself.

Compared by reference: Even if two objects look identical, they're not equal unless they point to the same memory address.

🛠️ Quick Note: Immutable vs. Mutable:

• Immutable - Can't change the original value. If you create a string "John", it stays "John". You can't just swap one letter without creating a whole new string. Example - Strings, Numbers, Booleans

• Mutable - Can change the content of the data structure. You can add, remove, or update properties and elements. Example - Arrays, Objects

A primitive is like a coin 🪙 — simple, complete, and exactly what it is.

A non-primitive is like a wallet 👛 — it holds different things inside, and you can swap out what's in it without replacing the whole wallet.

👉 Next up: we'll break down each primitive type and see them in action.

📘 Primitive Data Types in Javascript

Let's meet the Javascript primitives — the simple, no-nonsense building blocks your code stands on. 🧱

🧵 String

Strings are text values wrapped in quotes — they can be zero or more characters enclosed in 'single', "double", or backticks.

let greeting = "Hello";  
let name = 'John';  
let message = `Welcome, ${name}!`; // Template literal
// Now the message variable has "Welcome John!"

👉 Backticks (` ) were introduced in ES6 as template literals, which make string-building easier by letting you embed variables and multiline text without ugly concatenation.

🔢 Number

In Javascript, all numbers—whether they're whole numbers or decimals—belong to a single type called Number. There's no separate int or float like some other languages.

Under the hood, Javascript represents numbers using a 64-bit double-precision floating-point format (IEEE 754). That means it can represent:

➡️ Numbers as big as ±10³⁰⁸ and as small as ±10⁻³⁰⁸.

➡️ Integers exactly up to ±2⁵³ - 1 (which is 9,007,199,254,740,991 if you're counting 🔢).

Javascript numbers also include three special values: Infinity (endless big), -Infinity (endless small), and NaN (Not-a-Number, when math breaks).

You can write numbers in different literal forms, like:

let decimal = 42; // Decimal (everyday numbers) ✔️ most common
let binary = 0b101010; // Binary
let octal = 0o52; // Octal
let hex = 0x2A; // Hexadecimal

Honestly, you'll mostly use decimal numbers in day-to-day Javascript. The others are more for exceptional cases, like working with binary data or color codes.

✅ Boolean

Simple and powerful — it only has two values: true or false. Perfect for switches, toggles, and making decisions in your code 🔘.

You'll mostly use booleans in conditional testing, answering the age-old programming question: "Should we do this... or not?"

let isLoggedIn = false;

🕳️ null

'null' represents "no value" or "empty on purpose."

It's how you tell Javascript, "Yep, I meant to leave this blank."

let result = null; // This variable exists, but intentionally holds nothing.

❓ undefined

'undefined' means a variable exists, but no one's told it what to hold yet.

Think of it as Javascript shrugging and saying, "I've got a name, but no content yet 🤷‍♂️."

⚠️ Don't confuse this with null.

• undefined: Javascript doesn't know the value is yet.

• null: You deliberately said to Javascript, "this is empty."

let score;
console.log(score); // undefined

🧮 BigInt - Big Numbers Without Losing Precision

Javascript's Number type can only safely represent integers up to ±2⁵³ - 1 (9,007,199,254,740,991).

If you go beyond that, you start losing precision:

console.log(9007199254740991 + 1); // 9007199254740992 ✅
console.log(9007199254740991 + 2); // 9007199254740992 ❌ (wrong!)

ECMAScript introduced BigInt in ES2020 (ES11) to accurately handle huge integers.

You create a BigInt by adding an n to the end of an integer, or using the BigInt() constructor:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 1234567890123456789012345678901234567890n
const anotherBig = BigInt("987654321098765432109876543210");
console.log(anotherBig);

BigInt can handle numbers way larger than the Number.MAX_SAFE_INTEGER limit.

💡Important Gotchas - You can't mix BigInt and Number types directly in operations.

const num = 10;
const big = 20n;
console.log(num + big); // TypeError: Cannot mix BigInt and other types, use explicit conversions

// Instead, add n at the end of a number to make it a bigint.
const num = 10n;
const big = 20n;
console.log(num + big); // 30n

Use BigInt only when you really need large integers (cryptography, financial calculations, etc.).

🧿 Symbol - Unique Identifiers

In large projects (or when using third-party libraries), your objects may end up having lots of property names. Suppose multiple developers or libraries use the same property names, such as "id" or "type". In that case, you may accidentally overwrite someone else's data, causing bugs that are difficult to track and resolve.

Symbol (introduced in ES6 / 2015) solves this by providing unique, unguessable identifiers.

You create a new Symbol using the Symbol() function:

const sym1 = Symbol("id");
const sym2 = Symbol("id");
console.log(sym1 === sym2); // false — each symbol is unique

Even if the descriptions are the same, every Symbol is guaranteed to be unique.

Javascript treats Symbols as primitives but doesn't implicitly convert them to strings.

Mainly used as unique keys for object properties. Rarely used in beginner projects but essential for creating libraries, frameworks, and large-scale apps.

🧱 Non-Primitive Data Types in Javascript

Non-primitive data types are complex structures that can hold multiple values or have custom behaviours. Unlike primitives (which store simple data), non-primitives group data together or define more advanced functionality.

In Javascript, non-primitives include:

🧳Objects

Objects store multiple values in key-value pairs, the core building block of complex data. You can store any data type inside an object — numbers, strings, arrays, or even functions that make the object do things.

let user = {
name: "Luna",
age: 28,
isAdmin: true,
greet: function() {
    console.log("Hello!");
  }
};

You can access values using the dot notation:

console.log(user.name); // "Luna"
console.log(user.greet()); // "Hello"

📦Arrays

Arrays store data in an ordered list 📋.

They're zero-indexed, meaning the first item sits at index 0, the second at 1, and so on.

You access their items using these index numbers.

let todos = ["Buy milk", "Do yoga", "Write code"];
console.log(todos[0]); // "Buy milk"

⚙️Functions

In Javascript, functions are more than just reusable blocks of code — they're a special kind of object.

function greet() {
    console.log("Hello World!");
}

greet();

You'll also find other built-in objects like Dates, RegExps, and Errors in Javascript's toolbox.

• Date objects help you work with dates and times 📅.

• RegExp objects help you match patterns in strings 🔍.

• Error objects let you describe and handle problems when your code breaks ⚠️.

Javascript packs these built-in objects with their own methods and properties, giving you ready-to-use tools for everyday tasks—no need to reinvent the wheel every time.

🔑 Key traits of Non-Primitive Data:

✔️ They are mutable — you can change their contents after creating them.

✔️ Javascript stores them by reference, not by value.

✔️ Compared by reference — even two objects with duplicate content are not equal unless they're the same reference.

These are the containers and tools that Javascript provides to build real-world applications.

🔍 Using typeof to Check Data Types

Want to know what kind of data a variable holds?

Use typeof, Javascript's built-in way to check.

console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof Symbol());    // "symbol"

It's simple, but watch out for tricky cases,

typeof null;        // "object" - one of Javascript's classic quirks 😅
typeof [];          // "object" - hmm 🤔
typeof {};          // "object"

🕳️ Why typeof null an object

The typeof null returning "object" is a historical bug from the early days of Javascript, when values were tagged in binary form and null accidentally got the same tag as objects.

By the time the mistake was noticed, too much code on the web relied on this behaviour, so changing it would have broken countless existing applications.

To maintain stability and backwards compatibility, the ECMAScript committee decided to leave it as-is in the specification.

💡Pro Tip:

While typeof returns "object" for arrays (since arrays are objects under the hood), Javascript gives you a better tool to check specifically for arrays: Array.isArray().

It returns true only if the value is an actual array, not just any object.

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({ a: 1 })); // false
console.log(Array.isArray("hello")); // false

✅ Use this when you need to be sure you're working with an array, not some random object pretending to be one.

And there you have it — the wild world of Javascript data types, decoded 🎉.

Mastering these basics keeps your code clean, reduces the number of bugs, and keeps your sanity intact.

Stick around, because next up, we'll dive deeper into objects, arrays, and how actually to put these types to work in your projects. 🚀