JavaScript Data Types Explained: The Complete Beginner's Guide

// ── STRINGS ──────────────────────────────────────────────
// A string is any text wrapped in quotes (single, double, or backtick)
const userName = 'Alice';                        // single quotes ✓
const welcomeMessage = "Welcome to TheCodeForge!"; // double quotes ✓
const greeting = `Hello, ${userName}!`;           // backtick (template literal) — can embed variables

console.log(userName);         // Alice
console.log(welcomeMessage);   // Welcome to TheCodeForge!
console.log(greeting);         // Hello, Alice!
console.log(typeof userName);  // 'string'  ← typeof tells you the data type

// ── NUMBERS ──────────────────────────────────────────────
// JavaScript uses ONE Number type for both whole numbers and decimals
const userAge = 28;           // whole number (integer)
const productPrice = 9.99;    // decimal number (float)
const temperature = -5;       // negative numbers work too

console.log(userAge);          // 28
console.log(productPrice);     // 9.99
console.log(typeof userAge);   // 'number'

// ── BOOLEANS ─────────────────────────────────────────────
// A boolean is ONLY ever true or false — no quotes, no capitals
const isLoggedIn = true;       // the user IS logged in
const hasPremiumPlan = false;  // the user does NOT have premium

console.log(isLoggedIn);         // true
console.log(typeof isLoggedIn);  // 'boolean'

// ── UNDEFINED ────────────────────────────────────────────
// A variable declared but never assigned a value is automatically undefined
let userNickname;  // no value assigned yet
console.log(userNickname);         // undefined
console.log(typeof userNickname);  // 'undefined'

// ── NULL ─────────────────────────────────────────────────
// Null is a VALUE you deliberately assign to mean 'intentionally empty'
let selectedProduct = null;  // no product chosen yet — on purpose
console.log(selectedProduct);         // null
console.log(typeof selectedProduct);  // 'object'  ← FAMOUS BUG in JS — see Gotchas section!

// ── OBJECTS ───────────────────────────────────────────────
// An object groups related data under one variable name
// Syntax: { key: value, key: value }

const userProfile = {
  firstName: 'Alice',      // string value
  lastName: 'Chen',        // string value
  age: 28,                 // number value
  isPremiumMember: true,   // boolean value
  favouriteColor: null     // null — she hasn't set this preference yet
};

// Access a value using dot notation: objectName.keyName
console.log(userProfile.firstName);       // Alice
console.log(userProfile.age);             // 28
console.log(userProfile.isPremiumMember); // true

// You can also use bracket notation — useful when the key is dynamic
console.log(userProfile['lastName']);     // Chen

console.log(typeof userProfile);          // 'object'


// ── ARRAYS ────────────────────────────────────────────────
// An array is an ordered list of values, wrapped in square brackets []
// Each item has an index — STARTING AT 0, not 1!

const shoppingCart = ['Apple', 'Banana', 'Mango', 'Blueberries'];
//  indexes:              0         1        2           3

console.log(shoppingCart[0]);  // Apple     ← index 0 is the FIRST item
console.log(shoppingCart[2]);  // Mango     ← index 2 is the THIRD item
console.log(shoppingCart.length); // 4      ← .length tells you how many items

console.log(typeof shoppingCart); // 'object'  ← arrays ARE objects in JS


// ── REAL-WORLD COMBO: Object containing an Array ──────────
// This is the kind of data you'll receive from a real API

const blogPost = {
  title: 'JavaScript Data Types Explained',
  author: 'Alice Chen',
  publishedAt: '2024-01-15',
  tags: ['javascript', 'beginners', 'web-dev'],  // array nested inside object
  isPublished: true
};

console.log(blogPost.title);      // JavaScript Data Types Explained
console.log(blogPost.tags[0]);    // javascript  ← dot notation + array index combined
console.log(blogPost.tags.length);// 3

// ── DYNAMIC TYPING ────────────────────────────────────────
// JavaScript lets you reassign a variable to a completely different type.
// This is unlike Java, C++, or C# which would throw a compile error.

