graph TD
                    A[JavaScript Data Types] --> B[Primitive Types]
                    A --> C[Reference Types]
                    B --> D[String]
                    B --> E[Number]
                    B --> F[Boolean]
                    B --> G[Undefined]
                    B --> H[Null]
                    B --> I[Symbol]
                    B --> J[BigInt]
                    C --> K[Objects]
                    K --> L[Plain Objects]
                    K --> M[Arrays]
                    K --> N[Functions]
                    K --> O[Dates]
                    K --> P[Regular Expressions]
            

String

Strings represent text and are created with single quotes, double quotes, or backticks.

// String examples
let firstName = "John";
let lastName = 'Doe';
let greeting = `Hello, ${firstName} ${lastName}!`; // Template literal

console.log(greeting); // "Hello, John Doe!"
console.log(firstName.length); // 4
console.log(firstName.toUpperCase()); // "JOHN"

Number

Numbers in JavaScript can be integers or floating-point values. There's no separate integer type.

// Number examples
let age = 25; // Integer
let price = 19.99; // Floating-point
let discount = 0.15; // Percentage as decimal
let negativeValue = -42;

// Special number values
let infinity = Infinity;
let notANumber = NaN; // Result of invalid calculations

console.log(10 / 3); // 3.3333333333333335
console.log(Math.floor(10 / 3)); // 3

Boolean

Booleans have only two possible values: true or false. They're essential for conditional logic.

// Boolean examples
let isUserLoggedIn = true;
let hasPermission = false;

// Comparison operations result in booleans
let isAdult = age >= 18; // true if age is 18 or more

// Logical operators with booleans
let canAccessContent = isUserLoggedIn && hasPermission; // AND
let shouldShowLogin = !isUserLoggedIn; // NOT

Undefined and Null

These represent the absence of a value, but in slightly different ways.

// Undefined - variable declared but not assigned a value
let username;
console.log(username); // undefined

// Null - explicitly assigned "no value"
let selectedItem = null; // We intentionally set it to "nothing"

Symbol and BigInt

These are newer primitive types for specific use cases.

// Symbol - used for unique identifiers
const id = Symbol("id");

// BigInt - for integers larger than Number can safely handle
const bigNumber = 9007199254740991n; // Note the 'n' at the end

Objects

Objects store collections of related data and functionality as key-value pairs.

// Object example
const person = {
    firstName: "Jane",
    lastName: "Smith",
    age: 32,
    email: "jane@example.com",
    isEmployed: true,
    address: {
        street: "123 Main St",
        city: "Anytown",
        zipCode: "12345"
    },
    greet: function() {
        return `Hello, my name is ${this.firstName}!`;
    }
};

// Accessing object properties
console.log(person.firstName); // "Jane"
console.log(person["lastName"]); // "Smith"
console.log(person.address.city); // "Anytown"
console.log(person.greet()); // "Hello, my name is Jane!"

Arrays

Arrays are ordered collections of values, accessed by numeric indices starting at 0.

// Array example
const colors = ["red", "green", "blue"];
const mixedArray = [42, "hello", true, { id: 1 }, [1, 2, 3]];

// Accessing array elements
console.log(colors[0]); // "red"
console.log(colors.length); // 3

// Common array operations
colors.push("yellow"); // Add to end
console.log(colors); // ["red", "green", "blue", "yellow"]

colors.pop(); // Remove from end
console.log(colors); // ["red", "green", "blue"]

// Iterating through an array
colors.forEach(function(color) {
    console.log(color);
});

Functions

Functions are reusable blocks of code that perform a specific task or calculate a value.

// Function declarations
function addNumbers(a, b) {
    return a + b;
}

// Function expressions
const multiply = function(a, b) {
    return a * b;
};

// Arrow functions (ES6+)
const divide = (a, b) => a / b;

// Using functions
console.log(addNumbers(5, 3)); // 8
console.log(multiply(4, 2)); // 8
console.log(divide(10, 2)); // 5

// Checking types
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (arrays are objects!)
console.log(typeof function() {}); // "function"

// Type conversion
let numString = "42";
let num = Number(numString); // Convert to number
console.log(num + 8); // 50

let numToString = String(num); // Convert to string
console.log(numToString + 8); // "428"

// Automatic type conversion (be careful!)
console.log("5" + 2); // "52" (string concatenation)
console.log("5" - 2); // 3 (number subtraction)
console.log("5" * "2"); // 10 (number multiplication)