Primitive Types

What's the difference between "hello" and { text: "hello" }? Why can you call "hello".toUpperCase() if strings aren't objects? And why does typeof null return "object"?

// JavaScript has exactly 7 primitive types
const str = "hello";           // string
const num = 42;                // number
const big = 9007199254740993n; // bigint
const bool = true;             // boolean
const undef = undefined;       // undefined
const nul = null;              // null
const sym = Symbol("id");      // symbol

console.log(typeof str);   // "string"
console.log(typeof num);   // "number"
console.log(typeof nul);   // "object" — Wait, what?!

These seven primitive types are the foundation of all data in JavaScript. Unlike objects, primitives are immutable (unchangeable) and compared by value. Every complex structure you build (arrays, objects, classes) ultimately relies on these simple building blocks.

What Are Primitive Types?

In JavaScript, a primitive is data that is not an object and has no methods of its own. As defined by the ECMAScript 2024 specification (ECMA-262), JavaScript has exactly 7 primitive types:

Three Key Characteristics

All primitives share these fundamental traits:

let name = "Alice";
name.toUpperCase();    // Creates "ALICE" but doesn't change 'name'
console.log(name);     // Still "Alice"

let a = "hello";
let b = "hello";
console.log(a === b);  // true - same value

let obj1 = { text: "hello" };
let obj2 = { text: "hello" };
console.log(obj1 === obj2);  // false - different objects!

"hello".toUpperCase();  // Works! JS wraps "hello" in a String object

The Atoms vs Molecules Analogy

Think of data in JavaScript like chemistry class (but way more fun, and no lab goggles required). Primitives are like atoms: the fundamental, indivisible building blocks that cannot be broken down further. Objects are like molecules: complex structures made up of multiple atoms combined together.

┌─────────────────────────────────────────────────────────────────────────┐
│                     PRIMITIVES VS OBJECTS                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   PRIMITIVES (Atoms)                    OBJECTS (Molecules)              │
│                                                                          │
│   ┌───┐  ┌─────┐  ┌──────┐             ┌────────────────────────────┐   │
│   │ 5 │  │"hi" │  │ true │             │ { name: "Alice", age: 25 } │   │
│   └───┘  └─────┘  └──────┘             └────────────────────────────┘   │
│                                                                          │
│   • Simple, indivisible                 • Complex, contains values       │
│   • Stored directly                     • Stored as reference            │
│   • Compared by value                   • Compared by reference          │
│   • Immutable                           • Mutable                        │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Just like atoms are the foundation of all matter, primitives are the foundation of all data in JavaScript. Every complex data structure you create — arrays, objects, functions — is ultimately built on top of these simple primitive values.

The 7 Primitive Types: Deep Dive

Let's explore each primitive type in detail.

String

A string represents text data: a sequence of characters.

// Three ways to create strings
let single = 'Hello';           // Single quotes
let double = "World";           // Double quotes
let backtick = `Hello World`;   // Template literal (ES6)

Template Literals (Still Just Strings!)

Template literals (backticks) are not a separate type. They're just a more powerful syntax for creating strings. The result is still a regular string primitive:

let name = "Alice";
let age = 25;

// String interpolation - embed expressions
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);        // "Hello, Alice! You are 25 years old."
console.log(typeof greeting); // "string" — it's just a string!

// Multi-line strings
let multiLine = `
  This is line 1
  This is line 2
`;
console.log(typeof multiLine); // "string"

Strings Are Immutable

You cannot change individual characters in a string:

let str = "hello";
str[0] = "H";        // Does nothing! No error, but no change
console.log(str);    // Still "hello"

// To "change" a string, create a new one
str = "H" + str.slice(1);
console.log(str);    // "Hello"

Number

JavaScript has only one number type for both integers and decimals. All numbers are stored as 64-bit floating-point (a standard way computers store decimals).

let integer = 42;        // Integer
let decimal = 3.14;      // Decimal
let negative = -10;      // Negative
let scientific = 2.5e6;  // 2,500,000 (scientific notation)

Special Number Values

console.log(1 / 0);       // Infinity
console.log(-1 / 0);      // -Infinity
console.log("hello" * 2); // NaN (Not a Number)

JavaScript has special number values: Infinity for values too large to represent, and NaN (Not a Number) for invalid mathematical operations.

The Famous Floating-Point Problem