let score = 100;           // score is a Number
console.log(typeof score); // 'number'

score = 'One Hundred';     // reassigned to a String — JavaScript allows this
console.log(typeof score); // 'string'  ← the type changed!


// ── TYPE COERCION — JavaScript's 'helpful' auto-converting ───
// When you mix types, JS tries to convert them automatically.
// Sometimes this is useful. Often it creates baffling bugs.

// Example 1: Number + String = String (JS converts the number to text)
const itemsInCart = 3;
const message = 'You have ' + itemsInCart + ' items';
console.log(message);          // 'You have 3 items'  ← works as intended here
console.log(typeof message);   // 'string'

// Example 2: Unintended coercion — a classic beginner bug
const quantityFromInput = '5';  // user typed '5' — it came back as a STRING
const taxRate = 0.1;
const totalTax = quantityFromInput * taxRate; // * forces number conversion
console.log(totalTax);  // 0.5  ← multiplication happened to work

const wrongTotal = quantityFromInput + 10;  // + with a string = concatenation!
console.log(wrongTotal);  // '510'  ← NOT 15! JS joined the strings instead!

// THE FIX: Always convert user input to a number explicitly
const correctQuantity = Number(quantityFromInput);  // convert FIRST
const correctTotal = correctQuantity + 10;
console.log(correctTotal);  // 15  ← now it's correct arithmetic


// ── EXPLICIT TYPE CONVERSION ──────────────────────────────
// Don't rely on coercion — convert deliberately

const priceAsString = '29.99';
const priceAsNumber = Number(priceAsString);   // String → Number
console.log(priceAsNumber + 5);                // 34.99  ✓

const stockCount = 42;
const stockAsString = String(stockCount);      // Number → String
console.log('Stock level: ' + stockAsString);  // 'Stock level: 42'

const isActive = Boolean(1);   // Number → Boolean (0 = false, anything else = true)
console.log(isActive);         // true

// ── MISTAKE 1: typeof null returns 'object', not 'null' ──

const selectedItem = null;

// ❌ WRONG WAY — this doesn't work as expected
if (typeof selectedItem === 'null') {
  console.log('Nothing selected');  // this NEVER runs — typeof null is 'object'
}

// ✅ RIGHT WAY — use strict equality to check for null
if (selectedItem === null) {
  console.log('Nothing selected');  // this runs correctly
}


// ── MISTAKE 2: Mishandling NaN ────────────────────────────

const userInput = 'forty-two';              // user typed text instead of a number
const parsedValue = Number(userInput);      // can't convert text → NaN

console.log(parsedValue);              // NaN
console.log(typeof parsedValue);       // 'number'  ← NaN is ironically typed as number!

// ❌ WRONG WAY — NaN is never equal to anything, even itself
if (parsedValue === NaN) {
  console.log('Invalid number');  // NEVER runs — NaN !== NaN
}

// ✅ RIGHT WAY — use Number.isNaN()
if (Number.isNaN(parsedValue)) {
  console.log('Invalid number — please enter digits only');  // runs correctly
}


// ── MISTAKE 3: Confusing null and undefined ───────────────

// undefined = variable exists but was never given a value
let deliveryAddress;  // forgot to assign it
console.log(deliveryAddress);  // undefined  ← JS set this automatically

// null = deliberately set to empty
let discountCode = null;  // user hasn't entered a code yet — intentional
console.log(discountCode);  // null  ← YOU set this on purpose

// ❌ WRONG — treating them interchangeably causes subtle logic bugs
if (deliveryAddress == null) {
  // == (loose equality) treats both null AND undefined as 'nullish'
  // so this catches BOTH — sometimes not what you want
  console.log('Catches both null and undefined');
}

// ✅ RIGHT — use === to distinguish them precisely
if (deliveryAddress === undefined) {
  console.log('Address was never set — bug in our code?');
}
if (discountCode === null) {
  console.log('No discount code entered — that is fine');
}