The JavaScript Type System: Primitives, References, and Coercion

Understanding the JavaScript type system is arguably one of the most critical skills for a developer. Many of the most confusing bugs in JavaScript come from a misunderstanding of how the language handles and converts data types.

In this guide, we’ll break down primitive vs. reference types, the quirks of type coercion, and what it really means for a value to be “truthy” or “falsy”.

1. What Are Data Types?

Definition: In JavaScript, every value has a specific type. These types define what kind of data is being stored — whether it’s a number, text, a true/false condition, or a complex object.

JavaScript divides data into two main categories:

1. Primitive types: These are simple, single values stored directly in memory.
2. Reference types: These are complex collections of data, stored as memory references rather than direct values.

2. Primitive Data Types

Primitives are the most basic forms of data. There are 7 primitive types in JavaScript:

• String: Represents text (e.g., "hello", 'John Doe').
• Number: Represents any numeric value, including decimals (e.g., 3, 99, 3.14).
• Boolean: Represents a logical entity and can have only two values: true or false.
• Undefined: A variable that has been declared but has not yet been assigned a value (e.g., let x;).
• Null: An intentional empty value. You explicitly set a variable to null to say "this holds nothing" (e.g., let x = null;).
• Symbol: A unique identifier, mostly used in advanced object-oriented programming.
• BigInt: Used for incredibly large integers that exceed the safe limit of standard Numbers.

let courseName = "JavaScript"; // String
let price = 999;               // Number
let isAvailable = true;        // Boolean
let futureFeature;             // Undefined
let activeDiscount = null;     // Null

3. Reference Data Types

While primitives hold a single value, Reference Types can hold collections of values or complex entities.

• Object: A collection of key-value pairs (e.g., { name: "Smith", age: 26 }).
• Array: An ordered list of values (e.g., [10, 20, 30]).
• Function: A reusable block of code (e.g., function greet() {}).

The Catch: Unlike primitives, reference types are not copied directly; they are copied by reference. If you create a copy of an object and change the copy, the original object will also change because both variables point to the same location in memory!

4. The typeof Operator and Its Famous Bug

You can check the data type of any value using the typeof operator.

typeof "Snoop Dog" // "string" 
typeof 99          // "number" 
typeof undefined   // "undefined" [cite: 34]

⚠️ JS Reality Check (The Famous Bug): If you run typeof null, JavaScript returns "object". This is widely acknowledged as a bug that has existed since the early days of JavaScript, but it cannot be fixed without breaking millions of existing websites. Remember: null is a primitive, even though typeof claims it is an object.

5. Type Coercion: JavaScript’s Auto-Conversion

Definition: Type coercion is JavaScript’s habit of automatically converting one data type into another behind the scenes to complete an operation.

"5" + 1  // "51" (The number 1 is auto-converted to a string and concatenated) [cite: 37, 45]
"5" - 1  // 4    (The string "5" is auto-converted to a number to do math) [cite: 37, 45]

Because of coercion, you should always be cautious about how you compare values.

• Loose Equality (==): Compares values after attempting to convert them to the same type. (e.g., 5 == "5" is true ).
• Strict Equality (===): Compares both value and type without any conversion. (e.g., 5 === "5" is false ).
• Mindset Rule: Always prefer === for accurate comparisons and bug-free code.

6. Truthy and Falsy Values

In JavaScript, every value has an inherent boolean state — meaning if you put it inside an if statement, JS will treat it as either true or false.

Get Aman Verma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Falsy Values: There are exactly 6 falsy values in JavaScript. If a value is one of these, it translates to false

• false
• 0
• "" (Empty string)
• null
• undefined
• NaN (Not a Number)

Truthy Values: Literally everything else is truthy! This includes "0" (a string containing zero), "false" (a string containing the word false), empty arrays [], and empty objects {}.

💡 Practice Zone

Ready to test your knowledge? Try answering these questions based on what we just covered:

• Prediction: What will be the output of console.log("5" + 3); and console.log("5" - 3);?
• Type Checking: What does console.log(typeof null); return, and why is it special?
• Truthy/Falsy Check: Is Boolean("0") truthy or falsy? What about Boolean(undefined)?
• Equality Check: What is the difference between 5 == "5" and 5 === "5"?