console.log(0.1 + 0.2);           // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);   // false! Welcome to JavaScript!

This isn't a JavaScript bug — it follows the IEEE 754 double-precision floating-point standard used by virtually all modern programming languages. The decimal 0.1 cannot be perfectly represented in binary.

// Bad: floating-point errors in calculations
let price = 0.1 + 0.2;  // 0.30000000000000004

// Good: calculate in cents, format for display
let priceInCents = 10 + 20;  // 30 (calculation is accurate!)

// Use Intl.NumberFormat to display as currency
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
console.log(formatter.format(priceInCents / 100));  // "$0.30"

// Works for any locale and currency!
const euroFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
});
console.log(euroFormatter.format(1234.56));  // "1.234,56 €"

Safe Integer Range

JavaScript can only safely represent integers up to a certain size:

console.log(Number.MAX_SAFE_INTEGER);  // 9007199254740991 (2^53 - 1)
console.log(Number.MIN_SAFE_INTEGER);  // -9007199254740991

Number.MAX_SAFE_INTEGER is the largest integer that can be safely represented. Beyond this range, precision is lost:

// Beyond this range, precision is lost
console.log(9007199254740992 === 9007199254740993);  // true! (wrong!)

For larger integers, use BigInt.

BigInt

BigInt (ES2020) represents integers larger than Number.MAX_SAFE_INTEGER.

// Add 'n' suffix to create a BigInt
let big = 9007199254740993n;
let alsoBig = BigInt("9007199254740993");

console.log(big + 1n);  // 9007199254740994n (correct!)

BigInt Rules

// Cannot mix BigInt and Number
let big = 10n;
let regular = 5;
// console.log(big + regular);  // TypeError!

// Must convert explicitly
console.log(big + BigInt(regular));  // 15n
console.log(Number(big) + regular);  // 15

Boolean

Boolean has exactly two values: true and false.

let isLoggedIn = true;
let hasPermission = false;

// From comparisons
let isAdult = age >= 18;        // true or false
let isEqual = name === "Alice"; // true or false

Truthy and Falsy

When used in boolean contexts (like if statements), all values are either "truthy" or "falsy":

// Falsy values (only 8!)
false
0
-0
0n        // BigInt zero
""        // Empty string
null
undefined
NaN

// Everything else is truthy
"hello"   // truthy
42        // truthy
[]        // truthy (empty array!)
{}        // truthy (empty object!)

// Convert any value to boolean
let value = "hello";
let bool = Boolean(value);  // true
let shortcut = !!value;     // true (double negation trick)

undefined

undefined means "no value has been assigned." JavaScript uses it automatically in several situations:

// 1. Declared but not assigned
let x;
console.log(x);  // undefined

// 2. Missing function parameters
function greet(name) {
  console.log(name);  // undefined if called without argument
}
greet();

// 3. Function with no return statement
function doNothing() {
  // no return
}
console.log(doNothing());  // undefined

// 4. Accessing non-existent object property
let person = { name: "Alice" };
console.log(person.age);  // undefined

null

null means "intentionally empty". You're explicitly saying "this has no value."

// Intentionally clearing a variable
let user = { name: "Alice" };
user = null;  // User logged out, clearing the reference

// Indicating no result
function findUser(id) {
  // ... search logic ...
  return null;  // User not found
}

The Famous typeof Bug

console.log(typeof null);  // "object" — Wait, what?!

Yes, really. This is one of JavaScript's most famous quirks! It's a historical mistake from JavaScript's first implementation in 1995. It was never fixed because too much existing code depends on it.

// How to properly check for null
let value = null;
console.log(value === null);  // true (use strict equality)

Symbol

Symbol (ES6) creates unique identifiers. According to MDN, Symbol was the first new primitive type added to JavaScript since its creation in 1995. Even symbols with the same description are different.

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2);  // false — always unique!
console.log(id1.description);  // "id" (the description)

Use Case: Unique Object Keys

const ID = Symbol("id");
const user = {
  name: "Alice",
  [ID]: 12345  // Symbol as property key
};

console.log(user.name);    // "Alice"
console.log(user[ID]);     // 12345

// Symbol keys don't appear in normal iteration
console.log(Object.keys(user));  // ["name"] — ID not included

Well-Known Symbols

JavaScript has built-in symbols for customizing object behavior:

// Symbol.iterator - make an object iterable
// Symbol.toStringTag - customize Object.prototype.toString
// Symbol.toPrimitive - customize type conversion

These are called well-known symbols and allow you to customize how objects behave with built-in operations.

The typeof Operator

The typeof operator returns a string indicating the type of a value.

console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof 42n);         // "bigint"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof Symbol());    // "symbol"
console.log(typeof null);        // "object" ⚠️ (bug!)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

typeof Results Table

Better Type Checking

Since typeof has quirks, here are more reliable alternatives:

// Check for null specifically
let value = null;
if (value === null) {
  console.log("It's null");
}

// Check for arrays
Array.isArray([1, 2, 3]);  // true
Array.isArray("hello");    // false

// Get precise type with Object.prototype.toString
Object.prototype.toString.call(null);       // "[object Null]"
Object.prototype.toString.call([]);         // "[object Array]"
Object.prototype.toString.call(new Date()); // "[object Date]"

Array.isArray() is the reliable way to check for arrays, since typeof [] returns "object". For more complex type checking, Object.prototype.toString() gives precise type information.

Immutability Explained

Immutable means "cannot be changed." Primitive values are immutable. You cannot alter the value itself.

Seeing Immutability in Action

let str = "hello";

// These methods don't change 'str' — they return NEW strings
str.toUpperCase();     // Returns "HELLO"
console.log(str);      // Still "hello"!

// To capture the new value, you must reassign
str = str.toUpperCase();
console.log(str);      // Now "HELLO"

Visual: What Happens in Memory

BEFORE str.toUpperCase():
┌─────────────────┐
│  str → "hello"  │   (original string)
└─────────────────┘

AFTER str.toUpperCase() (without reassignment):
┌─────────────────┐
│  str → "hello"  │   (unchanged!)
└─────────────────┘
┌─────────────────┐
│     "HELLO"     │   (new string, not captured, garbage collected)
└─────────────────┘

AFTER str = str.toUpperCase():
┌─────────────────┐
│  str → "HELLO"  │   (str now points to new string)
└─────────────────┘

Common Misconception: const vs Immutability

const prevents reassignment, not mutation. These are different concepts!

// const prevents reassignment
const name = "Alice";
// name = "Bob";  // Error! Cannot reassign const

// But const doesn't make objects immutable
const person = { name: "Alice" };
person.name = "Bob";     // Works! Mutating the object
person.age = 25;         // Works! Adding a property
// person = {};          // Error! Cannot reassign const

// Primitives are immutable regardless of const/let
let str = "hello";
str[0] = "H";  // Silently fails — can't mutate primitive

Autoboxing: The Secret Life of Primitives

If primitives have no methods, how does "hello".toUpperCase() work?

The Magic Behind the Scenes

When you access a property or method on a primitive, JavaScript temporarily wraps it in an object:

1. You Call a Method on a Primitive

   "hello".toUpperCase()

2. JavaScript Creates a Wrapper Object

   Behind the scenes, JavaScript does something like:

   (new String("hello")).toUpperCase()

3. Method Executes and Returns

   The toUpperCase() method runs and returns "HELLO".

4. Wrapper Object Is Discarded

   The temporary String object is thrown away. The original primitive "hello" is unchanged.

Wrapper Objects

Each primitive type (except null and undefined) has a corresponding wrapper object:

Don't Use new String() etc.

You can create wrapper objects manually, but don't:

// Don't do this!
let strObj = new String("hello");
console.log(typeof strObj);        // "object" (not "string"!)
console.log(strObj === "hello");   // false (object vs primitive)

// Do this instead
let str = "hello";
console.log(typeof str);           // "string"

null vs undefined

These two "empty" values confuse many developers. Here's how they differ:

// 1. Uninitialized variables
let x;
console.log(x);  // undefined

// 2. Missing function arguments
function greet(name) {
  console.log(name);
}
greet();  // undefined

// 3. No return statement
function noReturn() {}
console.log(noReturn());  // undefined

// 4. Non-existent properties
let obj = {};
console.log(obj.missing);  // undefined

// 5. Array holes
let arr = [1, , 3];
console.log(arr[1]);  // undefined

// 1. Explicitly "clearing" a value
let user = { name: "Alice" };
user = null;  // User logged out

// 2. Function returning "no result"
function findUser(id) {
  // Search logic...
  return null;  // Not found
}

// 3. Optional object properties
let config = {
  cache: true,
  timeout: null  // Explicitly no timeout
};

// 4. Resetting references
let timer = setTimeout(callback, 1000);
clearTimeout(timer);
timer = null;  // Clear reference

Best Practices

// Check for either null or undefined (loose equality)
if (value == null) {
  console.log("Value is null or undefined");
}

// Check for specifically undefined
if (value === undefined) {
  console.log("Value is undefined");
}

// Check for specifically null
if (value === null) {
  console.log("Value is null");
}

// Check for "has a value" (not null/undefined)
if (value != null) {
  console.log("Value exists");
}

The #1 Primitive Mistake: Using Wrapper Constructors

The most common mistake developers make with primitives is using new String(), new Number(), or new Boolean() instead of literal values.

┌─────────────────────────────────────────────────────────────────────────┐
│                     PRIMITIVES VS WRAPPER OBJECTS                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  WRONG WAY                              RIGHT WAY                        │
│  ─────────                              ─────────                        │
│  new String("hello")                    "hello"                          │
│  new Number(42)                         42                               │
│  new Boolean(true)                      true                             │
│                                                                          │
│  typeof new String("hi") → "object"     typeof "hi" → "string"          │
│  new String("hi") === "hi" → false      "hi" === "hi" → true            │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// ❌ WRONG - Creates an object, not a primitive
const str = new String("hello");
console.log(typeof str);        // "object" (not "string"!)
console.log(str === "hello");   // false (object vs primitive)

// ✓ CORRECT - Use primitive literals
const str2 = "hello";
console.log(typeof str2);       // "string"
console.log(str2 === "hello");  // true

JavaScript Quirks & Gotchas

JavaScript has some famous "weird parts" that every developer should know. Most relate to primitives and type coercion.

console.log(typeof null);  // "object"

// Always check for null explicitly
if (value !== null && typeof value === "object") {
  // It's a real object
}

console.log(NaN === NaN);  // false!
console.log(NaN !== NaN);  // true!

// Don't do this
if (value === NaN) { }  // Never true!

// Do this instead
if (Number.isNaN(value)) { }  // ES6, recommended
if (isNaN(value)) { }         // Older, has quirks

console.log(0.1 + 0.2);         // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false

// 1. Work in integers (cents, not dollars) — RECOMMENDED
let totalCents = 10 + 20;  // 30 (accurate!)
let dollars = totalCents / 100;  // 0.3

// 2. Use Intl.NumberFormat for display
new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'USD' 
}).format(0.30);  // "$0.30"

// 3. Compare with tolerance for equality checks
Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON;  // true (Number.EPSILON is the smallest difference)

// 4. Use toFixed() for simple rounding
(0.1 + 0.2).toFixed(2);  // "0.30"

console.log(Boolean(""));      // false (empty string is falsy)
console.log(Boolean(" "));     // true (space is truthy!)
console.log(Boolean("0"));     // true (string "0" is truthy!)
console.log(Boolean(0));       // false (number 0 is falsy)

console.log("" == false);      // true (coercion)
console.log("" === false);     // false (different types)

// Check for empty or whitespace-only string
if (str.trim() === "") {
  console.log("String is empty or whitespace");
}

console.log(1 + 2);        // 3 (number addition)
console.log("1" + "2");    // "12" (string concatenation)
console.log(1 + "2");      // "12" (number converted to string!)
console.log("1" + 2);      // "12" (number converted to string!)
console.log(1 + 2 + "3");  // "33" (left to right: 1+2=3, then 3+"3"="33")
console.log("1" + 2 + 3);  // "123" (left to right: "1"+2="12", "12"+3="123")

// Force number addition
Number("1") + Number("2");  // 3
parseInt("1") + parseInt("2");  // 3

// Force string concatenation
String(1) + String(2);  // "12"
`${1}${2}`;  // "12"

Key Takeaways

Test Your Knowledge

let x;           // undefined (automatic)
let y = null;    // null (explicit)

console.log(NaN === NaN);  // false!

// ❌ WRONG - Never works!
if (value === NaN) { }

// ✓ CORRECT - Use Number.isNaN()
if (Number.isNaN(value)) { }

Frequently Asked Questions

Related Concepts

Reference

Articles

Books

Courses

Videos